frontend/src/components/Navbar.vue
2021-02-02 23:44:45 +11:00

744 lines
No EOL
29 KiB
Vue

<template>
<nav>
<b-modal :active="ajaxErrorModal" @update:active="value => ajaxErrorModal = value" :width="640" scroll="keep" style="z-index: 200">
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">{{$t('errorModalTitle')}}</p>
<button
type="button"
class="delete"
@click="$emit('close')"/>
</header>
<section class="modal-card-body media">
<p :key='error' v-for='error in this.$store.state.errors.errors' style='margin: 1rem;'>{{error}}</p>
</section>
<footer class="modal-card-foot">
<b-button
:label="$t('gotIt')"
@click="ajaxErrorModal = false" />
</footer>
</div>
</b-modal>
<b-modal :active="loginModal" @update:active="value => loginModal = value" :width="640" scroll="keep">
<form>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t('login.title') }}</p>
<button
type="button"
class="delete"
@click="loginModal = false"/>
</header>
<section class="modal-card-body">
<b-field :label="$t('login.loginUsername')">
<b-input
:value="login.username"
v-model="login.username"
:placeholder="$t('login.loginUsername')"
required>
</b-input>
</b-field>
<b-field :label="$t('login.loginPassword')">
<b-input
type="password"
:value="login.password"
v-model="login.password"
password-reveal
:placeholder="$t('login.loginPassword')"
required>
</b-input>
</b-field>
<b-checkbox v-model="login.doNotSaveToken">{{$t('login.doNotSaveAuth')}}</b-checkbox>
</section>
<footer class="modal-card-foot">
<b-button
@click="doLogin()"
:label="$t('login.login')"
:loading="login.loading"
type="is-primary" />
<b-button
:label="$t('close')"
@click="loginModal = false" />
<b-button
@click="registerModal = true; loginModal = false"
:label="$t('login.register')"
type="is-success" />
</footer>
</div>
</form>
</b-modal>
<b-modal :active="settingsModal" @update:active="value => settingsModal = value" :width="640" scroll="keep">
<form>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t('settings.title') }}</p>
<button
type="button"
class="delete"
@click="loginModal = false"/>
</header>
<section class="modal-card-body">
<b-tabs position="is-centered" class="block">
<b-tab-item :label="$t('settings.general.title')">
<h1 class="title">{{$t('settings.general.title')}}</h1>
<div>
<h1 class="subtitle">{{$t('settings.general.about')}}</h1>
<h4>
{{ $t('settings.general.description') }}
</h4>
<b-input type="textarea"
:placeholder="$t('settings.general.hi') + ' ' + $store.state.user.username"
maxlength="256"
v-model='settings.general.description.value'
:error='settings.general.description.error'
></b-input>
<b-button
class='button is-info'
:loading='settings.general.description.loading'
@click='saveDesc()'
>
{{$t('settings.general.saveDesc')}}
</b-button>
</div>
<div>
<h2>{{$t('settings.general.preferences')}}</h2>
<b-switch class="is-info" v-model="settings.general.preferences.developerMode">{{$t('settings.general.devMode')}}</b-switch><br>
<b-button
class='button is-info'
:loading='settings.general.preferences.loading'
@click='savePref()'
>
{{$t('settings.general.savePref')}}
</b-button>
</div>
</b-tab-item>
<b-tab-item :label="$t('settings.security.title')">
Debug
</b-tab-item>
<b-tab-item :label="$t('settings.privacy.title')">
Debug
</b-tab-item>
<b-tab-item :label="$t('settings.experiments.title')">
Debug
</b-tab-item>
<b-tab-item :label="$t('settings.about.title')">
<div>
<center>
<img src="https://cdn.kaverti.com/icon.png" width="10%">
<h1>Kaverti v{{this.$store.state.client.clientVersion}}</h1>
<p>Latest client version: v{{this.$store.state.client.latestClientVersion}}</p>
<p>API version: v{{this.$store.state.client.latestAPIVersion}}</p>
</center>
</div>
</b-tab-item>
</b-tabs>
</section>
<footer class="modal-card-foot">
<b-button
:label="$t('close')"
@click="settingsModal = false" />
</footer>
</div>
</form>
</b-modal>
<b-modal :active="updateModal" @update:active="value => updateModal = value" :width="640" scroll="keep">
<form>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">{{$t('update.title')}}</p>
<button
type="button"
class="delete"
@click="updateDismissed"/>
</header>
<section class="modal-card-body has-text-centered">
<h1 class="subtitle">What's new in {{$store.state.client.clientVersion}}?</h1>
<ul>
<li>Improved pagination</li>
<li>Add friend page</li>
<li>Remove koin icon in buttons</li>
<li>Add global wall</li>
<li>Add blog</li>
<li>Add new friend count in Navbar User Menu</li>
<li>Add developmental forum</li>
<hr>
<li>{{$store.state.client.clientVersion}}-patch fixes:</li>
<li>Patch pagination page crash bug with 'wait' prop to not attempt to load more when its loading</li>
<li>Improve forum thread page</li>
</ul>
</section>
<footer class="modal-card-foot">
<b-button
:label="$t('close')"
@click="updateDismissed" />
</footer>
</div>
</form>
</b-modal>
<b-modal :active="registerModal" @update:active="value => registerModal = value" :width="640" scroll="keep">
<form>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">{{$t('register.title')}}</p>
<button
type="button"
class="delete"
@click="registerModal = false"/>
</header>
<section class="modal-card-body">
<b-field :label="$t('register.username')">
<b-input
:value="register.username"
v-model="register.username"
:placeholder="$t('register.username')"
required>
</b-input>
</b-field>
<b-field :label="$t('register.email')">
<b-input
type="email"
:value="register.email"
v-model="register.email"
:placeholder="$t('register.email')"
required>
</b-input>
</b-field>
<b-field :label="$t('register.password')">
<b-input
type="password"
:value="register.password"
v-model="register.password"
password-reveal
:placeholder="$t('register.password')"
required>
</b-input>
</b-field>
<b-field :label="$t('register.confirm')">
<b-input
type="password"
:value="register.confirm"
v-model="register.confirm"
password-reveal
:placeholder="$t('register.confirm')"
required>
</b-input>
</b-field>
<b-checkbox v-model="register.agree">{{$t('register.agree')}} <router-link @click="registerModal = false " to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
</section>
<footer class="modal-card-foot">
<b-button
@click="doRegister()"
:label="$t('register.text')"
:loading="register.loading"
type="is-primary" />
<b-button
:label="$t('close')"
@click="registerModal = false" />
<b-button
@click="registerModal = false; loginModal = true"
:label="$t('register.login')"
type="is-success" />
</footer>
</div>
</form>
</b-modal>
<section v-if='!$store.state.user.emailVerified && $store.state.user.username' class="hero is-danger">
<div class="hero-body" style="padding: 1rem 1rem !important;">
<div class="mobile-container">
<div class="container">
<p style="text-align: center;">{{$t('errors.emailVerify')}}</p>
</div>
</div>
</div>
</section>
<section v-if='$store.state.client.clientVersion !== $store.state.client.latestClientVersion && showOutdatedBanner' class="hero is-warning">
<div class="hero-body" style="padding: 1rem 1rem !important;">
<div class="mobile-container">
<div class="container">
<p style="text-align: center;">You are using an outdated version of Kaverti, please refresh.<button
type="button"
class="delete"
style="float: right;"
@click="showOutdatedBanner = false"/></p>
</div>
</div>
</div>
</section>
<b-navbar>
<template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://cdn.kaverti.com/logo.png"
alt="Kaverti Logo"
>
</b-navbar-item>
</template>
<template #start>
<b-navbar-item tag="router-link" to="/">
{{$t('navbar.home')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/forums">
{{$t('navbar.forums')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/marketplace">
{{$t('navbar.marketplace')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/users">
{{$t('navbar.users')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/teams">
{{$t('navbar.teams')}}
</b-navbar-item>
<b-navbar-item tag="router-link" to="/games">
{{$t('navbar.games')}}
</b-navbar-item>
<div v-if="$store.state.debug" class="navbar-item has-dropdown is-hoverable is-info">
<a class="navbar-link">
<p>{{$t('navbar.dev.title')}}</p>
</a>
<div class="navbar-dropdown">
<b-navbar-item tag="router-link" to="/debug">{{$t('navbar.dev.debug')}}</b-navbar-item>
<b-navbar-item @click="fakeUser()">{{$t('navbar.dev.fakeUser')}}</b-navbar-item>
<b-navbar-item @click="toggleBrokenRoute(true)">{{$t('navbar.dev.brokenRoute')}}</b-navbar-item>
</div>
</div>
<div v-if="$store.state.debug" class="navbar-item has-dropdown is-hoverable is-info">
<a class="navbar-link">
<p>{{$t('navbar.more.title')}}</p>
</a>
<div class="navbar-dropdown">
<b-navbar-item tag="a" href="https://twitter.com/Kaverti">{{$t('navbar.more.twitter')}}</b-navbar-item>
<b-navbar-item tag="a" href="https://discord.gg/Q3HAWFdBPK">{{$t('navbar.more.discord')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/roadmap">{{$t('navbar.more.roadmap')}}</b-navbar-item>
<b-navbar-item tag="a" href="soon">{{$t('navbar.more.documentation')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.downloads')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/stats">{{$t('navbar.more.stats')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/blog">{{$t('navbar.more.blog')}}</b-navbar-item>
</div>
</div>
</template>
<template #end>
<b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward(true)">
<img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
</b-navbar-item>
<div v-if="!loading">
<b-navbar-item v-if="!$store.state.user.username" tag="div">
<div class="buttons">
<b-button @click="registerModal = true" class="button is-primary">
<strong>{{$t('navbar.register')}}</strong>
</b-button>
<b-button @click="loginModal = true" class="button is-light">
{{$t('navbar.login')}}
</b-button>
</div>
</b-navbar-item>
</div>
<b-navbar-dropdown class="is-hoverable" style="padding-right:15px" :label="$store.state.user.username" v-if="$store.state.user.username && !loading">
<b-navbar-item tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
<b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
<b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded v-if="friendCount > 0"> {{ friendCount }}</b-tag>&nbsp;&nbsp;&nbsp;&nbsp;<p>{{$t('navbar.user.friends')}}</p></b-navbar-item>
<b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
</b-navbar-dropdown>
<b-navbar-item v-if="loading">
<div class="fa-1x">
<i class="fas fa-circle-notch fa-spin"></i>&nbsp;
&nbsp;{{ $t('generic.loading') }}
</div>
</b-navbar-item>
</template>
</b-navbar>
<section v-if='$store.state.client.bannerText && $store.state.client.bannerEnabled && showBanner' class="hero is-info">
<div class="hero-body" style="padding: 1rem 1rem !important;">
<div class="mobile-container">
<div class="container">
<p style="text-align: center;">{{$store.state.client.bannerText}} <button
type="button"
class="delete"
style="float: right;"
@click="removeBannerId"/></p>
</div>
</div>
</div>
</section>
</nav>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'
import axios from "axios";
export default {
data() {
return {
loginModal: false,
registerModal: false,
loading: true,
settingsModal: false,
showBanner: true,
showOutdatedBanner: true,
friendCount: 0,
updateModal: false,
settings: {
tab: 0,
general: {
description: {
value: '',
loading: false,
error: ''
},
preferences: {
theme: '',
developerMode: '',
loading: false,
error: ''
},
},
privacy: {
wall: false,
loading: false
},
experiments: {
theme: 'light',
loading: false,
error: '',
relationships: false,
wall: false,
marketplace: false,
teams: false,
newsettings: true,
corrupt: false,
local: []
},
account: {
showLogoutModal: false,
password: {
loading: false,
current: '',
new: '',
errors: {
'new password': '',
'current password': ''
}
},
email: {
loading: false,
loadingChange: false,
currentPassword: '',
new: '',
errors: {
'new password': '',
'email current password': ''
}
},
username: {username: '',
password: '',
errors: {
'username': '',
'password': '',
},
loading: false,
},
deleteAcc: {
loading: false,
password: '',
errors: {
'current password': ''
}
},
totp: {loading: false
},
deleteAccountLoading: false,
invalidateSessionLoading: false,
emailCheckDelete: false,
showLoginModal: false
}
},
login: {
username: '',
password: '',
loading: false,
doNotSaveToken: false,
},
register: {
username: '',
email: '',
password: '',
confirm: '',
agree: false,
loading: false
}
}
},
computed: {
ajaxErrorModal: {
get() {
return this.$store.state.errors.modal
},
set(val) {
this.$store.commit('setAjaxErrorsModalState', val)
}
},
},
methods: {
toggleBrokenRoute (val) {
this.$store.commit('brokenRoute', val)
},
savePref() {
this.preferences.error = ''
this.preferences.loading = true
this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
developerMode: this.preferences.developerMode
})
.then(() => {
this.preferences.loading = 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('setDevMode', res.data.developerMode)
})
})
.catch(e => {
this.preferences.loading = false
AjaxErrorHandler(this.$store)(e)
})
},
saveDesc() {
this.description.error = ''
this.description.loading = true
this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
description: this.description.value
})
.then(() => {
this.description.loading = false
})
.catch(e => {
this.description.loading = false
AjaxErrorHandler(this.$store)(e)
})
},
getBannerId() {
if(localStorage.getItem(this.$store.state.client.bannerId)) {
this.showBanner = false
} else {
this.showBanner = true
}
},
updateDismissed() {
localStorage.setItem("update-" + this.$store.state.client.clientVersion, true)
this.updateModal = false
},
showUpdate() {
if(!localStorage.getItem("update-" + this.$store.state.client.clientVersion)) {
this.updateModal = true
} else {
this.updateModal = false
}
},
removeBannerId() {
localStorage.setItem(this.$store.state.client.bannerId, true)
this.$store.state.client.bannerEnabled = false
console.log(localStorage.getItem(this.$store.state.client.bannerId))
},
doRegister() {
this.register.loading = true
this.axios.post('/api/v1/passkey/register', {
username: this.register.username,
password: this.register.password,
email: this.register.email,
confirm: this.register.confirm,
agree: this.register.agree
}).then((res) => {
this.register.loading = false
this.registerModal = false
this.$store.commit('setToken', res.data.token)
localStorage.setItem('token', JSON.stringify(res.data.token));
this.getInfo()
this.$buefy.snackbar.open({message:this.$t('errors.registered'), type: 'is-info'})
}).catch(e => {
this.register.loading = false
AjaxErrorHandler(this.$store)(e, (error, errors) => {
let path = error.path
if (this.errors[path] !== undefined) {
this.errors[path] = error.message
} else {
errors.push(error.message)
}
})
})
},
doLogin() {
this.login.loading = true
this.axios.post('/api/v1/users/login', {
username: this.login.username,
password: this.login.password
}).then((res) => {
this.login.loading = false
this.$store.commit('setToken', res.data.token)
if (!this.login.doNotSaveToken) {
localStorage.setItem('token', JSON.stringify(res.data.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)
this.$buefy.snackbar.open({message:this.$t('errors.login'), type: 'is-info'})
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
})
}).catch(e => {
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:this.$t('errors.authFail'), type: 'is-warning'})
})
AjaxErrorHandler(this.$store)(e, (error, errors) => {
let path = error.path
if (this.errors[path] !== undefined) {
this.errors[path] = error.message
} else {
errors.push(error.message)
}
})
})
},
logout() {
localStorage.removeItem('token');
this.$store.commit('setToken', '')
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
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)
this.$buefy.snackbar.open({message:this.$t('errors.logout'), type: 'is-info'})
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.logout'), type: 'is-info'})
})
},
fakeUser () {
this.$store.commit('fakeUser')
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}})
},
dailyReward(notify) {
this.axios.get(
process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/reward'
).then(res => {
this.$store.commit('setKoins', res.data.koins)
}).catch(e => {
if(notify) {
AjaxErrorHandler(this.$store)(e)
}
})
},
getInfo() {
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
.then(res => {
this.$store.commit('setSettings', res.data.state)
this.$store.commit('setVersion', res.data.state.latestCanaryVersion)
this.$store.commit('setAPIVersion', res.data.apiVersion)
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-info'})
})
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)
this.$store.commit('setDescription', res.data.description)
this.$store.commit('setExecutive', res.data.executive)
this.settings.general.description.value = res.data.description
this.loading = false
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
this.loading = false
})
}
},
mounted() {
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
.then(res => {
this.$store.commit('setSettings', res.data.state)
this.$store.commit('setVersion', res.data.state.latestCanaryVersion)
this.$store.commit('setAPIVersion', res.data.apiVersion)
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-info'})
})
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)
this.$store.commit('setDescription', res.data.description)
this.$store.commit('setExecutive', res.data.executive)
this.settings.general.description.value = res.data.description
this.loading = false
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
this.loading = false
console.log(this.getBannerId())
})
this.$nextTick(() => {
this.dailyReward(false)
this.showUpdate()
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAllPendingCanAccept')
.then(res => {
this.friendCount = res.data.count
})
})
}
}
</script>