From a21b1c9e8040c0777e3684d0c7a78de70a2543ef Mon Sep 17 00:00:00 2001
From: Troplo <troplo@flowinity.com>
Date: Thu, 8 Apr 2021 21:29:44 +1000
Subject: [PATCH] Register guided wizard (Unfinished)

---
 src/assets/js/errorHandler.js |   2 +-
 src/locales/en.json           |  29 ++++
 src/router/index.js           |  10 ++
 src/views/Login.vue           |  13 ++
 src/views/Register.vue        | 241 ++++++++++++++++++++++++++++++++++
 5 files changed, 294 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Login.vue
 create mode 100644 src/views/Register.vue

diff --git a/src/assets/js/errorHandler.js b/src/assets/js/errorHandler.js
index 31b0e00..71dff6f 100644
--- a/src/assets/js/errorHandler.js
+++ b/src/assets/js/errorHandler.js
@@ -18,7 +18,7 @@ export default function (vuex) {
 		}
 		if(errors.length) {
 			vuex.commit('setAjaxErrors', errors)
-			Snackbar.open({message: '&nbsp' + vuex.state.errors.errors, type: 'is-danger'})
+			Snackbar.open({message: '&nbsp' + vuex.state.errors.errors + '&nbsp', type: 'is-danger'})
 		}
 
 	}
diff --git a/src/locales/en.json b/src/locales/en.json
index 5a8c7f0..23ee7b8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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",
diff --git a/src/router/index.js b/src/router/index.js
index 91c6f5f..d846ce7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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'),
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..fc02e4f
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Login"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Register.vue b/src/views/Register.vue
new file mode 100644
index 0000000..89f5f40
--- /dev/null
+++ b/src/views/Register.vue
@@ -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>
\ No newline at end of file