stuff

assets/scss/buefy.scss

@@ -5,6 +5,8 @@ $primary: #2baaff;
 $primary-invert: findColorInvert($primary);
 $twitter: #4099FF;
 $twitter-invert: findColorInvert($twitter);
+$booster: #2baaff;
+$is-booster: #2baaff;
 
 // Import Bulma and Buefy styles
 @import "~bulma";

src/components/Badges.vue

@@ -1,19 +1,84 @@
 <template>
-  <tags>
+  <trpl-badges>
-  <b-tag v-if="admin" class="is-danger" rounded>Admin</b-tag>&nbsp;
+    <b-modal :active="modifyUserModal" @update:active="value => modifyUserModal = value" :width="640" scroll="keep" style="z-index: 100">
-  <b-tag v-if="bot" class="is-info" rounded>Bot</b-tag>&nbsp;
+      <div class="modal-card subtitle" style="width: auto">
-  <b-tag v-if="booster" class="is-primary" rounded>Discord Booster</b-tag>&nbsp;
+        <header class="modal-card-head">
-  <b-tag v-if="system" class="is-success" rounded>System</b-tag>&nbsp;
+          <p class="modal-card-title">{{$t('modifyUser.title')}}</p>
-  </tags>
+          <button
+              type="button"
+              class="delete"
+              @click="$emit('close')"/>
+        </header>
+        <section class="modal-card-body">
+          {{$t('modifyUser.text')}}:<br>
+          <b-switch type="is-dark" v-model="booster">
+            {{ $t('badges.booster') }}
+          </b-switch><br>
+          <b-switch type="is-success" v-model="system">
+            {{ $t('badges.system') }}
+          </b-switch><br>
+          <b-switch v-model="bot">
+            {{ $t('badges.bot') }}
+          </b-switch><br>
+          <b-switch type="is-dark" v-model="hidden">
+            {{ $t('badges.hidden') }}
+          </b-switch><br>
+          <b-switch type="is-danger" v-model="admin" v-if="$store.state.executive">
+            {{ $t('badges.admin') }}
+          </b-switch>
+          <b-tooltip label="Only executives can modify this setting" v-else>
+            <b-switch disabled="disabled" type="is-danger" v-model="admin">
+              Admin
+            </b-switch>
+          </b-tooltip>
+        </section>
+        <footer class="modal-card-foot">
+          <b-button
+              :label="$t('OK')"
+              @click="modifyUser()" />
+        </footer>
+      </div>
+    </b-modal>
+    <b-tag v-if="admin" class="is-danger" rounded>{{ $t('badges.admin') }}</b-tag>&nbsp;
+    <b-tag v-if="bot" class="is-info" rounded>{{ $t('badges.bot') }}</b-tag>&nbsp;
+    <b-tag v-if="booster" class="is-success" rounded>{{ $t('badges.booster') }}</b-tag>&nbsp;
+    <b-tag v-if="system" class="is-success" rounded>{{ $t('badges.system') }}</b-tag>&nbsp;
+    <b-tag v-if="hidden" rounded>{{ $t('badges.hidden') }}</b-tag>&nbsp;
+    <b-button @click="modal()" v-if="$store.state.user.admin" class="is-info tag" rounded><i class="fas fa-plus"></i></b-button>
+  </trpl-badges>
 </template>
 <script>
+import AjaxErrorHandler from "../../../website/legacyfrontend/src/assets/js/errorHandler";
+
 export default {
-  name: 'UserInventory',
+  name: 'UserBadges',
-  props: ['admin', 'booster', 'bot', 'hidden', 'banned', 'system'],
+  props: ['admin', 'booster', 'bot', 'hidden', 'banned', 'system', 'username'],
   data() {
     return {
-      inventory: []
+      modifyUserModal: false
     }
   },
+  methods: {
+    modal() {
+      this.modifyUserModal = true
+    },
+    modifyUser() {
+      this.axios
+          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/modify', {
+            username: this.username,
+            bot: this.bot,
+            system: this.system,
+            booster: this.booster,
+            admin: this.admin,
+            hidden: this.hidden
+          })
+          .then(() => {
+            this.modifyUserModal = false
+          })
+          .catch(e => {
+            AjaxErrorHandler(this.$store)(e)
+          })
+    }
+  }
 }
 </script>

src/components/Navbar.vue

@@ -289,6 +289,7 @@
               <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="/friends"><b-tag class="is-info" rounded> 1</b-tag>&nbsp; {{$t('navbar.user.friends')}}</b-navbar-item>
                 <b-navbar-item @click="logout()">{{$t('navbar.user.logout')}}</b-navbar-item>
             </div>
           </div>
@@ -328,6 +329,7 @@ export default {
       loading: true,
       settingsModal: false,
       showBanner: true,
+      friendCount: 0,
       settings: {
         tab: 0,
         general: {
@@ -587,6 +589,15 @@ export default {
       this.loading = false
       console.log(this.getBannerId())
     })
+    if(this.$store.state.username) {
+      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAllPendingCanAccept')
+          .then(res => {
+            this.friendCount = res.data.count
+          }).catch(() => {
+        this.$buefy.snackbar.open({message: this.$t('errors.authFail'), type: 'is-warning'})
+        this.loading = false
+      })
+    }
   }
 }
 </script>

src/locales/en.json

@@ -178,7 +178,8 @@
     "add": "+",
     "system": "System",
     "banned": "Banned",
-    "hidden": "Hidden"
+    "hidden": "Hidden",
+    "booster": "Discord Booster"
   },
   "user": {
     "title": "Loading",

src/views/User.vue

@@ -8,12 +8,12 @@
   <main>
     <div class="columns is-centered">
       <div class="column is-4 is-vcentered has-text-centered">
-        <h1 class="title">{{user.username}}&nbsp;<Badges :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges>&nbsp;<b-tag v-if="$store.state.user.admin" class="is-info" rounded><i class="fas fa-plus"></i></b-tag></h1>
+        <h1 class="title">{{user.username}}&nbsp;<Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1>
         <div class="box">
           <img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" :alt="$store.state.user.username + '\'s avatar'" width="70%">
         </div>
         <div class="buttons is-centered">
-          <b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends'"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button>
+          <b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends' && user.username !== $store.state.user.username"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button>
           <b-button @click="removeFriend" class="is-warning" v-if="relationships.type === 'pending'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.pending')}}</b-button>
           <b-button @click="doRelationshipAccept" class="is-info" v-if="relationships.type === 'pendingCanAccept'"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.pendingCanAccept')}}</b-button>
           <b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'ignore'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.ignore')}}</b-button>
@@ -65,6 +65,7 @@ export default {
   },
   data () {
     return {
+      modifyUserModal: true,
       user: {
         username: "Loading",
         description: "Loading",