From 434f307f1e10b6027877e86814a91de0518eb286 Mon Sep 17 00:00:00 2001
From: Troplo <troplo@flowinity.com>
Date: Thu, 8 Apr 2021 22:20:12 +1000
Subject: [PATCH] Merge

---
 src/App.vue                   |   51 +-
 src/components/Footer.vue     |  236 +++++---
 src/components/Navbar.vue     | 1021 +++++++++++++++++----------------
 src/router/index.js           |   11 +
 src/views/Home.vue            |  114 ++--
 src/views/Settings.vue        |   60 ++
 src/views/SettingsAbout.vue   |   24 +
 src/views/SettingsAccount.vue |   11 +
 src/views/SettingsGeneral.vue |  135 +++++
 9 files changed, 998 insertions(+), 665 deletions(-)
 create mode 100644 src/views/Settings.vue
 create mode 100644 src/views/SettingsAbout.vue
 create mode 100644 src/views/SettingsAccount.vue
 create mode 100644 src/views/SettingsGeneral.vue

diff --git a/src/App.vue b/src/App.vue
index 8152c64..9b8e771 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,9 +7,7 @@
     <Footer />
   </div>
 </template>
-<style>
-@import './assets/css/kaverti.css';
-</style>
+
 <script>
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
@@ -42,31 +40,31 @@ export default {
       });
     }
     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);
-      })
-      .catch(() => {
-        this.$buefy.snackbar.open({
-          message: this.$t("errors.down"),
-          type: "is-warning",
+        .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);
+        })
+        .catch(() => {
+          this.$buefy.snackbar.open({
+            message: this.$t("errors.down"),
+            type: "is-warning",
+          });
         });
-      });
     this.axios.get(
-      process.env.VUE_APP_APIENDPOINT +
+        process.env.VUE_APP_APIENDPOINT +
         process.env.VUE_APP_APIVERSION +
         "/" +
         "awards/eligibility"
@@ -81,5 +79,6 @@ export default {
 </style>
 
 <style lang="css">
+@import './assets/css/kaverti.css';
 @import "https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css";
 </style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 9e6c5b5..3b3ae77 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -4,11 +4,12 @@
       <form>
         <div class="modal-card" style="width: auto">
           <header class="modal-card-head">
-            <p class="modal-card-title">{{ $t('feedback.title') }}</p>
+            <p class="modal-card-title">{{ $t("feedback.title") }}</p>
             <button
                 type="button"
                 class="delete"
-                @click="feedbackModal = false"/>
+                @click="feedbackModal = false"
+            />
           </header>
           <section class="modal-card-body">
             <p>This feedback will be used to make Kaverti better.</p>
@@ -16,18 +17,24 @@
               <b-input
                   :placeholder="$store.state.user.email"
                   v-model="feedback.email"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
             <b-field :label="$t('feedback.route')">
               <b-input
                   :placeholder="$t('feedback.route')"
                   v-model="feedback.route"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
             <b-field :label="$t('feedback.rating')">
-              <b-rate icon-pack="fas" v-model="feedback.stars" custom-text="Route rating"></b-rate>
+              <b-rate
+                  icon-pack="fas"
+                  v-model="feedback.stars"
+                  custom-text="Route rating"
+              ></b-rate>
             </b-field>
             <b-field :label="$t('feedback.text')">
               <b-input
@@ -35,7 +42,8 @@
                   v-model="feedback.text"
                   maxlength="512"
                   type="textarea"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
           </section>
@@ -44,10 +52,13 @@
                 @click="doFeedback()"
                 :loading="feedback.loading"
                 :label="$t('feedback.submit')"
-                type="is-primary" />
+                type="is-info"
+            ></b-button>
             <b-button
                 :label="$t('close')"
-                @click="feedbackModal = false" />
+                @click="feedbackModal = false"
+                tpe="is-danger"
+            ></b-button>
           </footer>
         </div>
       </form>
@@ -55,132 +66,179 @@
     <b-modal v-model="langModal">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">{{$t('languages.title')}}</p>
-          <button
-              type="button"
+          <p class="modal-card-title">{{ $t("languages.title") }}</p>
+          <b-button
+              type="is-info"
               class="delete"
-              @click="langModal = false"/>
+              @click="langModal = false"
+          ></b-button>
         </header>
         <section class="modal-card-body buttons">
-          <b-button v-if="$i18n.locale !== 'en'" @click="en" class="is-large">{{$t('languages.en')}}</b-button>
-          <b-button v-if="$i18n.locale === 'en'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.en')}}</b-button>
-          <b-button v-if="$i18n.locale === 'wind'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.wind')}}</b-button>
-          <b-button v-if="$i18n.locale === 'debug'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.debug')}}</b-button>
+          <b-button v-if="$i18n.locale !== 'en'" @click="en" class="is-large">{{
+              $t("languages.en")
+            }}</b-button>
+          <b-button
+              v-if="$i18n.locale === 'en'"
+              @click="en"
+              class="is-large is-info disabled"
+              disabled
+          >{{ $t("languages.en") }}</b-button
+          >
+          <b-button
+              v-if="$i18n.locale === 'wind'"
+              @click="en"
+              class="is-large is-info disabled"
+              disabled
+          >{{ $t("languages.wind") }}</b-button
+          >
+          <b-button
+              v-if="$i18n.locale === 'debug'"
+              @click="en"
+              class="is-large is-info disabled"
+              disabled
+          >{{ $t("languages.debug") }}</b-button
+          >
         </section>
       </div>
     </b-modal>
     <h1>&copy; 2021 Kaverti</h1>
     <div class="buttons">
-      <b-button @click="langModal = true">{{$t('languages.title')}}</b-button>
-      <b-button @click="feedbackModal = true">Provide Feedback</b-button>
+      <b-button type="is-info" @click="langModal = true">{{ $t("languages.title") }}</b-button>
+      <b-button type="is-info" @click="feedbackModal = true">Provide Feedback</b-button>
     </div>
   </div>
 </template>
 <script>
-import AjaxErrorHandler from '.././assets/js/errorHandler'
+import AjaxErrorHandler from ".././assets/js/errorHandler";
 export default {
-  name: 'locale-changer',
-  data () {
+  name: "locale-changer",
+  data() {
     return {
       feedbackModal: false,
-      langs: ['en', 'debug', 'wind'],
+      langs: ["en", "debug", "wind"],
       currentLang: this.$i18n.locale,
       langModal: false,
       feedback: {
         route: this.$route.path,
         stars: 0,
-        text: '',
+        text: "",
         email: this.$store.state.user.email,
-        loading: false
-      }
-    }
+        loading: false,
+      },
+    };
   },
   methods: {
     doFeedback() {
-      this.feedback.loading = true
+      this.feedback.loading = true;
       this.axios
-          .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'feedback', {
-            text: this.feedback.text,
-            stars: this.feedback.stars,
-            email: this.feedback.email,
-            route: this.feedback.route
-          })
+          .post(
+              process.env.VUE_APP_APIENDPOINT +
+              process.env.VUE_APP_APIVERSION +
+              "/" +
+              "feedback",
+              {
+                text: this.feedback.text,
+                stars: this.feedback.stars,
+                email: this.feedback.email,
+                route: this.feedback.route,
+              }
+          )
           .then(() => {
-            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
-            this.feedbackModal = false
-            this.$buefy.snackbar.open({message:this.$t('errors.feedbackThanks'), type: 'is-info'})
-            this.feedback.loading = false
-          })
-          .catch(e => {
-            AjaxErrorHandler(this.$store)(e)
-            this.feedback.loading = false
+            this.axios.get(
+                process.env.VUE_APP_APIENDPOINT +
+                process.env.VUE_APP_APIVERSION +
+                "/" +
+                "userinfo"
+            );
+            this.feedbackModal = false;
+            this.$buefy.snackbar.open({
+              message: this.$t("errors.feedbackThanks"),
+              type: "is-info",
+            });
+            this.feedback.loading = false;
           })
+          .catch((e) => {
+            AjaxErrorHandler(this.$store)(e);
+            this.feedback.loading = false;
+          });
     },
-    en () {
-      this.$i18n.locale = "en"
-      this.setLang()
+    en() {
+      this.$i18n.locale = "en";
+      this.setLang();
     },
-    debug () {
-      this.$i18n.locale = "debug"
-      this.setLang()
+    debug() {
+      this.$i18n.locale = "debug";
+      this.setLang();
     },
-    wind () {
-      this.$i18n.locale = "wind"
-      this.setLang()
+    wind() {
+      this.$i18n.locale = "wind";
+      this.setLang();
     },
-    setLang () {
+    setLang() {
       localStorage.setItem("lang", this.$i18n.locale);
-        this.axios
-            .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
-              lang: this.$i18n.locale
-            })
-            .then(() => {
-              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('setDevMode', res.data.developerMode)
-                    this.$store.commit('setTheme', res.data.theme)
-                    this.$store.commit('setLang', res.data.lang)
-                  })
-            })
-            .catch(e => {
-              AjaxErrorHandler(this.$store)(e)
-            })
-    }
+      this.axios
+          .put(
+              process.env.VUE_APP_APIENDPOINT +
+              process.env.VUE_APP_APIVERSION +
+              "/" +
+              "users/preferences",
+              {
+                lang: this.$i18n.locale,
+              }
+          )
+          .then(() => {
+            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("setDevMode", res.data.developerMode);
+                  this.$store.commit("setTheme", res.data.theme);
+                  this.$store.commit("setLang", res.data.lang);
+                });
+          })
+          .catch((e) => {
+            AjaxErrorHandler(this.$store)(e);
+          });
+    },
   },
-  mounted () {
-    if(localStorage.getItem("lang")) {
-      this.$i18n.locale = localStorage.getItem("lang")
+  mounted() {
+    if (localStorage.getItem("lang")) {
+      this.$i18n.locale = localStorage.getItem("lang");
     } else if (this.$store.state.user.lang) {
-      this.$i18n.locale = this.$store.state.user.lang
+      this.$i18n.locale = this.$store.state.user.lang;
     } else {
-      this.$i18n.locale = "en"
+      this.$i18n.locale = "en";
     }
     this.$nextTick(() => {
       this.feedback = {
         route: this.$route.path,
-            stars: 0,
-            text: '',
-            email: this.$store.state.user.email
-      }
-    })
+        stars: 0,
+        text: "",
+        email: this.$store.state.user.email,
+      };
+    });
   },
   watch: {
     $route() {
       this.feedback = {
         route: this.$route.path,
         stars: 0,
-        text: '',
-        email: this.$store.state.user.email
-      }
+        text: "",
+        email: this.$store.state.user.email,
+      };
     },
     currentLang() {
-      this.setLang()
-      console.log('change')
-    }
-  }
-}
+      this.setLang();
+      console.log("change");
+    },
+  },
+};
 </script>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 4149252..f0af266 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,33 +1,42 @@
 <template>
   <nav>
-    <b-modal :active="ajaxErrorModal" @update:active="value => ajaxErrorModal = value" :width="640" scroll="keep" style="z-index:  200">
+    <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')"/>
+          <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>
+          <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" />
+          <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">
+    <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"/>
+            <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')">
@@ -35,10 +44,10 @@
                   :value="login.username"
                   v-model="login.username"
                   :placeholder="$t('login.loginUsername')"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
-
             <b-field :label="$t('login.loginPassword')">
               <b-input
                   type="password"
@@ -46,114 +55,50 @@
                   v-model="login.password"
                   password-reveal
                   :placeholder="$t('login.loginPassword')"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
-            <b-checkbox v-model="login.doNotSaveToken">{{$t('login.doNotSaveAuth')}}</b-checkbox>
+            <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" />
+                type="is-primary"
+            />
+            <b-button :label="$t('close')" @click="loginModal = false" />
             <b-button
-                :label="$t('close')"
-                @click="loginModal = false" />
-            <b-button
-                @click="registerModal = true; loginModal = false"
+                @click="
+ registerModal = true;
+ loginModal = false;
+ "
                 :label="$t('login.register')"
-                type="is-success" />
+                type="is-success"
+            />
           </footer>
         </div>
       </form>
     </b-modal>
-    <b-modal :active="settingsModal" @update:active="value => settingsModal = value" :width="640" scroll="keep">
+    <b-modal
+        :active="updateModal"
+        @update:active="(value) => (updateModal = 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='saveDesc()'
-                  >
-                    {{$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='savePref()'
-                  >
-                    {{$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>
-          <footer class="modal-card-foot">
-            <b-button
-                :label="$t('close')"
-                @click="settingsModal = false" />
-          </footer>
-        </div>
-      </form>
-    </b-modal>
-    <b-modal :active="updateModal" @update:active="value => updateModal = value" :width="640" scroll="keep">
-      <form>
-        <div class="modal-card" style="width: auto">
-          <header class="modal-card-head">
-            <p class="modal-card-title">{{$t('update.title')}}</p>
-            <button
-                type="button"
-                class="delete"
-                @click="updateDismissed"/>
+            <p class="modal-card-title">{{ $t("update.title") }}</p>
+            <button type="button" class="delete" @click="updateDismissed" />
           </header>
           <section class="modal-card-body has-text-centered">
-            <h1 class="subtitle">What's new in {{$store.state.client.clientVersion}}?</h1>
+            <h1 class="subtitle">
+              What's new in {{ $store.state.client.clientVersion }}?
+            </h1>
             <ul>
               <li>404 page on invalid user</li>
               <li>Add early teams page</li>
@@ -168,22 +113,26 @@
             </ul>
           </section>
           <footer class="modal-card-foot">
-            <b-button
-                :label="$t('close')"
-                @click="updateDismissed" />
+            <b-button :label="$t('close')" @click="updateDismissed" />
           </footer>
         </div>
       </form>
     </b-modal>
-    <b-modal :active="registerModal" @update:active="value => registerModal = value" :width="640" scroll="keep">
+    <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>
+            <p class="modal-card-title">{{ $t("register.title") }}</p>
             <button
                 type="button"
                 class="delete"
-                @click="registerModal = false"/>
+                @click="registerModal = false"
+            />
           </header>
           <section class="modal-card-body">
             <b-field :label="$t('register.username')">
@@ -191,7 +140,8 @@
                   :value="register.username"
                   v-model="register.username"
                   :placeholder="$t('register.username')"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
             <b-field :label="$t('register.email')">
@@ -200,7 +150,8 @@
                   :value="register.email"
                   v-model="register.email"
                   :placeholder="$t('register.email')"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
             <b-field :label="$t('register.password')">
@@ -210,7 +161,8 @@
                   v-model="register.password"
                   password-reveal
                   :placeholder="$t('register.password')"
-                  required>
+                  required
+              >
               </b-input>
             </b-field>
             <b-field :label="$t('register.confirm')">
@@ -220,46 +172,68 @@
                   v-model="register.confirm"
                   password-reveal
                   :placeholder="$t('register.confirm')"
-                  required>
+                  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>
+            <b-checkbox v-model="register.agree"
+            >{{ $t("register.agree") }}
+              <router-link @click="registerModal = false" 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" />
+                type="is-primary"
+            />
+            <b-button :label="$t('close')" @click="registerModal = false" />
             <b-button
-                :label="$t('close')"
-                @click="registerModal = false" />
-            <b-button
-                @click="registerModal = false; loginModal = true"
+                @click="
+ registerModal = false;
+ loginModal = true;
+ "
                 :label="$t('register.login')"
-                type="is-success" />
+                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;">
+    <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>
+            <p style="text-align: center">{{ $t("errors.emailVerify") }}</p>
           </div>
         </div>
       </div>
     </section>
-    <section v-if='$store.state.client.clientVersion !== $store.state.client.latestClientVersion && showOutdatedBanner' class="hero is-warning">
-      <div class="hero-body" style="padding: 1rem 1rem !important;">
+    <section
+        v-if="
+ $store.state.client.clientVersion !==
+ $store.state.client.latestClientVersion && showOutdatedBanner
+ "
+        class="hero is-warning"
+    >
+      <div class="hero-body" style="padding: 1rem 1rem !important">
         <div class="mobile-container">
           <div class="container">
-            <p style="text-align: center;">You are using an outdated version of Kaverti, please refresh.<button
+            <p style="text-align: center">
+              You are using an outdated version of Kaverti, please
+              refresh.<button
                 type="button"
                 class="delete"
-                style="float: right;"
-                @click="showOutdatedBanner = false"/></p>
+                style="float: right"
+                @click="showOutdatedBanner = false"
+            />
+            </p>
           </div>
         </div>
       </div>
@@ -267,102 +241,169 @@
     <b-navbar>
       <template #brand>
         <b-navbar-item tag="router-link" :to="{ path: '/' }">
-          <img
-              src="https://cdn.kaverti.com/logo.png"
-              alt="Kaverti Logo"
-          >
+          <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')}}
+          {{ $t("navbar.home") }}
         </b-navbar-item>
         <b-navbar-item tag="router-link" to="/forums">
-          {{$t('navbar.forums')}}
+          {{ $t("navbar.forums") }}
         </b-navbar-item>
         <b-navbar-item tag="router-link" to="/marketplace">
-          {{$t('navbar.marketplace')}}
+          {{ $t("navbar.marketplace") }}
         </b-navbar-item>
         <b-navbar-item tag="router-link" to="/users">
-          {{$t('navbar.users')}}
+          {{ $t("navbar.users") }}
         </b-navbar-item>
         <b-navbar-item tag="router-link" to="/teams">
-          {{$t('navbar.teams')}}
+          {{ $t("navbar.teams") }}
         </b-navbar-item>
         <b-navbar-item tag="router-link" to="/games">
-          {{$t('navbar.games')}}
+          {{ $t("navbar.games") }}
         </b-navbar-item>
-        <div v-if="$store.state.debug" class="navbar-item has-dropdown is-hoverable is-info">
+        <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>
+            <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>
-            <b-navbar-item @click="toggleBrokenRoute(true)">{{$t('navbar.dev.brokenRoute')}}</b-navbar-item>
+            <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>
+            <b-navbar-item @click="toggleBrokenRoute(true)">{{
+                $t("navbar.dev.brokenRoute")
+              }}</b-navbar-item>
           </div>
         </div>
         <div class="navbar-item has-dropdown is-hoverable is-info">
           <a class="navbar-link">
-            <p>{{$t('navbar.more.title')}}</p>
+            <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>
-            <b-navbar-item tag="router-link" to="/blog">{{$t('navbar.more.blog')}}</b-navbar-item>
+            <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>
+            <b-navbar-item tag="router-link" to="/blog">{{
+                $t("navbar.more.blog")
+              }}</b-navbar-item>
           </div>
         </div>
       </template>
-
       <template #end>
-        <b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward(true)">
-          <img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
+        <b-navbar-item
+            v-if="$store.state.user.username && !loading"
+            @click="dailyReward(true)"
+        >
+          <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>
+                <strong>{{ $t("navbar.register") }}</strong>
               </b-button>
               <b-button @click="loginModal = true" class="button is-light">
-                {{$t('navbar.login')}}
+                {{ $t("navbar.login") }}
               </b-button>
             </div>
           </b-navbar-item>
         </div>
-        <b-navbar-dropdown class="is-hoverable" style="padding-right:15px" :label="$store.state.user.username" v-if="$store.state.user.username && !loading">
-          <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="/avatar">{{$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="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
-          <b-navbar-item tag="router-link" to="/friends"><p>{{$t('navbar.user.friends')}}&nbsp;</p><p v-if="friendCount > 0">&nbsp;({{ friendCount }})</p></b-navbar-item>
+        <b-navbar-dropdown
+            class="is-hoverable"
+            style="padding-right: 15px"
+            :label="$store.state.user.username"
+            v-if="$store.state.user.username && !loading"
+        >
+          <b-navbar-item
+              tag="router-link"
+              :to="'/u/' + $store.state.user.username"
+          >{{ $t("navbar.user.profile") }}</b-navbar-item
+          >
+          <b-navbar-item tag="router-link" to="/settings">{{
+              $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="/avatar">{{
+              $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="/admin"
+              v-if="$store.state.user.admin"
+          >{{ $t("navbar.user.admin") }}</b-navbar-item
+          >
+          <b-navbar-item tag="router-link" to="/friends"
+          ><p>{{ $t("navbar.user.friends") }}&nbsp;</p>
+            <p v-if="friendCount > 0">
+              &nbsp;({{ friendCount }})
+            </p></b-navbar-item
+          >
           <div class="dropdown-divider"></div>
-          <b-navbar-item class="has-text-danger" @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
+          <b-navbar-item class="has-text-danger" @click="logout()">{{
+              $t("navbar.user.logout")
+            }}</b-navbar-item>
         </b-navbar-dropdown>
         <b-navbar-item v-if="loading">
           <div class="fa-1x">
-            <i class="fas fa-circle-notch fa-spin"></i>&nbsp;
-            &nbsp;{{ $t('generic.loading') }}
+            <i class="fas fa-circle-notch fa-spin"></i>&nbsp; &nbsp;{{
+              $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;">
+    <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>
+            <p style="text-align: center">
+              {{ $store.state.client.bannerText }}
+              <button
+                  type="button"
+                  class="delete"
+                  style="float: right"
+                  @click="removeBannerId"
+              />
+            </p>
           </div>
         </div>
       </div>
@@ -370,7 +411,7 @@
   </nav>
 </template>
 <script>
-import AjaxErrorHandler from '.././assets/js/errorHandler'
+import AjaxErrorHandler from ".././assets/js/errorHandler";
 import axios from "axios";
 export default {
   data() {
@@ -383,362 +424,356 @@ export default {
       showOutdatedBanner: true,
       friendCount: 0,
       updateModal: false,
-      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: '',
+        username: "",
+        password: "",
         loading: false,
         doNotSaveToken: false,
       },
       register: {
-        username: '',
-        email: '',
-        password: '',
-        confirm: '',
+        username: "",
+        email: "",
+        password: "",
+        confirm: "",
         agree: false,
-        loading: false
-      }
-    }
+        loading: false,
+      },
+    };
   },
   computed: {
     ajaxErrorModal: {
       get() {
-        return this.$store.state.errors.modal
+        return this.$store.state.errors.modal;
       },
       set(val) {
-        this.$store.commit('setAjaxErrorsModalState', val)
-      }
+        this.$store.commit("setAjaxErrorsModalState", val);
+      },
     },
   },
   methods: {
-    toggleBrokenRoute (val) {
-      this.$store.commit('brokenRoute', val)
-    },
-    savePref() {
-      this.preferences.error = ''
-      this.preferences.loading = true
-
-      this.axios
-          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
-            developerMode: this.preferences.developerMode
-          })
-          .then(() => {
-            this.preferences.loading = 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('setDevMode', res.data.developerMode)
-                })
-          })
-          .catch(e => {
-            this.preferences.loading = false
-            AjaxErrorHandler(this.$store)(e)
-          })
-    },
-    saveDesc() {
-      this.description.error = ''
-      this.description.loading = true
-
-      this.axios
-          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
-            description: this.description.value
-          })
-          .then(() => {
-            this.description.loading = false
-          })
-          .catch(e => {
-            this.description.loading = false
-            AjaxErrorHandler(this.$store)(e)
-          })
+    toggleBrokenRoute(val) {
+      this.$store.commit("brokenRoute", val);
     },
     getBannerId() {
-      if(localStorage.getItem(this.$store.state.client.bannerId)) {
-        this.showBanner = false
+      if (localStorage.getItem(this.$store.state.client.bannerId)) {
+        this.showBanner = false;
       } else {
-        this.showBanner = true
+        this.showBanner = true;
       }
     },
     updateDismissed() {
-      localStorage.setItem("update-" + this.$store.state.client.clientVersion, true)
-      this.updateModal = false
+      localStorage.setItem(
+          "update-" + this.$store.state.client.clientVersion,
+          true
+      );
+      this.updateModal = false;
     },
     showUpdate() {
-      if(!localStorage.getItem("update-" + this.$store.state.client.clientVersion)) {
-        this.updateModal = true
+      if (
+          !localStorage.getItem(
+              "update-" + this.$store.state.client.clientVersion
+          )
+      ) {
+        this.updateModal = true;
       } else {
-        this.updateModal = false
+        this.updateModal = false;
       }
     },
     removeBannerId() {
-      localStorage.setItem(this.$store.state.client.bannerId, true)
-      this.$store.state.client.bannerEnabled = false
-      console.log(localStorage.getItem(this.$store.state.client.bannerId))
+      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.registerModal = 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'})
-      }).catch(e => {
-        this.register.loading = false
+      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.registerModal = 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",
+            });
+          })
+          .catch((e) => {
+            this.register.loading = false;
 
-        AjaxErrorHandler(this.$store)(e, (error, errors) => {
-          let path = error.path
+            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)
-          }
-        })
-      })
+              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'})
-        })
+      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
+            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)
-          }
-        })
-      })
+              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'})
-      })
+      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}})
+    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 },
+      });
     },
     dailyReward(notify) {
-      this.axios.get(
-          process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/reward'
-      ).then(res => {
-        this.$store.commit('setKoins', res.data.koins)
-      }).catch(e => {
-        if(notify) {
-          AjaxErrorHandler(this.$store)(e)
-        }
-      })
+      this.axios
+          .get(
+              process.env.VUE_APP_APIENDPOINT +
+              process.env.VUE_APP_APIVERSION +
+              "/" +
+              "users/reward"
+          )
+          .then((res) => {
+            this.$store.commit("setKoins", res.data.koins);
+          })
+          .catch((e) => {
+            if (notify) {
+              AjaxErrorHandler(this.$store)(e);
+            }
+          });
     },
     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)
-          }).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)
-            this.$store.commit('setDescription', res.data.description)
-            this.$store.commit('setExecutive', res.data.executive)
-            this.settings.general.description.value = res.data.description
-            this.loading = false
-          }).catch(() => {
-        this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
-        this.loading = false
-      })
-    }
+      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);
+          })
+          .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);
+            this.$store.commit("setDescription", res.data.description);
+            this.$store.commit("setExecutive", res.data.executive);
+            this.settings.general.description.value = res.data.description;
+            this.loading = false;
+          })
+          .catch(() => {
+            this.$buefy.snackbar.open({
+              message: this.$t("errors.authFail"),
+              type: "is-warning",
+            });
+            this.loading = false;
+          });
+    },
   },
   mounted() {
-    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)
-        }).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)
-          this.$store.commit('setDescription', res.data.description)
-          this.$store.commit('setExecutive', res.data.executive)
-          this.settings.general.description.value = res.data.description
-          this.loading = false
-        }).catch(() => {
-      this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
-      this.loading = false
-      console.log(this.getBannerId())
-    })
+    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);
+        })
+        .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);
+          this.$store.commit("setDescription", res.data.description);
+          this.$store.commit("setExecutive", res.data.executive);
+          this.settings.general.description.value = res.data.description;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.$buefy.snackbar.open({
+            message: this.$t("errors.authFail"),
+            type: "is-warning",
+          });
+          this.loading = false;
+          console.log(this.getBannerId());
+        });
     this.$nextTick(() => {
-      this.dailyReward(false)
-      this.showUpdate()
-      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAllPendingCanAccept')
-          .then(res => {
-            this.friendCount = res.data.count
-          })
-    })
-  }
-}
+      this.dailyReward(false);
+      this.showUpdate();
+      this.axios
+          .get(
+              process.env.VUE_APP_APIENDPOINT +
+              process.env.VUE_APP_APIVERSION +
+              "/" +
+              "relationships/getAllPendingCanAccept"
+          )
+          .then((res) => {
+            this.friendCount = res.data.count;
+          });
+    });
+  },
+};
 </script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d846ce7..2e6b2aa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -171,11 +171,22 @@ const routes = [{
     {
         path: '/admin',
         component: route('Admin'),
+        redirect: "/admin/dashboard",
         children: [
             { path: 'dashboard', component: route('AdminDashboard') },
             { path: 'item', component: route('AdminCreateItem') },
         ]
     },
+    {
+        path: '/settings',
+        component: route('Settings'),
+        redirect: "/settings/general",
+        children: [
+            { path: 'general', component: route('SettingsGeneral') },
+            { path: 'account', component: route('SettingsAccount') },
+            { path: 'about', component: route('SettingsAbout') },
+        ]
+    },
     {
         path: '*',
         name: '404',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a6da50f..1c29fa6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,73 +1,73 @@
 <template>
   <div id="home">
     <section class="section" v-if="$store.state.user.username">
-	<div class="container">
-      <div class="columns is-centered">
-        <div class="column is-4">
-          <div class="box">
-            <div class="title">
-              {{ $store.state.user.username }}
-            </div>
-            <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" alt="Avatar" width="50%">
-          </div>
-          <div class="title">
-            {{ $t('home.news') }}
-          </div>
-          <div v-if="blogs.length">
-            <div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
-              <div class="subtitle">
-                {{ blog.name }}
-              </div>
-              <p>{{ blog.plainText }}</p>
-            </div>
-          </div>
-          <div v-else>
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-4">
             <div class="box">
-              <NoItems type="blog posts"></NoItems>
+              <div class="title">
+                {{ $store.state.user.username }}
+              </div>
+              <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" alt="Avatar" class="is-centered" width="50%">
             </div>
-          </div>
-        </div>
-        <div class="column is-7" v-if="!loading">
-          <div class="box">
             <div class="title">
-              {{ $t('home.globalWall') }}
+              {{ $t('home.news') }}
             </div>
-            <b-input type="textarea" maxlength="256" placeholder="How's it going?" v-model="wallText"></b-input>
-            <b-tag type="is-info" class="is-pulled-right">
-              Markdown is no longer available on wall posts.
-            </b-tag>
-            <b-button type="is-info" ckass="is-pulled-left" :loading="loadingWallButton" @click="postWall">Post</b-button>
-          </div>
-          <hr>
-          <div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
-            <article class="media">
-              <figure class="media-left">
-                <figure class="image is-64x64 is-rounded">
-                  <img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'" alt="Avatar" class="is-rounded">
-                </figure>
-              </figure>
-              <div class="media-content">
-                <div class="content">
-                  <p>
-                    <strong>{{ post.fromUser.username }}</strong>&nbsp;
-                    <small>{{ post.createdAt | formatDate() }}</small>
-                    <br>
-                    {{ post.plainText }}
-                  </p>
+            <div v-if="blogs.length">
+              <div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
+                <div class="subtitle">
+                  {{ blog.name }}
                 </div>
+                <p>{{ blog.plainText }}</p>
               </div>
-              <div class="media-right">
-                <b-tooltip label="Delete" v-if="$store.state.user.admin">
-                  <b-button class="delete"></b-button>
-                </b-tooltip>
+            </div>
+            <div v-else>
+              <div class="box">
+                <NoItems type="blog posts"></NoItems>
               </div>
-            </article>
+            </div>
+          </div>
+          <div class="column is-7" v-if="!loading">
+            <div class="box">
+              <div class="title">
+                {{ $t('home.globalWall') }}
+              </div>
+              <b-input type="textarea" maxlength="256" placeholder="How's it going?" v-model="wallText"></b-input>
+              <b-tag type="is-info" class="is-pulled-right">
+                Markdown is no longer available on wall posts.
+              </b-tag>
+              <b-button type="is-info" ckass="is-pulled-left" :loading="loadingWallButton" @click="postWall">Post</b-button>
+            </div>
+            <hr>
+            <div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
+              <article class="media">
+                <figure class="media-left">
+                  <figure class="image is-64x64 is-rounded">
+                    <img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'" alt="Avatar" class="is-rounded">
+                  </figure>
+                </figure>
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>{{ post.fromUser.username }}</strong>&nbsp;
+                      <small>{{ post.createdAt | formatDate() }}</small>
+                      <br>
+                      {{ post.plainText }}
+                    </p>
+                  </div>
+                </div>
+                <div class="media-right">
+                  <b-tooltip label="Delete" v-if="$store.state.user.admin">
+                    <b-button class="delete"></b-button>
+                  </b-tooltip>
+                </div>
+              </article>
+            </div>
           </div>
         </div>
       </div>
-	  </div>
     </section>
-    <section class="section hero is-info is-large is-fullheight-with-navbar" v-if="!$store.state.user.username">
+    <section class="hero is-info is-large is-fullheight-with-navbar" v-if="!$store.state.user.username">
       <div class="hero-body">
         <div class="container has-text-centered">
           <div class="title">
@@ -253,4 +253,4 @@ export default {
     this.getWall(true)
   }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..91277a6
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="settings">
+    <section class="section">
+      <div class="container" v-if="$store.state.user.username">
+        <div class="columns is-centered">
+          <div class="column is-3">
+            <b-menu>
+              <b-menu-list label="Settings">
+                <b-menu-item
+                  :label="menuItem.name"
+                  v-for="(menuItem, $index) in menuItems"
+                  :key="'settings-link-' + $index"
+                  tag="router-link"
+                  :to="'/settings/' + menuItem.route"
+                ></b-menu-item>
+              </b-menu-list>
+            </b-menu>
+          </div>
+          <div class="column is-7">
+            <router-view></router-view>
+          </div>
+        </div>
+      </div>
+      <div class="container" v-else>
+        <div class="columns is-centered">
+          <div class="column is-5">
+            <div class="box has-text-centered">
+              <i class="far fa-times-square large-icon"></i>
+              <div class="subtitle">{{ $t("generic.notLoggedIn") }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Settings",
+  data() {
+    return {
+      menuItems: [
+        {
+          name: "General",
+          route: "general",
+        },
+        {
+          name: "Account",
+          route: "account",
+        },
+        {
+          name: "About",
+          route: "about",
+        },
+      ],
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/SettingsAbout.vue b/src/views/SettingsAbout.vue
new file mode 100644
index 0000000..41cd13c
--- /dev/null
+++ b/src/views/SettingsAbout.vue
@@ -0,0 +1,24 @@
+<template>
+  <div id="settings-about">
+    <div class="box">
+      <div class="title">About</div>
+      <hr />
+      <div class="has-text-centered">
+        <img src="https://cdn.kaverti.com/icon.png" width="10%" />
+        <p>Kaverti v{{ this.$store.state.client.clientVersion }}</p>
+        <p>
+          Latest Client Version: v{{
+            this.$store.state.client.latestClientVersion
+          }}
+        </p>
+        <p>API Version: v{{ this.$store.state.client.latestAPIVersion }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SettingsAbout",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/SettingsAccount.vue b/src/views/SettingsAccount.vue
new file mode 100644
index 0000000..0603e96
--- /dev/null
+++ b/src/views/SettingsAccount.vue
@@ -0,0 +1,11 @@
+<template>
+    <div id="settings-account">
+        
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SettingsAccount"
+}
+</script>
\ No newline at end of file
diff --git a/src/views/SettingsGeneral.vue b/src/views/SettingsGeneral.vue
new file mode 100644
index 0000000..0dc8c49
--- /dev/null
+++ b/src/views/SettingsGeneral.vue
@@ -0,0 +1,135 @@
+<template>
+  <div id="settings-general">
+    <div class="box">
+      <div class="title">{{ $t("settings.general.title") }}</div>
+      <hr />
+      <div class="subtitle">{{ $t("settings.general.about") }}</div>
+      <form @submit.prevent="saveDesc">
+        <b-field :label="$t('settings.general.description')">
+          <b-input
+            type="textarea"
+            :placeholder="
+              $t('settings.general.hi') + ' ' + $store.state.user.username
+            "
+            maxlength="256"
+            v-model="settings.description.value"
+            :error="settings.description.error"
+          ></b-input>
+        </b-field>
+        <b-button
+          type="is-info"
+          :loading="settings.description.loading"
+          @click="saveDescription"
+        >
+          {{ $t("settings.general.saveDesc") }}
+        </b-button>
+      </form>
+      <form @submit.prevent="savePref">
+        <b-field label="Developer Mode">
+          <b-switch
+            type="is-info"
+            true-value="true"
+            false-value="false"
+            v-model="settings.preferences.developerMode"
+          >{{ settings.preferences.developerMode }}</b-switch>
+        </b-field>
+        <b-button
+          type="is-info"
+          :loading="settings.preferences.loading"
+          @click="savepreferences"
+        >
+          {{ $t("settings.general.savePref") }}
+        </b-button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SettingsGeneral",
+  data() {
+    return {
+      settings: {
+        description: {
+          value: this.$store.state.user.description,
+          loading: false,
+          error: "",
+        },
+        preferences: {
+          developerMode: this.$store.state.user.developerMode,
+          loading: false,
+          error: "",
+        },
+      },
+    };
+  },
+  methods: {
+    clearErrors() {
+      this.settings.description.error = "";
+      this.settings.preferences.error = "";
+    },
+    changesSaved() {
+      this.$buefy.snackbar.open({
+        duration: 5000,
+        message: "Changes saved.",
+        type: "is-success",
+        position: "is-bottom-left",
+        actionText: "Ok",
+        queue: false,
+      });
+    },
+    saveDescription() {
+      this.clearErrors();
+      this.settings.description.loading = true;
+      this.axios
+        .put(
+          process.env.VUE_APP_APIENDPOINT +
+            process.env.VUE_APP_APIVERSION +
+            "/users/preferences",
+          {
+            description: this.settings.description.value,
+          }
+        )
+        .then(() => {
+          this.settings.description.loading = false;
+          this.changesSaved();
+        })
+        .catch((err) => {
+          this.settings.description.loading = false;
+          AjaxErrorHandler(this.$store)(err);
+        });
+    },
+    savepreferences() {
+      this.clearErrors();
+      this.settings.preferences.loading = true;
+      this.axios
+        .put(
+          process.env.VUE_APP_APIENDPOINT +
+            process.env.VUE_APP_APIVERSION +
+            "/users/preferences",
+          {
+            developerMode: this.settings.preferences.developerMode,
+          }
+        )
+        .then(() => {
+          this.axios
+            .get(
+              process.env.VUE_APP_APIENDPOINT +
+                process.env.VUE_APP_APIVERSION +
+                "/userinfo"
+            )
+            .then((res) => {
+              this.$store.commit("setDevMode", res.data.developerMode);
+            });
+          this.settings.description.loading = false;
+          this.changesSaved();
+        })
+        .catch((err) => {
+          this.settings.preferences.loading = false;
+          AjaxErrorHandler(this.$store)(err);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file