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) {
|
||||
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?",
|
||||
"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",
|
||||
"close": "Close",
|
||||
"tos": "Terms of Service",
|
||||
|
|
|
|||
|
|
@ -66,6 +66,16 @@ const routes = [{
|
|||
name: 'Avatar',
|
||||
component: route('Avatar')
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: route('Register')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: route('Login')
|
||||
},
|
||||
{
|
||||
path: '/t/:username',
|
||||
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