Register guided wizard (Unfinished)
This commit is contained in:
Troplo
parent
f39a5b03d4
commit
a21b1c9e80
5 changed files with 294 additions and 1 deletions
|
|
@ -18,7 +18,7 @@ export default function (vuex) {
|
||||||
}
|
}
|
||||||
if(errors.length) {
|
if(errors.length) {
|
||||||
vuex.commit('setAjaxErrors', errors)
|
vuex.commit('setAjaxErrors', errors)
|
||||||
Snackbar.open({message: ' ' + vuex.state.errors.errors, type: 'is-danger'})
|
Snackbar.open({message: ' ' + vuex.state.errors.errors + ' ', type: 'is-danger'})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -304,6 +304,35 @@
|
||||||
"text": "How can we improve?",
|
"text": "How can we improve?",
|
||||||
"submit": "Submit"
|
"submit": "Submit"
|
||||||
},
|
},
|
||||||
|
"guided": {
|
||||||
|
"registration": {
|
||||||
|
"title": "Welcome to Kaverti",
|
||||||
|
"desc": "Let's get started...",
|
||||||
|
"account": "Account",
|
||||||
|
"information": "Info",
|
||||||
|
"customization": "Customization",
|
||||||
|
"finish": "Finish",
|
||||||
|
"continue": "Continue",
|
||||||
|
"init": {
|
||||||
|
"login": "Login"
|
||||||
|
},
|
||||||
|
"info": {
|
||||||
|
"description": "Your chosen description:"
|
||||||
|
},
|
||||||
|
"customize": {
|
||||||
|
"light": "Light",
|
||||||
|
"dark": "Dark",
|
||||||
|
"amoled": "AMOLED",
|
||||||
|
"highContrast": "High Contrast",
|
||||||
|
"theme": "Select your preferred theme:"
|
||||||
|
},
|
||||||
|
"finishing": {
|
||||||
|
"home": "Start using Kaverti"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tCreate": {
|
||||||
|
}
|
||||||
|
},
|
||||||
"currency": "Koins",
|
"currency": "Koins",
|
||||||
"close": "Close",
|
"close": "Close",
|
||||||
"tos": "Terms of Service",
|
"tos": "Terms of Service",
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,16 @@ const routes = [{
|
||||||
name: 'Avatar',
|
name: 'Avatar',
|
||||||
component: route('Avatar')
|
component: route('Avatar')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
name: 'Register',
|
||||||
|
component: route('Register')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: route('Login')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/t/:username',
|
path: '/t/:username',
|
||||||
component: route('Team'),
|
component: route('Team'),
|
||||||
|
|
|
||||||
13
src/views/Login.vue
Normal file
13
src/views/Login.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Login"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
241
src/views/Register.vue
Normal file
241
src/views/Register.vue
Normal file
|
|
@ -0,0 +1,241 @@
|
||||||
|
<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.agree">{{$t('register.agree')}} <router-link @click="registerModal = false " to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
|
||||||
|
<br>
|
||||||
|
<div class="buttons">
|
||||||
|
<b-button 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" 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 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_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)
|
||||||
|
})
|
||||||
|
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
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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('/api/v1/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('/api/v1/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('/api/v1/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>
|
||||||
Loading…
Reference in a new issue