From 73fca4ff515f45be874555a52b18d99a97d511a1 Mon Sep 17 00:00:00 2001
From: Bytetrex <y.kniaziev@protonmail.com>
Date: Fri, 9 Apr 2021 14:01:28 +0800
Subject: [PATCH] muhahahhaa

---
 src/App.vue                |  42 +-
 src/assets/css/kaverti.css |   6 +-
 src/components/Navbar.vue  | 816 ++++++++++++++++++-------------------
 src/main.js                | 117 +++---
 src/views/Forums.vue       |   4 +-
 src/views/Home.vue         |   2 +-
 src/views/Settings.vue     |   4 +-
 src/views/Teams.vue        |   7 +-
 src/views/Transaction.vue  | 247 ++++++-----
 src/views/User.vue         |   4 +-
 src/views/Users.vue        |   7 +-
 11 files changed, 647 insertions(+), 609 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9b8e771..7e4cd28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,28 +20,30 @@ export default {
     Footer,
   },
   mounted() {
-    if (JSON.parse(localStorage.getItem("token"))) {
-      this.$store.commit("setToken", JSON.parse(localStorage.getItem("token")));
+    const jwt = localStorage.getItem("token");
+    const wind = localStorage.getItem("wind404");
+
+    if (token) {
+      this.$store.commit("setToken", token);
     }
-    if (JSON.parse(localStorage.getItem("wind404"))) {
-      var wind = JSON.parse(localStorage.getItem("wind404"));
+
+    if (wind) {
+      this.$store.commit("setWind", wind);
     } else {
-      // eslint-disable-next-line no-redeclare
-      var wind = false;
+      this.$store.commit("setWind", wind);
     }
-    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"),
         type: "is-warning",
       });
     }
-    this.axios
+
+    if (this.$store.state.user.username) {
+      this.axios
         .get(
-            process.env.VUE_APP_APIENDPOINT +
+          process.env.VUE_APP_APIENDPOINT +
             process.env.VUE_APP_APIVERSION +
             "/" +
             "userinfo"
@@ -63,12 +65,14 @@ export default {
             type: "is-warning",
           });
         });
-    this.axios.get(
-        process.env.VUE_APP_APIENDPOINT +
-        process.env.VUE_APP_APIVERSION +
-        "/" +
-        "awards/eligibility"
-    );
+
+        this.axios.get(
+          process.env.VUE_APP_APIENDPOINT +
+            process.env.VUE_APP_APIVERSION +
+            "/" +
+            "awards/eligibility"
+        );
+    }
   },
 };
 </script>
@@ -79,6 +83,6 @@ export default {
 </style>
 
 <style lang="css">
-@import './assets/css/kaverti.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/assets/css/kaverti.css b/src/assets/css/kaverti.css
index f6755e1..014f85a 100644
--- a/src/assets/css/kaverti.css
+++ b/src/assets/css/kaverti.css
@@ -5,7 +5,11 @@
 }
 
 main {
-    flex: 1 !important
+    flex: 1 !important;
+}
+
+.container {
+    max-width: 960px !important;
 }
 
 .large-icon {
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index f0af266..179e8a7 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,11 +1,11 @@
 <template>
   <nav>
     <b-modal
-        :active="ajaxErrorModal"
-        @update:active="(value) => (ajaxErrorModal = value)"
-        :width="640"
-        scroll="keep"
-        style="z-index: 200"
+      :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">
@@ -14,9 +14,9 @@
         </header>
         <section class="modal-card-body media">
           <p
-              :key="error"
-              v-for="error in this.$store.state.errors.errors"
-              style="margin: 1rem"
+            :key="error"
+            v-for="error in this.$store.state.errors.errors"
+            style="margin: 1rem"
           >
             {{ error }}
           </p>
@@ -27,10 +27,10 @@
       </div>
     </b-modal>
     <b-modal
-        :active="loginModal"
-        @update:active="(value) => (loginModal = value)"
-        :width="640"
-        scroll="keep"
+      :active="loginModal"
+      @update:active="(value) => (loginModal = value)"
+      :width="640"
+      scroll="keep"
     >
       <form>
         <div class="modal-card" style="width: auto">
@@ -41,53 +41,53 @@
           <section class="modal-card-body">
             <b-field :label="$t('login.loginUsername')">
               <b-input
-                  :value="login.username"
-                  v-model="login.username"
-                  :placeholder="$t('login.loginUsername')"
-                  required
+                :value="login.username"
+                v-model="login.username"
+                :placeholder="$t('login.loginUsername')"
+                required
               >
               </b-input>
             </b-field>
             <b-field :label="$t('login.loginPassword')">
               <b-input
-                  type="password"
-                  :value="login.password"
-                  v-model="login.password"
-                  password-reveal
-                  :placeholder="$t('login.loginPassword')"
-                  required
+                type="password"
+                :value="login.password"
+                v-model="login.password"
+                password-reveal
+                :placeholder="$t('login.loginPassword')"
+                required
               >
               </b-input>
             </b-field>
             <b-checkbox v-model="login.doNotSaveToken">{{
-                $t("login.doNotSaveAuth")
-              }}</b-checkbox>
+              $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"
+              @click="doLogin()"
+              :label="$t('login.login')"
+              :loading="login.loading"
+              type="is-primary"
             />
             <b-button :label="$t('close')" @click="loginModal = false" />
             <b-button
-                @click="
- registerModal = true;
- loginModal = false;
- "
-                :label="$t('login.register')"
-                type="is-success"
+              @click="
+                registerModal = true;
+                loginModal = false;
+              "
+              :label="$t('login.register')"
+              type="is-success"
             />
           </footer>
         </div>
       </form>
     </b-modal>
     <b-modal
-        :active="updateModal"
-        @update:active="(value) => (updateModal = value)"
-        :width="640"
-        scroll="keep"
+      :active="updateModal"
+      @update:active="(value) => (updateModal = value)"
+      :width="640"
+      scroll="keep"
     >
       <form>
         <div class="modal-card" style="width: auto">
@@ -119,93 +119,93 @@
       </form>
     </b-modal>
     <b-modal
-        :active="registerModal"
-        @update:active="(value) => (registerModal = value)"
-        :width="640"
-        scroll="keep"
+      :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>
             <button
-                type="button"
-                class="delete"
-                @click="registerModal = false"
+              type="button"
+              class="delete"
+              @click="registerModal = false"
             />
           </header>
           <section class="modal-card-body">
             <b-field :label="$t('register.username')">
               <b-input
-                  :value="register.username"
-                  v-model="register.username"
-                  :placeholder="$t('register.username')"
-                  required
+                :value="register.username"
+                v-model="register.username"
+                :placeholder="$t('register.username')"
+                required
               >
               </b-input>
             </b-field>
             <b-field :label="$t('register.email')">
               <b-input
-                  type="email"
-                  :value="register.email"
-                  v-model="register.email"
-                  :placeholder="$t('register.email')"
-                  required
+                type="email"
+                :value="register.email"
+                v-model="register.email"
+                :placeholder="$t('register.email')"
+                required
               >
               </b-input>
             </b-field>
             <b-field :label="$t('register.password')">
               <b-input
-                  type="password"
-                  :value="register.password"
-                  v-model="register.password"
-                  password-reveal
-                  :placeholder="$t('register.password')"
-                  required
+                type="password"
+                :value="register.password"
+                v-model="register.password"
+                password-reveal
+                :placeholder="$t('register.password')"
+                required
               >
               </b-input>
             </b-field>
             <b-field :label="$t('register.confirm')">
               <b-input
-                  type="password"
-                  :value="register.confirm"
-                  v-model="register.confirm"
-                  password-reveal
-                  :placeholder="$t('register.confirm')"
-                  required
+                type="password"
+                :value="register.confirm"
+                v-model="register.confirm"
+                password-reveal
+                :placeholder="$t('register.confirm')"
+                required
               >
               </b-input>
             </b-field>
             <b-checkbox v-model="register.agree"
-            >{{ $t("register.agree") }}
+              >{{ $t("register.agree") }}
               <router-link @click="registerModal = false" to="/legal/tos">{{
-                  $t("tos")
-                }}</router-link></b-checkbox
+                $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"
+              @click="doRegister()"
+              :label="$t('register.text')"
+              :loading="register.loading"
+              type="is-primary"
             />
             <b-button :label="$t('close')" @click="registerModal = false" />
             <b-button
-                @click="
- registerModal = false;
- loginModal = true;
- "
-                :label="$t('register.login')"
-                type="is-success"
+              @click="
+                registerModal = false;
+                loginModal = true;
+              "
+              :label="$t('register.login')"
+              type="is-success"
             />
           </footer>
         </div>
       </form>
     </b-modal>
     <section
-        v-if="!$store.state.user.emailVerified && $store.state.user.username"
-        class="hero is-danger"
+      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">
@@ -216,11 +216,11 @@
       </div>
     </section>
     <section
-        v-if="
- $store.state.client.clientVersion !==
- $store.state.client.latestClientVersion && showOutdatedBanner
- "
-        class="hero is-warning"
+      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">
@@ -232,165 +232,147 @@
                 class="delete"
                 style="float: right"
                 @click="showOutdatedBanner = false"
-            />
+              />
             </p>
           </div>
         </div>
       </div>
     </section>
     <b-navbar>
-      <template #brand>
-        <b-navbar-item tag="router-link" :to="{ path: '/' }">
-          <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") }}
-        </b-navbar-item>
-        <b-navbar-item tag="router-link" to="/forums">
-          {{ $t("navbar.forums") }}
-        </b-navbar-item>
-        <b-navbar-item tag="router-link" to="/marketplace">
-          {{ $t("navbar.marketplace") }}
-        </b-navbar-item>
-        <b-navbar-item tag="router-link" to="/users">
-          {{ $t("navbar.users") }}
-        </b-navbar-item>
-        <b-navbar-item tag="router-link" to="/teams">
-          {{ $t("navbar.teams") }}
-        </b-navbar-item>
-        <b-navbar-item tag="router-link" to="/games">
-          {{ $t("navbar.games") }}
-        </b-navbar-item>
-        <div
+        <template #brand>
+          <b-navbar-item tag="router-link" :to="{ path: '/' }">
+            <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") }}
+          </b-navbar-item>
+          <b-navbar-item tag="router-link" to="/forums">
+            {{ $t("navbar.forums") }}
+          </b-navbar-item>
+          <b-navbar-item tag="router-link" to="/marketplace">
+            {{ $t("navbar.marketplace") }}
+          </b-navbar-item>
+          <b-navbar-item tag="router-link" to="/users">
+            {{ $t("navbar.users") }}
+          </b-navbar-item>
+          <b-navbar-item tag="router-link" to="/teams">
+            {{ $t("navbar.teams") }}
+          </b-navbar-item>
+          <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>
-          </a>
-          <div class="navbar-dropdown">
-            <b-navbar-item tag="router-link" to="/debug">{{
+          >
+            <a class="navbar-link">
+              <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()">{{
+              <b-navbar-item @click="fakeUser()">{{
                 $t("navbar.dev.fakeUser")
               }}</b-navbar-item>
-            <b-navbar-item @click="toggleBrokenRoute(true)">{{
+              <b-navbar-item @click="toggleBrokenRoute(true)">{{
                 $t("navbar.dev.brokenRoute")
               }}</b-navbar-item>
+            </div>
           </div>
-        </div>
-        <div class="navbar-item has-dropdown is-hoverable is-info">
-          <a class="navbar-link">
-            <p>{{ $t("navbar.more.title") }}</p>
-          </a>
-          <div class="navbar-dropdown">
-            <b-navbar-item tag="a" href="https://twitter.com/Kaverti">{{
+          <div class="navbar-item has-dropdown is-hoverable is-info">
+            <a class="navbar-link">
+              <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">{{
+              <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">{{
+              <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">{{
+              <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>
-        </div>
-      </template>
-      <template #end>
-        <b-navbar-item
+        </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>
-        <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>
-              </b-button>
-              <b-button @click="loginModal = true" class="button is-light">
-                {{ $t("navbar.login") }}
-              </b-button>
-            </div>
+          >
+            <img src="https://cdn.kaverti.com/icons/koins.svg" />{{
+              $store.state.user.koins
+            }}
           </b-navbar-item>
-        </div>
-        <b-navbar-dropdown
+          <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>
+                </b-button>
+                <b-button @click="loginModal = true" class="button is-light">
+                  {{ $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
+          >
+            <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.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">{{
+            <b-navbar-item tag="router-link" to="/transactions">{{
               $t("navbar.user.transactions")
             }}</b-navbar-item>
-          <b-navbar-item tag="router-link" to="/avatar">{{
+            <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
+            <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.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-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")
-            }}
-          </div>
-        </b-navbar-item>
-      </template>
+          </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")
+              }}
+            </div>
+          </b-navbar-item>
+        </template>
     </b-navbar>
     <section
-        v-if="
- $store.state.client.bannerText &&
- $store.state.client.bannerEnabled &&
- showBanner
- "
-        class="hero is-info"
+      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">
@@ -398,10 +380,10 @@
             <p style="text-align: center">
               {{ $store.state.client.bannerText }}
               <button
-                  type="button"
-                  class="delete"
-                  style="float: right"
-                  @click="removeBannerId"
+                type="button"
+                class="delete"
+                style="float: right"
+                @click="removeBannerId"
               />
             </p>
           </div>
@@ -463,16 +445,16 @@ export default {
     },
     updateDismissed() {
       localStorage.setItem(
-          "update-" + this.$store.state.client.clientVersion,
-          true
+        "update-" + this.$store.state.client.clientVersion,
+        true
       );
       this.updateModal = false;
     },
     showUpdate() {
       if (
-          !localStorage.getItem(
-              "update-" + this.$store.state.client.clientVersion
-          )
+        !localStorage.getItem(
+          "update-" + this.$store.state.client.clientVersion
+        )
       ) {
         this.updateModal = true;
       } else {
@@ -487,118 +469,118 @@ export default {
     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;
-
-            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);
-              }
-            });
+        .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;
+
+            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",
-                  });
-                });
-
-            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);
-              }
-            });
+        .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;
+
+            if (this.errors[path] !== undefined) {
+              this.errors[path] = error.message;
+            } else {
+              errors.push(error.message);
+            }
+          });
+        });
     },
     logout() {
       localStorage.removeItem("token");
@@ -607,36 +589,36 @@ export default {
         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",
-            });
+        .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.`
+        `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 },
@@ -644,79 +626,28 @@ export default {
     },
     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);
-            }
-          });
+        .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;
-          });
-    },
-  },
-  mounted() {
-    Object.assign(axios.defaults, {
-      headers: { Authorization: this.$store.state.user.token },
-    });
-    this.axios
         .get(
-            process.env.VUE_APP_APIENDPOINT +
+          process.env.VUE_APP_APIENDPOINT +
             process.env.VUE_APP_APIVERSION +
             "/" +
             "kaverti/state"
@@ -732,9 +663,9 @@ export default {
             type: "is-info",
           });
         });
-    this.axios
+      this.axios
         .get(
-            process.env.VUE_APP_APIENDPOINT +
+          process.env.VUE_APP_APIENDPOINT +
             process.env.VUE_APP_APIVERSION +
             "/" +
             "userinfo"
@@ -758,21 +689,72 @@ export default {
             type: "is-warning",
           });
           this.loading = false;
-          console.log(this.getBannerId());
         });
+    },
+  },
+  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());
+      });
     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;
-          });
+        .get(
+          process.env.VUE_APP_APIENDPOINT +
+            process.env.VUE_APP_APIVERSION +
+            "/" +
+            "relationships/getAllPendingCanAccept"
+        )
+        .then((res) => {
+          this.friendCount = res.data.count;
+        });
     });
   },
 };
diff --git a/src/main.js b/src/main.js
index 0b6101d..a58f694 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,68 +1,69 @@
-import  Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import Buefy, {Snackbar} from 'buefy'
-import axios from 'axios'
-import VueAxios from 'vue-axios'
-import i18n from './i18n'
-import moment from 'moment'
-import VMdEditor from '@kangc/v-md-editor';
-import '@kangc/v-md-editor/lib/style/base-editor.css';
-import enUS from '@kangc/v-md-editor/lib/lang/en-US';
-import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs';
-import json from 'highlight.js/lib/languages/json';
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import Buefy, { Snackbar } from "buefy";
+import axios from "axios";
+import VueAxios from "vue-axios";
+import i18n from "./i18n";
+import moment from "moment";
+import VMdEditor from "@kangc/v-md-editor";
+import "@kangc/v-md-editor/lib/style/base-editor.css";
+import enUS from "@kangc/v-md-editor/lib/lang/en-US";
+import createHljsTheme from "@kangc/v-md-editor/lib/theme/hljs";
+import json from "highlight.js/lib/languages/json";
 const hljsTheme = createHljsTheme();
-import io from 'socket.io-client'
+import io from "socket.io-client"
 import VueSocketIO from "vue-socket.io";
 import NProgress from "vue-nprogress";
-Vue.use(NProgress)
-const nprogress = new NProgress()
+
+Vue.use(NProgress);
+const nprogress = new NProgress();
 Vue.use(
     new VueSocketIO({
-      debug: true,
-      connection: io(process.env.VUE_APP_GATEWAYENDPOINT), // options object is Optional
+        debug: true,
+        connection: io(process.env.VUE_APP_GATEWAYENDPOINT), // options object is Optional
     })
 );
-Vue.use(VMdEditor)
-VMdEditor.lang.use('en-US', enUS);
+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;
+
+// BBCode Configuration
+VMdEditor.lang.use("en-US", enUS);
 hljsTheme.extend((md, hljs) => {
-  md.set({
-    html:         false,        // Enable HTML tags in source
-    xhtmlOut:     false,        // Use '/' to close single tags (<br />).
-                                // This is only for full CommonMark compatibility.
-    breaks:       true,        // Convert '\n' in paragraphs into <br>
-    langPrefix:   'language-',  // CSS language prefix for fenced blocks. Can be
-                                // useful for external highlighters.
-    linkify:      true,        // Autoconvert URL-like text to links
-    image: false,
-
-    // Enable some language-neutral replacement + quotes beautification
-    typographer:  true,
-
-    // Double + single quotes replacement pairs, when typographer enabled,
-    // and smartquotes on. Could be either a String or an Array.
-    //
-    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
-    // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
-    quotes: '“”‘’'
-  })
-  md.disable('image')
-  hljs.registerLanguage('json', json);
+    md.set({
+        html: false,
+        xhtmlOut: false,
+        breaks: true,
+        langPrefix: "language-",
+        linkify: true,
+        image: false,
+        typographer: true,
+        quotes: "“”‘’"
+    });
+    md.disable("image");
+    hljs.registerLanguage("json", json);
 });
-Vue.use(VueAxios, axios)
-Vue.use(Buefy)
-Vue.config.productionTip = false
-Vue.prototype.$snackbar = Snackbar
-Vue.filter('formatDate', function(value) {
-  if (value) {
-    return moment(String(value)).format('hh:mm A, DD/MM/YYYY')
-  }
-})
+
+// Date Format Configuration
+Vue.filter("formatDate", function(value) {
+    if (value) {
+        return moment(String(value)).format("hh:mm A, DD/MM/YYYY");
+    }
+});
+
 new Vue({
-  nprogress,
-  router,
-  store,
-  i18n,
-  render: h => h(App)
-}).$mount('#app')
+    nprogress,
+    router,
+    store,
+    i18n,
+    render: h => h(App)
+}).$mount("#app");
\ No newline at end of file
diff --git a/src/views/Forums.vue b/src/views/Forums.vue
index 077a803..9fda3fa 100644
--- a/src/views/Forums.vue
+++ b/src/views/Forums.vue
@@ -27,12 +27,12 @@
           >
             <NoItems connection="true"></NoItems>
           </div>
-          <div class="column is-7" v-if="!threads.length && !loadingThreads">
+          <div class="column is-9" v-if="!threads.length && !loadingThreads">
             <div class="box">
               <NoItems type="forum threads"></NoItems>
             </div>
           </div>
-          <div class="column is-7" v-if="threads.length">
+          <div class="column is-9" v-if="threads.length">
             <div class="content">
               <article
                 class="thread_display box"
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1c29fa6..430a844 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -27,7 +27,7 @@
               </div>
             </div>
           </div>
-          <div class="column is-7" v-if="!loading">
+          <div class="column is-8" v-if="!loading">
             <div class="box">
               <div class="title">
                 {{ $t('home.globalWall') }}
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 91277a6..9f4bce5 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -16,14 +16,14 @@
               </b-menu-list>
             </b-menu>
           </div>
-          <div class="column is-7">
+          <div class="column is-9">
             <router-view></router-view>
           </div>
         </div>
       </div>
       <div class="container" v-else>
         <div class="columns is-centered">
-          <div class="column is-5">
+          <div class="column is-6">
             <div class="box has-text-centered">
               <i class="far fa-times-square large-icon"></i>
               <div class="subtitle">{{ $t("generic.notLoggedIn") }}</div>
diff --git a/src/views/Teams.vue b/src/views/Teams.vue
index b8d7776..85bbc2a 100644
--- a/src/views/Teams.vue
+++ b/src/views/Teams.vue
@@ -3,9 +3,10 @@
     <section class="section">
       <div class="container">
         <div class="columns is-centered is-multiline" v-if="!loading">
-          <div v-if="!teams.length" class="column">
-            <br />
-            <NoItems :connection="true" type="users"> </NoItems>
+          <div class="column is-6" v-if="!teams.length">
+            <div class="box">
+              <NoItems :connection="true" type="teams"> </NoItems>
+            </div>
           </div>
           <Pagination
               class="columns is-multiline"
diff --git a/src/views/Transaction.vue b/src/views/Transaction.vue
index c068b6f..4ec8f17 100644
--- a/src/views/Transaction.vue
+++ b/src/views/Transaction.vue
@@ -1,66 +1,98 @@
 <template>
-  <main>
-    <div class="section column">
-      <div class="box">
-        <h1 class="title">Transaction Log</h1>
-        <b-table
-            :detail-key='"log-" + transactions.id'
-            :data="transactions"
-            :paginated="isPaginated"
-            :per-page="perPage"
-            :current-page.sync="currentPage"
-            :pagination-simple="isPaginationSimple"
-            :pagination-position="paginationPosition"
-            :default-sort-direction="defaultSortDirection"
-            :pagination-rounded="isPaginationRounded"
-            :sort-icon="sortIcon"
-            :opened-detailed="defaultOpenedDetails"
-            :sort-icon-size="sortIconSize"
-            default-sort="user.first_name"
-            aria-next-label="Next page"
-            aria-previous-label="Previous page"
-            aria-page-label="Page"
-            aria-current-label="Current page">
+  <div id="transactions">
+    <section class="section">
+      <div class="container" v-if="$store.state.user.username">
+        <div class="columns is-centered">
+          <div class="column is-6">
+            <div class="box">
+              <div class="title">Transaction Log</div>
+              <hr />
+              <NoItems v-if="!transactions.length" type="transactions"></NoItems>
+              <b-table
+                v-else
+                :detail-key="'log-' + transactions.id"
+                :data="transactions"
+                :paginated="isPaginated"
+                :per-page="perPage"
+                :current-page.sync="currentPage"
+                :pagination-simple="isPaginationSimple"
+                :pagination-position="paginationPosition"
+                :default-sort-direction="defaultSortDirection"
+                :pagination-rounded="isPaginationRounded"
+                :sort-icon="sortIcon"
+                :opened-detailed="defaultOpenedDetails"
+                :sort-icon-size="sortIconSize"
+                default-sort="user.first_name"
+                aria-next-label="Next page"
+                aria-previous-label="Previous page"
+                aria-page-label="Page"
+              >
+                <b-table-column
+                  field="props.row.text"
+                  label="Message"
+                  sortable
+                  v-slot="props"
+                >
+                  {{ props.row.text }}
+                </b-table-column>
 
-          <b-table-column field="props.row.text" label="Message" sortable v-slot="props">
-            {{ props.row.text }}
-          </b-table-column>
+                <b-table-column
+                  field="props.row.priceOfPurchase"
+                  label="Price"
+                  sortable
+                  v-slot="props"
+                >
+                  {{ props.row.priceOfPurchase }}
+                </b-table-column>
 
-
-          <b-table-column field="props.row.priceOfPurchase" label="Price" sortable v-slot="props">
-            {{ props.row.priceOfPurchase }}
-          </b-table-column>
-
-          <b-table-column field="props.row.createdAt" label="Date" sortable centered v-slot="props">
-                <span class="tag is-success">
+                <b-table-column
+                  field="props.row.createdAt"
+                  label="Date"
+                  sortable
+                  centered
+                  v-slot="props"
+                >
+                  <span class="tag is-success">
                     {{ new Date(props.row.createdAt).toLocaleDateString() }}
-                </span>
-          </b-table-column>
-        </b-table>
+                  </span>
+                </b-table-column>
+              </b-table>
+            </div>
+          </div>
+        </div>
       </div>
-      <NoItems v-if="!transactions.length" type="transactions"></NoItems>
-    </div>
-  </main>
+      <div class="container" v-else>
+        <div class="columns is-centered">
+          <div class="column is-6">
+            <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>
-import AjaxErrorHandler from '.././assets/js/errorHandler';
-import NoItems from '../components/NoItems'
+import AjaxErrorHandler from ".././assets/js/errorHandler";
+import NoItems from "../components/NoItems";
 export default {
-  name: 'Transactions',
+  name: "Transactions",
   components: {
-    NoItems
+    NoItems,
   },
-  data () {
+  data() {
     return {
-      search: '',
+      search: "",
       transactions: [],
       isPaginated: true,
       isPaginationSimple: false,
       isPaginationRounded: false,
-      paginationPosition: 'bottom',
-      defaultSortDirection: 'desc',
-      sortIcon: 'arrow-up',
-      sortIconSize: 'is-small',
+      paginationPosition: "bottom",
+      defaultSortDirection: "desc",
+      sortIcon: "arrow-up",
+      sortIconSize: "is-small",
       currentPage: 1,
       perPage: 30,
       defaultOpenedDetails: [1],
@@ -71,90 +103,103 @@ export default {
       limit: 15,
       showTeamTab: 0,
       tcreateProd: {
-        username: '',
-        name: '',
+        username: "",
+        name: "",
 
         loading: false,
 
         errors: {
-          username: '',
-          name: ''
-        }
+          username: "",
+          name: "",
+        },
       },
 
       roleOptions: [
-        { name: 'Admins', value: 'admin' },
-        { name: 'transactions', value: 'user' }
+        { name: "Admins", value: "admin" },
+        { name: "transactions", value: "user" },
       ],
-      roleSelected: ['admin', 'user'],
+      roleSelected: ["admin", "user"],
 
       tableSort: {
-        column: 'username',
-        sort: 'desc'
-      }
-    }
+        column: "username",
+        sort: "desc",
+      },
+    };
   },
   methods: {
-    fetchData () {
-      if(this.offset === null) return;
+    fetchData() {
+      if (this.offset === null) return;
 
-      let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `transactions?
+      let url =
+        process.env.VUE_APP_APIENDPOINT +
+        process.env.VUE_APP_APIVERSION +
+        `/` +
+        `transactions?
 					sort=${this.tableSort.column}
 					&order=${this.tableSort.sort}
 					&offset=${this.offset}
 				`;
-      if(this.roleSelected.length === 1) {
-        url += '&role=' + this.roleSelected[0];
+      if (this.roleSelected.length === 1) {
+        url += "&role=" + this.roleSelected[0];
       }
-      if(this.search.length) {
-        url += '&search=' + encodeURIComponent(this.search.trim());
+      if (this.search.length) {
+        url += "&search=" + encodeURIComponent(this.search.trim());
       }
 
       this.loading = true;
       this.axios
-          .get(url)
-          .then(res => {
-            this.transactions.push(...res.data);
-            this.loading = /*loading =*/ false;
+        .get(url)
+        .then((res) => {
+          this.transactions.push(...res.data);
+          this.loading = /*loading =*/ false;
 
-            //If returned data is less than the limit
-            //then there must be no more pages to paginate
-            if(res.data.length < this.limit) {
-              this.offset = null;
-            } else {
-              this.offset+= this.limit;
-            }
-          })
-          .catch(e => {
-            AjaxErrorHandler(this.$store)(e);
-            this.loading = /*loading =*/ false;
-          });
+          //If returned data is less than the limit
+          //then there must be no more pages to paginate
+          if (res.data.length < this.limit) {
+            this.offset = null;
+          } else {
+            this.offset += this.limit;
+          }
+        })
+        .catch((e) => {
+          AjaxErrorHandler(this.$store)(e);
+          this.loading = /*loading =*/ false;
+        });
     },
-    resetFetchData () {
+    resetFetchData() {
       this.offset = 0;
       this.transactions = [];
 
       this.fetchData();
-    }
+    },
   },
-  getNewertransactions () {
-    this.loadingNewer = true
+  getNewertransactions() {
+    this.loadingNewer = true;
 
     this.axios
-        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'transactions' + '?limit=' + this.newtransactions)
-        .then(res => {
-          this.loadingNewer = false
-          this.newtransactions = 0
+      .get(
+        process.env.VUE_APP_APIENDPOINT +
+          process.env.VUE_APP_APIVERSION +
+          "/" +
+          "transactions" +
+          "?limit=" +
+          this.newtransactions
+      )
+      .then((res) => {
+        this.loadingNewer = false;
+        this.newtransactions = 0;
 
-          this.threads.unshift(...res.data.Threads)
-        })
-        .catch((e) => {
-          this.loadingNewer = false
-          AjaxErrorHandler(this.$store)(e)
-        })
+        this.threads.unshift(...res.data.Threads);
+      })
+      .catch((e) => {
+        this.loadingNewer = false;
+        AjaxErrorHandler(this.$store)(e);
+      });
   },
-  mounted () {
-    this.fetchData();
-  }
-}
+  mounted() {
+    if (this.$store.state.user.username) {
+      this.fetchData();
+    }
+  },
+};
 </script>
diff --git a/src/views/User.vue b/src/views/User.vue
index c53ecf5..11c8f20 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -3,7 +3,7 @@
     <section class="section">
       <div class="container">
         <div class="columns is-centered" v-if="exists">
-          <div class="column is-3 is-vcentered has-text-centered">
+          <div class="column is-4 is-vcentered has-text-centered">
             <h1 class="title">
               {{ user.username }}&nbsp;<Badges
                 :username="user.username"
@@ -95,7 +95,7 @@
               {{ $t("user.marketplace") }}:
             </div>
           </div>
-          <div class="column is-6 is-vcentered has-text-centered">
+          <div class="column is-8 is-vcentered has-text-centered">
             <h1 class="title">{{ $t("user.more") }} {{ user.username }}</h1>
             <div>
               <div class="tabs">
diff --git a/src/views/Users.vue b/src/views/Users.vue
index 8df6362..85e94d4 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -3,9 +3,10 @@
     <section class="section">
       <div class="container">
         <div class="columns is-centered is-multiline" v-if="!loading">
-          <div v-if="!users.length" class="column">
-            <br />
-            <NoItems :connection="true" type="users"> </NoItems>
+          <div class="column is-6" v-if="!users.length">
+            <div class="box">
+              <NoItems :connection="true" type="users"> </NoItems>
+            </div>
           </div>
           <Pagination
             class="columns is-multiline"