Merge

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";
@@ -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>

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>
+          <p class="modal-card-title">{{ $t("languages.title") }}</p>
-          <button
+          <b-button
-              type="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">{{
-          <b-button v-if="$i18n.locale === 'en'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.en')}}</b-button>
+              $t("languages.en")
-          <b-button v-if="$i18n.locale === 'wind'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.wind')}}</b-button>
+            }}</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 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 type="is-info" @click="langModal = true">{{ $t("languages.title") }}</b-button>
-      <b-button @click="feedbackModal = true">Provide Feedback</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',
+  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', {
+          .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
+                route: this.feedback.route,
-          })
+              }
+          )
           .then(() => {
-            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
+            this.axios.get(
-            this.feedbackModal = false
+                process.env.VUE_APP_APIENDPOINT +
-            this.$buefy.snackbar.open({message:this.$t('errors.feedbackThanks'), type: 'is-info'})
+                process.env.VUE_APP_APIVERSION +
-            this.feedback.loading = false
+                "/" +
-          })
+                "userinfo"
-          .catch(e => {
+            );
-            AjaxErrorHandler(this.$store)(e)
+            this.feedbackModal = false;
-            this.feedback.loading = 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.$i18n.locale = "en";
-      this.setLang()
+      this.setLang();
     },
     debug() {
-      this.$i18n.locale = "debug"
+      this.$i18n.locale = "debug";
-      this.setLang()
+      this.setLang();
     },
     wind() {
-      this.$i18n.locale = "wind"
+      this.$i18n.locale = "wind";
-      this.setLang()
+      this.setLang();
     },
     setLang() {
       localStorage.setItem("lang", this.$i18n.locale);
       this.axios
-            .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
+          .put(
-              lang: this.$i18n.locale
+              process.env.VUE_APP_APIENDPOINT +
-            })
+              process.env.VUE_APP_APIVERSION +
-            .then(() => {
+              "/" +
-              this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
+              "users/preferences",
-                  .then(res => {
+              {
-                    this.$store.commit('setUsername', res.data.username)
+                lang: this.$i18n.locale,
-                    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)
-            })
               }
+          )
+          .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")
+      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: '',
+        text: "",
-            email: this.$store.state.user.email
+        email: this.$store.state.user.email,
-      }
+      };
-    })
+    });
   },
   watch: {
     $route() {
       this.feedback = {
         route: this.$route.path,
         stars: 0,
-        text: '',
+        text: "",
-        email: this.$store.state.user.email
+        email: this.$store.state.user.email,
-      }
+      };
     },
     currentLang() {
-      this.setLang()
+      this.setLang();
-      console.log('change')
+      console.log("change");
-    }
+    },
-  }
+  },
-}
+};
 </script>

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',

src/views/Home.vue

@@ -8,7 +8,7 @@
               <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%">
+              <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" alt="Avatar" class="is-centered" width="50%">
             </div>
             <div class="title">
               {{ $t('home.news') }}
@@ -67,7 +67,7 @@
         </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">

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>

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>

src/views/SettingsAccount.vue

@@ -0,0 +1,11 @@
+<template>
+    <div id="settings-account">
+        
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SettingsAccount"
+}
+</script>

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>