fix and friends

src/App.vue

@@ -23,8 +23,8 @@ export default {
     const jwt = localStorage.getItem("token");
     const wind = localStorage.getItem("wind404");
 
-    if (token) {
+    if (jwt) {
-      this.$store.commit("setToken", token);
+      this.$store.commit("setToken", jwt);
     }
 
     if (wind) {
@@ -33,6 +33,10 @@ export default {
       this.$store.commit("setWind", wind);
     }
 
+    Object.assign(axios.defaults, {
+      headers: { Authorization: this.$store.state.user.token },
+    });
+
     if (this.$store.state.debug) {
       this.$buefy.snackbar.open({
         message: this.$t("errors.devBuild"),

src/main.js

@@ -29,10 +29,6 @@ Vue.use(VMdEditor);
 Vue.use(VueAxios, axios);
 Vue.use(Buefy);
 
-// Axios Headers
-const jwtToken = localStorage.getItem("token");
-axios.defaults.headers.common["Authorization"] = jwtToken;
-
 Vue.config.productionTip = false;
 Vue.prototype.$snackbar = Snackbar;
 

src/router/index.js

@@ -183,7 +183,7 @@ const routes = [{
         redirect: "/settings/general",
         children: [
             { path: 'general', component: route('SettingsGeneral') },
-            { path: 'account', component: route('SettingsAccount') },
+            { path: 'security', component: route('SettingsSecurity') },
             { path: 'about', component: route('SettingsAbout') },
         ]
     },

src/views/Debug.vue

@@ -1,37 +1,72 @@
 <template>
-  <main>
+  <div id="debug">
-    <div class="column">
+    <section class="section">
-      <div class="box">
+      <div class="container" v-if="!$store.state.debug">
-        {{$t('debug.title')}}: {{$store.state.debug}}
+        <div class="columns is-centered">
-        <br>
+          <div class="column">
-        <div v-if="$store.state.debug"> {{$t('debug.authUser')}}: {{$store.state.user.username}}<br>
+            <div class="box">
-          {{$t('debug.userState')}}: {{$store.state.user}}<br>
+              <div class="title">
-          {{$t('debug.state')}}: {{$store.state}}<br>
+                {{ $t("debug.title") }}: {{ store.state.debug }}
-          {{$t('debug.token')}}: {{$store.state.user.token}}
+              </div>
+              <hr>
+              <p>If you'd like to re-enable debug mode refresh.</p>
+            </div>
+          </div>
         </div>
-        <b-button v-if="$store.state.debug" @click="authTest">{{$t('debug.auth')}}</b-button>
-        <b-button v-if="$store.state.debug" @click="turnOffDebug">{{$t('debug.disable')}}</b-button>
       </div>
-    </div>
+      <div class="container" v-else>
-  </main>
+        <div class="columns is-centered">
+          <div class="column is-7">
+            <div class="box">
+              <div class="title">
+                {{ $t("debug.title") }}: {{ $store.state.debug }}
+              </div>
+              <hr />
+              {{ $t("debug.authUser") }}: {{ $store.state.user.username }}<br />
+              {{ $t("debug.userState") }}: {{ $store.state.user }}<br />
+              {{ $t("debug.state") }}: {{ $store.state }}<br />
+              {{ $t("debug.token") }}: {{ $store.state.user.token }}
+            </div>
+            <b-button v-if="$store.state.debug" @click="authTest">{{
+              $t("debug.auth")
+            }}</b-button>
+            <b-button v-if="$store.state.debug" @click="turnOffDebug">{{
+              $t("debug.disable")
+            }}</b-button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
 export default {
   name: "Debug",
   methods: {
-    turnOffDebug () {
+    turnOffDebug() {
-      this.$store.commit('turnOffDebug')
+      this.$store.commit("turnOffDebug");
-      this.$buefy.snackbar.open({message:this.$t('errors.disableDebug'), type: 'is-warning'})
+      this.$buefy.snackbar.open({
+        message: this.$t("errors.disableDebug"),
+        type: "is-warning",
+      });
     },
-    authTest () {
+    authTest() {
-      this.axios.get('/api/v1/userinfo/auth'
+      this.axios
-      ).then(() => {
+        .get("/api/v1/userinfo/auth")
-        this.$buefy.snackbar.open({message:this.$t('errors.authSuccess'), type: 'is-warning'})
+        .then(() => {
-      }).catch(() => {
+          this.$buefy.snackbar.open({
-        this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
+            message: this.$t("errors.authSuccess"),
-      })
+            type: "is-warning",
-    }
+          });
-  }
+        })
-}
+        .catch(() => {
+          this.$buefy.snackbar.open({
+            message: this.$t("errors.authFail"),
+            type: "is-warning",
+          });
+        });
+    },
+  },
+};
 </script>

src/views/Friends.vue

@@ -1,54 +1,51 @@
 <template>
-  <main>
+  <div id="friends">
-    <div class="section">
+    <section class="section">
-      <h1 class="title has-text-centered">{{name}} ({{count}})</h1>
+      <div class="columns is-centered">
-      <div class="tabs is-centered">
+        <div class="column is-7 has-text-centered">
-        <ul>
+          <div class="title">{{ name }} ({{ count }})</div>
-          <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
+          <div class="tabs is-centered">
-          <router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
+            <ul>
-          <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
+              <router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a>
-        </ul>
+              </router-link>
-      </div>
+              <router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
-      <div class="columns is-multiline" v-if="friends.length && !loading">
+              <router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
-        <div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
+            </ul>
-          <h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
+          </div>
-          <div class="box">
+          <div class="columns is-multiline" v-if="friends.length && !loading">
-            <img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
+            <div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
-            <div class="buttons">
+              <h1 class="title has-text-centered">{{ friend.friend2.username }}</h1>
-              <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
+              <div class="box">
-              <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
+                <img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'" alt="Avatar"><br>
-              <b-button @click="doRelationshipAccept(friend)" class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
+                <div class="buttons">
-              <b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
+                  <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center"
+                            v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request
+                  </b-button>
+                  <b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center"
+                            v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend
+                    Request
+                  </b-button>
+                  <b-button @click="doRelationshipAccept(friend)"
+                            class="is-success has-text-centered is-centered is-center"
+                            v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend
+                    Request
+                  </b-button>
+                  <b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center"
+                            v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend
+                  </b-button>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="section" v-if="!friends.length && !loading">
+    </section>
-        <NoItems type="friends"></NoItems>
+  </div>
-      </div>
-      <div class="section columns" v-if="loading">
-        <div class="column">
-          <div class="box">
-            <b-skeleton></b-skeleton>
-          </div>
-        </div>
-        <div class="column">
-          <div class="box">
-            <b-skeleton></b-skeleton>
-          </div>
-        </div>
-        <div class="column">
-          <div class="box">
-            <b-skeleton></b-skeleton>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
 </template>
 <script>
 import AjaxErrorHandler from ".././assets/js/errorHandler";
 import NoItems from "../components/NoItems"
+
 export default {
   name: 'Friends',
   components: {
@@ -64,82 +61,86 @@ export default {
     }
   },
   watch: {
-    $route () {
+    $route() {
-      this.loading = true
+      this.loading = true;
-      this.friends = []
+      this.friends = [];
-      this.offset = 0
+      this.offset = 0;
-      this.category = this.$route.params.category
+      this.category = this.$route.params.category;
-      if(this.category === 'pendingCanAccept') {
+      if (this.category === 'pendingCanAccept') {
-        this.name = "Requests to you"
+        this.name = "Requests to you";
-      } else if(this.category === 'pending') {
+      } else if (this.category === 'pending') {
-        this.name = "Requests from you"
+        this.name = "Requests from you";
-      } else if(this.category === 'accepted') {
+      } else if (this.category === 'accepted') {
-        this.name = "Accepted Requests"
+        this.name = "Accepted Requests";
       } else {
-        this.name = "Unknown"
+        this.name = "Unknown";
       }
-      this.getItems()
+      this.getItems();
     }
   },
   methods: {
-    removeFriend (user) {
+    removeFriend(user) {
       this.axios
           .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
             friend: user.friend2.username
           })
           .then(() => {
-            this.getItems()
+            this.getItems();
           })
           .catch(e => {
-            this.getItems()
+            this.getItems();
 
-            AjaxErrorHandler(this.$store)(e)
+            AjaxErrorHandler(this.$store)(e);
-          })
+          });
     },
-    doRelationshipAccept (user) {
+    doRelationshipAccept(user) {
       this.axios
           .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
             friend: user.friend2.username
           })
           .then(() => {
-            this.getItems()
+            this.getItems();
           })
           .catch(e => {
-            this.getItems()
+            this.getItems();
 
-            AjaxErrorHandler(this.$store)(e)
+            AjaxErrorHandler(this.$store)(e);
-          })
+          });
     },
-    getItems () {
+    getItems() {
-      this.loading = true
+      this.loading = true;
       this.axios
           .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAll/' + this.category)
           .then(res => {
-            this.friends = res.data.rows
+            this.friends = res.data.rows;
-            this.count = res.data.count
+            this.count = res.data.count;
-            this.loading = false
+            this.loading = false;
           })
           .catch((e) => {
-            this.loading = false
+            this.loading = false;
-            AjaxErrorHandler(this.$store)(e)
+
+            AjaxErrorHandler(this.$store)(e);
           })
     },
   },
   mounted() {
-    this.loading = true
+    if (this.$store.state.user.username) {
-    this.friends = []
+      this.loading = true;
-    this.offset = 0
+      this.friends = [];
-    this.category = this.$route.params.category
+      this.offset = 0;
-    if(this.category === 'pendingCanAccept') {
+      this.category = this.$route.params.category;
-      this.name = "Requests to you"
+      if (this.category === 'pendingCanAccept') {
-    } else if(this.category === 'pending') {
+        this.name = "Requests to you";
-      this.name = "Requests from you"
+      } else if (this.category === 'pending') {
-    } else if(this.category === 'accepted') {
+        this.name = "Requests from you";
-      this.name = "Accepted Requests"
+      } else if (this.category === 'accepted') {
-    } else {
+        this.name = "Accepted Requests";
-      this.name = "Unknown"
+      } else {
+        this.name = "Unknown";
+      }
+
+      this.getItems();
     }
-    this.getItems()
   }
 }
 </script>

src/views/Home.vue

@@ -8,13 +8,22 @@
               <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%">
+              <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') }}
+              {{ $t("home.news") }}
             </div>
             <div v-if="blogs.length">
-              <div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
+              <div class="box" v-for="blog in blogs" :key="'blog-' + blog.id">
                 <div class="subtitle">
                   {{ blog.name }}
                 </div>
@@ -30,28 +39,52 @@
           <div class="column is-8" v-if="!loading">
             <div class="box">
               <div class="title">
-                {{ $t('home.globalWall') }}
+                {{ $t("home.globalWall") }}
               </div>
-              <b-input type="textarea" maxlength="256" placeholder="How's it going?" v-model="wallText"></b-input>
+              <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>
+              <b-button
+                type="is-info"
+                ckass="is-pulled-left"
+                :loading="loadingWallButton"
+                @click="postWall"
+                >Post</b-button
+              >
             </div>
-            <hr>
+            <hr />
-            <div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
+            <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">
+                    <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;
+                      <strong>{{ post.fromUser.username }}</strong
+                      >&nbsp;
                       <small>{{ post.createdAt | formatDate() }}</small>
-                      <br>
+                      <br />
                       {{ post.plainText }}
                     </p>
                   </div>
@@ -67,105 +100,24 @@
         </div>
       </div>
     </section>
-    <section class="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">
+          <div class="title">Kaverti</div>
-            Kaverti
-          </div>
           <div class="subtitle">
-            Kaverti is a new 3D sandbox gaming platform, and avatar social website.
+            Kaverti is a new 3D sandbox gaming platform, and avatar social
-            <br>
+            website.
+            <br />
             Kaverti is home to hundreds of users who enjoy using it
-            <br>
+            <br />
             So why not sign up today!
           </div>
         </div>
       </div>
     </section>
-    <section class="section hero is-white is-medium" v-if="!$store.state.user.username">
-      <div class="hero-body">
-        <div class="container has-text-centered">
-          <div class="title">
-            Statistics
-          </div>
-          <div class="columns is-centered">
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.users') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ users }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.users') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ users }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.posts') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ posts }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.users') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ users }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.purchased') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ inventory }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.items') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ items }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.teams') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ teams }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-            <div class="column has-text-centered">
-              <div class="title">{{ $t('stats.threads') }}</div>
-              <div class="box">
-                <div class="title" v-if="!loading">
-                  {{ threads }}
-                </div>
-                <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
   </div>
 </template>
 
@@ -174,83 +126,86 @@ import NoItems from "@/components/NoItems";
 import AjaxErrorHandler from ".././assets/js/errorHandler";
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
-    NoItems
+    NoItems,
   },
   data() {
     return {
       blogs: [],
       wallOffset: 0,
       wallPosts: [],
-      wallText: '',
+      wallText: "",
-      mentions: '',
+      mentions: "",
       loadingWallButton: false,
       loadingWall: true,
-      users: 0,
+    };
-      posts: 0,
-      inventory: 0,
-      teams: 0,
-      threads: 0,
-      items: 0,
-      loading: false
-    }
   },
   methods: {
     postWall() {
-      this.loadingWallButton = true
+      this.loadingWallButton = true;
 
-      this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `wall/post`, {
+      this.axios
-        username: "GlobalWall",
+        .post(
-        content: this.wallText
+          process.env.VUE_APP_APIENDPOINT +
-      }).then(() => {
+            process.env.VUE_APP_APIVERSION +
-        this.loadingWallButton = false
+            `/` +
-        this.getWall(true)
+            `wall/post`,
-      }).catch(e => {
+          {
-        this.loadingWallButton = false
+            username: "GlobalWall",
-        AjaxErrorHandler(this.$store)(e)
+            content: this.wallText,
-      })
+          }
+        )
+        .then(() => {
+          this.loadingWallButton = false;
+          this.getWall(true);
+        })
+        .catch((e) => {
+          this.loadingWallButton = false;
+          AjaxErrorHandler(this.$store)(e);
+        });
     },
     getWall(initial) {
-      this.loadingWall = true
+      this.loadingWall = true;
-      if(initial) {
+      if (initial) {
-        this.wallOffset = 0
+        this.wallOffset = 0;
       }
       this.axios
-          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/GlobalWall?wall=true&offset=` + this.wallOffset)
+        .get(
-          .then(res => {
+          process.env.VUE_APP_APIENDPOINT +
-            this.loadingPosts = false
+            process.env.VUE_APP_APIVERSION +
-            this.loadingWall = false
+            `/` +
-            if(initial) {
+            `user/GlobalWall?wall=true&offset=` +
-              this.wallPosts = res.data.userWalls
+            this.wallOffset
-            } else {
+        )
-              this.wallPosts.push(...res.data.userWalls)
+        .then((res) => {
-            }
+          this.loadingPosts = false;
-          })
+          this.loadingWall = false;
-    }
+          if (initial) {
+            this.wallPosts = res.data.userWalls;
+          } else {
+            this.wallPosts.push(...res.data.userWalls);
+          }
+        });
+    },
   },
   mounted() {
-    this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/stats')
+    if (this.$store.state.user.username) {
-        .then(res => {
+      this.axios
-          this.users = res.data.users
+        .get(
-          this.posts = res.data.posts
+          process.env.VUE_APP_APIENDPOINT +
-          this.inventory = res.data.inventory
+            process.env.VUE_APP_APIVERSION +
-          this.items = res.data.items
+            `/` +
-          this.teams = res.data.teams
+            `blog/posts`
-          this.threads = res.data.threads
+        )
-          this.loading = false
+        .then((res) => {
-        }).catch(() => {
+          this.blogs = res.data;
-      this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
-    })
-    this.axios
-        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `blog/posts`)
-        .then(res => {
-          this.blogs = res.data
         })
-        .catch(e => {
+        .catch((e) => {
-          AjaxErrorHandler(this.$store)(e)
+          AjaxErrorHandler(this.$store)(e);
-        })
+        });
-    this.getWall(true)
+      this.getWall(true);
-  }
+    }
-}
+  },
+};
 </script>

src/views/Settings.vue

@@ -46,8 +46,8 @@ export default {
           route: "general",
         },
         {
-          name: "Account",
+          name: "Security",
-          route: "account",
+          route: "security",
         },
         {
           name: "About",

src/views/SettingsAbout.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="settings-about">
     <div class="box">
-      <div class="title">About</div>
+      <div class="title">{{ $t("settings.about.title") }}</div>
       <hr />
       <div class="has-text-centered">
-        <img src="https://cdn.kaverti.com/icon.png" width="10%" />
+        <img src="https://cdn.kaverti.com/icon.png" alt="Logo" width="10%" />
         <p>Kaverti v{{ this.$store.state.client.clientVersion }}</p>
         <p>
           Latest Client Version: v{{

src/views/SettingsAccount.vue

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

src/views/SettingsSecurity.vue

@@ -0,0 +1,15 @@
+<template>
+    <div id="settings-account">
+        <div class="box">
+          <div class="title">{{ $t("settings.security.title") }}</div>
+          <hr>
+          <p>We're still working on this mate.</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SettingsAccount"
+}
+</script>