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

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>

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

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

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>