kaverti/frontend
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Features

Browse source
This commit is contained in:
Troplo 2021-01-16 15:33:33 +11:00
parent bb6f1c82b6
commit 769b039365
5 changed files with 2940 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -12,6 +12,7 @@
"axios": "^0.21.1", "axios": "^0.21.1",
"buefy": "^0.9.4", "buefy": "^0.9.4",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"crypto-random-string": "^3.3.0",
"dotenv-webpack": "^6.0.0", "dotenv-webpack": "^6.0.0",
"socket.io": "^3.1.0", "socket.io": "^3.1.0",
"to-boolean": "^1.0.0", "to-boolean": "^1.0.0",

78
src/components/Navbar.vue
View file

@ -49,16 +49,17 @@
required> required>
</b-input> </b-input>
</b-field> </b-field>
<b-checkbox v-model="login.doNotSaveToken">Do not save authentication token in browser (Logout when refreshed)</b-checkbox>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<b-button
label="Close"
@click="$emit('close')" />
<b-button <b-button
@click="doLogin()" @click="doLogin()"
label="Login" label="Login"
:loading="login.loading" :loading="login.loading"
type="is-primary" /> type="is-primary" />
<b-button
label="Close"
@click="$emit('close')" />
<b-button <b-button
@click="registerModal = true; loginModal = false" @click="registerModal = true; loginModal = false"
label="Need an account?" label="Need an account?"
@ -118,14 +119,14 @@
<b-checkbox v-model="register.agree">I agree to the <router-link to="/legal/tos">Terms of Service</router-link></b-checkbox> <b-checkbox v-model="register.agree">I agree to the <router-link to="/legal/tos">Terms of Service</router-link></b-checkbox>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<b-button
label="Close"
@click="$emit('close')" />
<b-button <b-button
@click="doRegister()" @click="doRegister()"
label="Register" label="Register"
:loading="register.loading" :loading="register.loading"
type="is-primary" /> type="is-primary" />
<b-button
label="Close"
@click="$emit('close')" />
<b-button <b-button
@click="registerModal = false; loginModal = true" @click="registerModal = false; loginModal = true"
label="Have an account?" label="Have an account?"
@ -162,6 +163,7 @@
</template> </template>
<template #end> <template #end>
<div v-if="!loading">
<b-navbar-item v-if="!$store.state.user.username" tag="div"> <b-navbar-item v-if="!$store.state.user.username" tag="div">
<div class="buttons"> <div class="buttons">
<b-button @click="registerModal = true" class="button is-primary"> <b-button @click="registerModal = true" class="button is-primary">
@ -187,6 +189,15 @@
</div> </div>
</div> </div>
</b-navbar-item> </b-navbar-item>
</div>
<div v-if="loading">
<b-navbar-item>
<div class="fa-1x">
<i class="fas fa-circle-notch fa-spin"></i>&nbsp;
&nbsp;Loading
</div>
</b-navbar-item>
</div>
</template> </template>
</b-navbar> </b-navbar>
</nav> </nav>
@ -199,10 +210,12 @@ export default {
return { return {
loginModal: false, loginModal: false,
registerModal: false, registerModal: false,
loading: true,
login: { login: {
username: '', username: '',
password: '', password: '',
loading: false loading: false,
doNotSaveToken: false,
}, },
register: { register: {
username: '', username: '',
@ -264,10 +277,38 @@ export default {
}).then((res) => { }).then((res) => {
this.login.loading = false this.login.loading = false
this.$store.commit('setToken', res.data.token) this.$store.commit('setToken', res.data.token)
if (!this.login.doNotSaveToken) {
localStorage.setItem('token', JSON.stringify(res.data.token)); localStorage.setItem('token', JSON.stringify(res.data.token));
}
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}}) Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
this.loginModal = false
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
.then(res => {
this.$store.commit('setUsername', res.data.username)
this.$store.commit('setEmail', res.data.email)
this.$store.commit('setEmailVerified', res.data.emailVerified)
this.$store.commit('setAdmin', res.data.admin)
this.$store.commit('setKoins', res.data.koins)
this.$store.commit('setID', res.data.id)
this.$store.commit('setBot', res.data.bot)
}).catch(() => {
this.$buefy.snackbar.open({message:`Error occurred while fetching user information.`, type: 'is-warning'})
})
}).catch(e => { }).catch(e => {
this.login.loading = false this.login.loading = false
AjaxErrorHandler(this.$store)(e)
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
.then(res => {
this.$store.commit('setUsername', res.data.username)
this.$store.commit('setEmail', res.data.email)
this.$store.commit('setEmailVerified', res.data.emailVerified)
this.$store.commit('setAdmin', res.data.admin)
this.$store.commit('setKoins', res.data.koins)
this.$store.commit('setID', res.data.id)
this.$store.commit('setBot', res.data.bot)
}).catch(() => {
this.$buefy.snackbar.open({message:`Error occurred while fetching user information.`, type: 'is-warning'})
})
AjaxErrorHandler(this.$store)(e, (error, errors) => { AjaxErrorHandler(this.$store)(e, (error, errors) => {
let path = error.path let path = error.path
@ -285,6 +326,29 @@ export default {
this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`) this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`)
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}}) Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
} }
},
mounted() {
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
.then(res => {
this.$store.commit('setUsername', res.data.username)
this.$store.commit('setEmail', res.data.email)
this.$store.commit('setEmailVerified', res.data.emailVerified)
this.$store.commit('setAdmin', res.data.admin)
this.$store.commit('setKoins', res.data.koins)
this.$store.commit('setID', res.data.id)
this.$store.commit('setBot', res.data.bot)
if(localStorage.getItem('usernameCache')) {
localStorage.removeItem('usernameCache')
localStorage.setItem('usernameCache', JSON.stringify(res.data.username));
} else {
localStorage.setItem('usernameCache', JSON.stringify(res.data.username));
}
this.loading = false
}).catch(() => {
localStorage.setItem('userCache', JSON.stringify(this.$store.state.user));
this.$buefy.snackbar.open({message:`Error occurred while fetching user information.`, type: 'is-warning'})
this.loading = false
})
} }
} }
</script> </script>

2839
src/views/404.vue
View file

File diff suppressed because it is too large Load diff

29
src/views/Home.vue
View file

@ -1,6 +1,33 @@
<template> <template>
<main> <main>
DEBUG HOME <div class="columns is-centered">
<div class="column is-4">
<div class="box">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width="50%">
<p>{{$store.state.user.username}}</p>
</div>
</div>
<div class="column is-6">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
</div>
</div>
</main> </main>
</template> </template>

7
yarn.lock
View file

@ -4519,6 +4519,13 @@ crypto-random-string@^1.0.0:
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4= integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
crypto-random-string@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-3.3.0.tgz#c7a4682b2a87146a1f8b7378ea2606f95775e7e6"
integrity sha512-teWAwfMb1d6brahYyKqcBEb5Yp8PJPvPOdOonXDnvaKOTmKDFNVE8E3Y2XQuzjNV/3XMwHbrX9fHWvrhRKt4Gg==
dependencies:
type-fest "^0.8.1"
css-color-names@0.0.4, css-color-names@^0.0.4: css-color-names@0.0.4, css-color-names@^0.0.4:
version "0.0.4" version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"