603 lines
No EOL
23 KiB
Vue
603 lines
No EOL
23 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='fakeUser()'
|
|
>
|
|
{{$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='fakeUser()'
|
|
>
|
|
{{$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>
|
|
</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 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>
|
|
<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="/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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #end>
|
|
<b-navbar-item v-if="$store.state.user.username && !loading">
|
|
<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>
|
|
<b-navbar-item v-if="$store.state.user.username">
|
|
<div class="navbar-item has-dropdown is-hoverable is-info">
|
|
<a class="navbar-link">
|
|
<p>{{$store.state.user.username}}</p>
|
|
</a>
|
|
<div class="navbar-dropdown">
|
|
<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="/friends"><b-tag class="is-info" rounded> 1</b-tag> {{$t('navbar.user.friends')}}</b-navbar-item>
|
|
<b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
|
|
</div>
|
|
</div>
|
|
</b-navbar-item>
|
|
</div>
|
|
<b-navbar-item v-if="loading">
|
|
<div class="fa-1x">
|
|
<i class="fas fa-circle-notch fa-spin"></i>
|
|
{{ $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,
|
|
friendCount: 0,
|
|
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: {
|
|
getBannerId() {
|
|
if(localStorage.getItem(this.$store.state.client.bannerId)) {
|
|
this.showBanner = false
|
|
} else {
|
|
this.showBanner = true
|
|
}
|
|
},
|
|
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.$store.commit('setUsername', res.data.username)
|
|
this.$store.commit('setAvatar', res.data.avatar)
|
|
this.$store.commit('setID', res.data.id)
|
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
|
this.$store.commit('setEmail', res.data.email)
|
|
this.$store.commit('setAdmin', res.data.admin)
|
|
this.$store.commit('setToken', res.data.token)
|
|
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}})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
|
|
.then(res => {
|
|
this.$store.commit('setSettings', res.data)
|
|
this.$store.commit('setVersion', res.data.latestCanaryVersion)
|
|
}).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)
|
|
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(() => {
|
|
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
|
|
this.loading = false
|
|
console.log(this.getBannerId())
|
|
})
|
|
if(this.$store.state.username) {
|
|
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAllPendingCanAccept')
|
|
.then(res => {
|
|
this.friendCount = res.data.count
|
|
}).catch(() => {
|
|
this.$buefy.snackbar.open({message: this.$t('errors.authFail'), type: 'is-warning'})
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |