244 lines
10 KiB
Vue
244 lines
10 KiB
Vue
<template>
|
|
<div id="register">
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title has-text-centered">{{$t('guided.registration.title')}}</h1>
|
|
<h2 class="subtitle has-text-centered">{{$t('guided.registration.desc')}}</h2>
|
|
<b-steps
|
|
v-model="stage"
|
|
:animated="true"
|
|
:rounded="true"
|
|
:has-navigation="false">
|
|
<b-step-item step="0" :label="$t('guided.registration.account')" :clickable="false">
|
|
<h1 class="title has-text-centered">{{$t('guided.registration.account')}}</h1>
|
|
<div class="columns is-centered">
|
|
<div class="column">
|
|
<div class="box">
|
|
<form>
|
|
<section class="registration-account">
|
|
<b-field :label="$t('register.username')">
|
|
<b-input
|
|
:value="register.init.username"
|
|
v-model="register.init.username"
|
|
:placeholder="$t('register.username')"
|
|
required>
|
|
</b-input>
|
|
</b-field>
|
|
<b-field :label="$t('register.email')">
|
|
<b-input
|
|
type="email"
|
|
:value="register.init.email"
|
|
v-model="register.init.email"
|
|
:placeholder="$t('register.email')"
|
|
required>
|
|
</b-input>
|
|
</b-field>
|
|
<b-field :label="$t('register.password')">
|
|
<b-input
|
|
type="password"
|
|
:value="register.init.password"
|
|
v-model="register.init.password"
|
|
password-reveal
|
|
:placeholder="$t('register.password')"
|
|
required>
|
|
</b-input>
|
|
</b-field>
|
|
<b-field :label="$t('register.confirm')">
|
|
<b-input
|
|
type="password"
|
|
:value="register.init.confirmPassword"
|
|
v-model="register.init.confirm"
|
|
password-reveal
|
|
:placeholder="$t('register.confirm')"
|
|
required>
|
|
</b-input>
|
|
</b-field>
|
|
<b-checkbox v-model="register.init.agree">{{$t('register.agree')}} <router-link to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
|
|
<br>
|
|
<div class="buttons">
|
|
<b-button :disabled="!register.init.agree" class="is-info" @click="doInit" :loading="register.init.loading">{{$t('guided.registration.continue')}}</b-button>
|
|
<b-button>{{$t('guided.registration.init.login')}}</b-button>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-step-item>
|
|
|
|
<b-step-item step="1" :label="$t('guided.registration.information')" :clickable="false">
|
|
<h1 class="title has-text-centered">{{ $t('guided.registration.information') }}</h1>
|
|
<div class="columns is-centered">
|
|
<div class="column">
|
|
<div class="box">
|
|
<form>
|
|
<h2 class="subtitle has-text-centered">{{ $t('guided.registration.info.description') }}</h2>
|
|
<b-input v-model="register.personal.description" :placeholder="$t('guided.registration.info.placeholder')" maxlength="256" type="textarea"></b-input>
|
|
<b-button class="is-info" @click="doInfo()" :loading="register.personal.loading">{{$t('guided.registration.continue')}}</b-button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-step-item>
|
|
|
|
<b-step-item step="2" :label="$t('guided.registration.customization')" :clickable="false">
|
|
<h1 class="title has-text-centered">{{ $t('guided.registration.customization') }}</h1>
|
|
<div class="columns is-centered">
|
|
<div class="column">
|
|
<div class="box">
|
|
<h2 class="subtitle has-text-centered">{{ $t('guided.registration.customize.theme') }}</h2>
|
|
<div class="buttons">
|
|
<b-button :loading="register.customization.loading" @click="doTheme('light')" size="is-large" expanded class="is-light">{{$t('guided.registration.customize.light')}}</b-button>
|
|
<b-button :loading="register.customization.loading" @click="doTheme('dark')" size="is-large" expanded class="is-dark">{{$t('guided.registration.customize.dark')}}</b-button>
|
|
<b-button :loading="register.customization.loading" @click="doTheme('amoled')" size="is-large" expanded class="is-black">{{$t('guided.registration.customize.amoled')}}</b-button>
|
|
<b-button :loading="register.customization.loading" @click="doTheme('highContrast')" size="is-large" expanded class="is-black">{{$t('guided.registration.customize.highContrast')}}</b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-step-item>
|
|
|
|
<b-step-item step="3" :label="$t('guided.registration.finish')" :clickable="false">
|
|
<h1 class="title has-text-centered">{{$t('guided.registration.finish')}}</h1>
|
|
<div class="columns is-centered">
|
|
<div class="column">
|
|
<div class="has-text-centered">
|
|
<b-button @click="$router.push('/')" class="is-centered is-info" size="is-large">{{$t('guided.registration.finishing.home')}}</b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-step-item>
|
|
<b-step-item v-if="stage === 4" step="4" :label="$t('guided.registration.error')" :clickable="false">
|
|
<h1 class="title has-text-centered">{{$t('guided.registration.error')}}</h1>
|
|
Error
|
|
</b-step-item>
|
|
<br>
|
|
<b-button v-if="$store.state.debug" @click="bypassStage(true)">Debug: Bypass</b-button>
|
|
<b-button v-if="$store.state.debug" @click="bypassStage(false)">Debug: Back</b-button>
|
|
</b-steps>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AjaxErrorHandler from "@/assets/js/errorHandler";
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
name: "Register",
|
|
data() {
|
|
return {
|
|
stage: 0,
|
|
loading: true,
|
|
register: {
|
|
init: {
|
|
username: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
agree: false,
|
|
loading: false
|
|
},
|
|
personal: {
|
|
description: '',
|
|
loading: false
|
|
},
|
|
customization: {
|
|
theme: 'light',
|
|
loading: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getInfo() {
|
|
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
|
|
this.axios.get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + '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)
|
|
})
|
|
this.axios.get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + '/' + '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
|
|
})
|
|
},
|
|
bypassStage(next) {
|
|
if (next) {
|
|
this.stage = this.stage + 1
|
|
console.log("DEBUG OPTION: Stage skipped (Guided Wizard)")
|
|
} else {
|
|
this.stage = this.stage - 1
|
|
console.log("DEBUG OPTION: Stage returned (Guided Wizard)")
|
|
}
|
|
},
|
|
doInit() {
|
|
this.register.init.loading = true
|
|
this.axios.post(process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION + '/passkey/register', {
|
|
username: this.register.init.username,
|
|
password: this.register.init.password,
|
|
email: this.register.init.email,
|
|
confirm: this.register.init.confirmPassword,
|
|
agree: this.register.init.agree
|
|
}).then((res) => {
|
|
this.register.init.loading = 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'})
|
|
this.stage = 1
|
|
}).catch(e => {
|
|
this.register.init.loading = false
|
|
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
doInfo() {
|
|
this.register.personal.loading = true
|
|
this.axios.put(process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION + '/users/preferences', {
|
|
description: this.register.personal.description
|
|
}).then(() => {
|
|
this.getInfo()
|
|
this.register.personal.loading = false
|
|
this.stage = 2
|
|
}).catch(e => {
|
|
this.register.personal.loading = false
|
|
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
doTheme(theme) {
|
|
this.register.customization.loading = true
|
|
this.axios.put(process.env.VUE_APP_API_ENDPOINT +
|
|
process.env.VUE_APP_API_VERSION + '/users/preferences', {
|
|
theme: theme
|
|
}).then(() => {
|
|
this.getInfo()
|
|
this.register.customization.loading = false
|
|
this.stage = 3
|
|
}).catch(e => {
|
|
this.register.customization.loading = false
|
|
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |