frontend/src/components/Navbar.vue

<template>
  <nav>
    <b-modal :active="ajaxErrorModal" @update:active="value => ajaxErrorModal = value" :width="640" scroll="keep" style="z-index:  200">
      <div class="modal-card" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title">{{$t('errorModalTitle')}}</p>
          <button
              type="button"
              class="delete"
              @click="$emit('close')"/>
        </header>
        <section class="modal-card-body media">
          <p :key='error' v-for='error in this.$store.state.errors.errors' style='margin: 1rem;'>{{error}}</p>
        </section>
        <footer class="modal-card-foot">
          <b-button
              :label="$t('gotIt')"
              @click="ajaxErrorModal = false" />
        </footer>
      </div>
    </b-modal>
    <b-modal :active="loginModal" @update:active="value => loginModal = value" :width="640" scroll="keep">
      <form>
        <div class="modal-card" style="width: auto">
          <header class="modal-card-head">
            <p class="modal-card-title">{{ $t('login.title') }}</p>
            <button
                type="button"
                class="delete"
                @click="loginModal = false"/>
          </header>
          <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>
              </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>
              </b-input>
            </b-field>
            <b-checkbox v-model="login.doNotSaveToken">{{$t('login.doNotSaveAuth')}}</b-checkbox>
          </section>
          <footer class="modal-card-foot">
            <b-button
                @click="doLogin()"
                :label="$t('login.login')"
                :loading="login.loading"
                type="is-primary" />
            <b-button
                :label="$t('close')"
                @click="loginModal = false" />
            <b-button
                @click="registerModal = true; loginModal = false"
                :label="$t('login.register')"
                type="is-success" />
          </footer>
        </div>
      </form>
    </b-modal>
    <b-modal :active="settingsModal" @update:active="value => settingsModal = value" :width="640" scroll="keep">
      <form>
        <div class="modal-card" style="width: auto">
          <header class="modal-card-head">
            <p class="modal-card-title">{{ $t('settings.title') }}</p>
            <button
                type="button"
                class="delete"
                @click="loginModal = false"/>
          </header>
          <section class="modal-card-body">
            <b-tabs position="is-centered" class="block">
              <b-tab-item :label="$t('settings.general.title')">
                <h1 class="title">{{$t('settings.general.title')}}</h1>
                <div>
                  <h1 class="subtitle">{{$t('settings.general.about')}}</h1>
                  <h4>
                    {{ $t('settings.general.description') }}
                  </h4>
                  <b-input type="textarea"
                           :placeholder="$t('settings.general.hi') + ' ' + $store.state.user.username"
                           maxlength="256"
                           v-model='settings.general.description.value'
                           :error='settings.general.description.error'
                  ></b-input>
                  <b-button
                      class='button is-info'
                      :loading='settings.general.description.loading'
                      @click='saveDesc()'
                  >
                    {{$t('settings.general.saveDesc')}}
                  </b-button>
                </div>
                <div>
                  <h2>{{$t('settings.general.preferences')}}</h2>
                  <b-switch class="is-info" v-model="settings.general.preferences.developerMode">{{$t('settings.general.devMode')}}</b-switch><br>
                  <b-button
                      class='button is-info'
                      :loading='settings.general.preferences.loading'
                      @click='savePref()'
                  >
                    {{$t('settings.general.savePref')}}
                  </b-button>
                </div>
              </b-tab-item>
              <b-tab-item :label="$t('settings.security.title')">
                Debug
              </b-tab-item>
              <b-tab-item :label="$t('settings.privacy.title')">
                Debug
              </b-tab-item>
              <b-tab-item :label="$t('settings.experiments.title')">
                Debug
              </b-tab-item>
              <b-tab-item :label="$t('settings.about.title')">
                <div>
                  <center>
                    <img src="https://cdn.kaverti.com/icon.png" width="10%">
                    <h1>Kaverti v{{this.$store.state.client.clientVersion}}</h1>
                    <p>Latest client version: v{{this.$store.state.client.latestClientVersion}}</p>
                    <p>API version: v{{this.$store.state.client.latestAPIVersion}}</p>
                  </center>
                </div>
              </b-tab-item>
            </b-tabs>
          </section>
          <footer class="modal-card-foot">
            <b-button
                :label="$t('close')"
                @click="settingsModal = false" />
          </footer>
        </div>
      </form>
    </b-modal>
    <b-modal :active="updateModal" @update:active="value => updateModal = value" :width="640" scroll="keep">
      <form>
        <div class="modal-card" style="width: auto">
          <header class="modal-card-head">
            <p class="modal-card-title">{{$t('update.title')}}</p>
            <button
                type="button"
                class="delete"
                @click="updateDismissed"/>
          </header>
          <section class="modal-card-body has-text-centered">
            <h1 class="subtitle">What's new in {{$store.state.client.clientVersion}}?</h1>
            <ul>
              <li>Improved pagination</li>
              <li>Add friend page</li>
              <li>Remove koin icon in buttons</li>
              <li>Add global wall</li>
              <li>Add blog</li>
              <li>Add new friend count in Navbar User Menu</li>
              <li>Add developmental forum</li>
              <hr>
              <li>{{$store.state.client.clientVersion}}-patch fixes:</li>
              <li>Patch pagination page crash bug with 'wait' prop to not attempt to load more when its loading</li>
              <li>Improve forum thread page</li>
            </ul>
          </section>
          <footer class="modal-card-foot">
            <b-button
                :label="$t('close')"
                @click="updateDismissed" />
          </footer>
        </div>
      </form>
    </b-modal>
    <b-modal :active="registerModal" @update:active="value => registerModal = value" :width="640" scroll="keep">
      <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"/>
          </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>
              </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>
              </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>
              </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>
              </b-input>
            </b-field>
            <b-checkbox v-model="register.agree">{{$t('register.agree')}} <router-link @click="registerModal = false  " to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
          </section>
          <footer class="modal-card-foot">
            <b-button
                @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" />
          </footer>
        </div>
      </form>
    </b-modal>
    <section v-if='!$store.state.user.emailVerified && $store.state.user.username' class="hero is-danger">
      <div class="hero-body" style="padding: 1rem 1rem !important;">
        <div class="mobile-container">
          <div class="container">
            <p style="text-align: center;">{{$t('errors.emailVerify')}}</p>
          </div>
        </div>
      </div>
    </section>
    <section v-if='$store.state.client.clientVersion !== $store.state.client.latestClientVersion && showOutdatedBanner' class="hero is-warning">
      <div class="hero-body" style="padding: 1rem 1rem !important;">
        <div class="mobile-container">
          <div class="container">
            <p style="text-align: center;">You are using an outdated version of Kaverti, please refresh.<button
                type="button"
                class="delete"
                style="float: right;"
                @click="showOutdatedBanner = false"/></p>
          </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 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">{{$t('navbar.dev.debug')}}</b-navbar-item>
            <b-navbar-item @click="fakeUser()">{{$t('navbar.dev.fakeUser')}}</b-navbar-item>
            <b-navbar-item @click="toggleBrokenRoute(true)">{{$t('navbar.dev.brokenRoute')}}</b-navbar-item>
          </div>
        </div>
        <div v-if="$store.state.debug" 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">{{$t('navbar.more.discord')}}</b-navbar-item>
            <b-navbar-item tag="router-link" to="/roadmap">{{$t('navbar.more.roadmap')}}</b-navbar-item>
            <b-navbar-item tag="a" href="soon">{{$t('navbar.more.documentation')}}</b-navbar-item>
            <b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.downloads')}}</b-navbar-item>
            <b-navbar-item tag="router-link" to="/stats">{{$t('navbar.more.stats')}}</b-navbar-item>
            <b-navbar-item tag="router-link" to="/blog">{{$t('navbar.more.blog')}}</b-navbar-item>
          </div>
        </div>
      </template>

      <template #end>
        <b-navbar-item v-if="$store.state.user.username && !loading" @click="dailyReward(true)">
          <img src="https://cdn.kaverti.com/icons/koins.svg">{{$store.state.user.koins}}
        </b-navbar-item>
        <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 tag="router-link" :to="'/u/' + $store.state.user.username">{{$t('navbar.user.profile')}}</b-navbar-item>
          <b-navbar-item @click="settingsModal = true">{{$t('navbar.user.settings')}}</b-navbar-item>
          <b-navbar-item tag="router-link" to="/transactions">{{$t('navbar.user.transactions')}}</b-navbar-item>
          <b-navbar-item tag="router-link" to="/character">{{$t('navbar.user.avatar')}}</b-navbar-item>
          <b-navbar-item tag="router-link" to="/creations">{{$t('navbar.user.creations')}}</b-navbar-item>
          <b-navbar-item tag="router-link" to="/downloads">{{$t('navbar.user.downloads')}}</b-navbar-item>
          <b-navbar-item tag="router-link" to="/admin" v-if="$store.state.user.admin">{{$t('navbar.user.admin')}}</b-navbar-item>
          <b-navbar-item tag="router-link" to="/friends"><b-tag class="is-info" rounded v-if="friendCount > 0"> {{ friendCount }}</b-tag>&nbsp;&nbsp;&nbsp;&nbsp;<p>{{$t('navbar.user.friends')}}</p></b-navbar-item>
          <b-navbar-item @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>
    <section v-if='$store.state.client.bannerText && $store.state.client.bannerEnabled && showBanner' class="hero is-info">
      <div class="hero-body" style="padding: 1rem 1rem !important;">
        <div class="mobile-container">
          <div class="container">
            <p style="text-align: center;">{{$store.state.client.bannerText}}            <button
                type="button"
                class="delete"
                style="float: right;"
                @click="removeBannerId"/></p>
          </div>
        </div>
      </div>
    </section>
  </nav>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'
import axios from "axios";
export default {
  data() {
    return {
      loginModal: false,
      registerModal: false,
      loading: true,
      settingsModal: false,
      showBanner: true,
      showOutdatedBanner: true,
      friendCount: 0,
      updateModal: false,
      settings: {
        tab: 0,
        general: {
          description: {
            value: '',
            loading: false,
            error: ''
          },
          preferences: {
            theme: '',
            developerMode: '',
            loading: false,
            error: ''
          },
        },
        privacy: {
          wall: false,
          loading: false
        },
        experiments: {
          theme: 'light',
          loading: false,
          error: '',
          relationships: false,
          wall: false,
          marketplace: false,
          teams: false,
          newsettings: true,
          corrupt: false,
          local: []
        },
        account: {
          showLogoutModal: false,
          password: {
            loading: false,

            current: '',
            new: '',

            errors: {
              'new password': '',
              'current password': ''
            }
          },
          email: {
            loading: false,
            loadingChange: false,

            currentPassword: '',
            new: '',

            errors: {
              'new password': '',
              'email current password': ''
            }
          },
          username: {username: '',
            password: '',
            errors: {
              'username': '',
              'password': '',
            },
            loading: false,
          },
          deleteAcc: {
            loading: false,

            password: '',

            errors: {
              'current password': ''
            }
          },
          totp: {loading: false
          },

          deleteAccountLoading: false,
          invalidateSessionLoading: false,
          emailCheckDelete: false,
          showLoginModal: false
        }
      },
      login: {
        username: '',
        password: '',
        loading: false,
        doNotSaveToken: false,
      },
      register: {
        username: '',
        email: '',
        password: '',
        confirm: '',
        agree: false,
        loading: false
      }
    }
  },
  computed: {
    ajaxErrorModal: {
      get() {
        return this.$store.state.errors.modal
      },
      set(val) {
        this.$store.commit('setAjaxErrorsModalState', val)
      }
    },
  },
  methods: {
    toggleBrokenRoute (val) {
      this.$store.commit('brokenRoute', val)
    },
    savePref() {
      this.preferences.error = ''
      this.preferences.loading = true

      this.axios
          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
            developerMode: this.preferences.developerMode
          })
          .then(() => {
            this.preferences.loading = false
            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
                .then(res => {
                  this.$store.commit('setUsername', res.data.username)
                  this.$store.commit('setEmail', res.data.email)
                  this.$store.commit('setEmailVerified', res.data.emailVerified)
                  this.$store.commit('setAdmin', res.data.admin)
                  this.$store.commit('setDevMode', res.data.developerMode)
                })
          })
          .catch(e => {
            this.preferences.loading = false
            AjaxErrorHandler(this.$store)(e)
          })
    },
    saveDesc() {
      this.description.error = ''
      this.description.loading = true

      this.axios
          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
            description: this.description.value
          })
          .then(() => {
            this.description.loading = false
          })
          .catch(e => {
            this.description.loading = false
            AjaxErrorHandler(this.$store)(e)
          })
    },
    getBannerId() {
      if(localStorage.getItem(this.$store.state.client.bannerId)) {
        this.showBanner = false
      } else {
        this.showBanner = true
      }
    },
    updateDismissed() {
      localStorage.setItem("update-" + this.$store.state.client.clientVersion, true)
      this.updateModal = false
    },
    showUpdate() {
      if(!localStorage.getItem("update-" + this.$store.state.client.clientVersion)) {
        this.updateModal = true
      } else {
        this.updateModal = false
      }
    },
    removeBannerId() {
      localStorage.setItem(this.$store.state.client.bannerId, true)
      this.$store.state.client.bannerEnabled = false
      console.log(localStorage.getItem(this.$store.state.client.bannerId))
    },
    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)
          }
        })
      })
    },
    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)
          }
        })
      })
    },
    logout() {
      localStorage.removeItem('token');
      this.$store.commit('setToken', '')
      Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
          .then(res => {
            this.$store.commit('setUsername', res.data.username)
            this.$store.commit('setEmail', res.data.email)
            this.$store.commit('setEmailVerified', res.data.emailVerified)
            this.$store.commit('setAdmin', res.data.admin)
            this.$store.commit('setKoins', res.data.koins)
            this.$store.commit('setID', res.data.id)
            this.$store.commit('setBot', res.data.bot)
            this.$buefy.snackbar.open({message:this.$t('errors.logout'), type: 'is-info'})
          }).catch(() => {
        this.$buefy.snackbar.open({message:this.$t('errors.logout'), type: 'is-info'})
      })
    },
    fakeUser () {
      this.$store.commit('fakeUser')
      this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`)
      Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
    },
    dailyReward(notify) {
      this.axios.get(
          process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/reward'
      ).then(res => {
        this.$store.commit('setKoins', res.data.koins)
      }).catch(e => {
        if(notify) {
          AjaxErrorHandler(this.$store)(e)
        }
      })
    },
    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_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
          })
    })
  }
}
</script>