Awards/user pages/etc

src/App.vue

@@ -3,6 +3,9 @@
 </style>
 <style>
 @import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
+.large-icon {
+  font-size: 60px;
+}
 </style>
 <template>
   <div id="app">
@@ -54,6 +57,7 @@ export default {
         }).catch(() => {
       this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-warning'})
     })
+    this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'awards/eligibility')
   }
 }
 </script>

src/components/Badges.vue

@@ -0,0 +1,19 @@
+<template>
+  <tags>
+  <b-tag v-if="admin" class="is-danger" rounded>Admin</b-tag>&nbsp;
+  <b-tag v-if="bot" class="is-info" rounded>Bot</b-tag>&nbsp;
+  <b-tag v-if="booster" class="is-primary" rounded>Discord Booster</b-tag>&nbsp;
+  <b-tag v-if="system" class="is-success" rounded>System</b-tag>&nbsp;
+  </tags>
+</template>
+<script>
+export default {
+  name: 'UserInventory',
+  props: ['admin', 'booster', 'bot', 'hidden', 'banned', 'system'],
+  data() {
+    return {
+      inventory: []
+    }
+  },
+}
+</script>

src/components/Navbar.vue

@@ -263,8 +263,8 @@
       </template>
 
       <template #end>
-        <b-navbar-item v-if="$store.state.user.username">
+        <b-navbar-item v-if="$store.state.user.username && !loading">
-          {{$store.state.user.koins}} {{$t('currency')}}
+          <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">
@@ -294,14 +294,12 @@
           </div>
         </b-navbar-item>
         </div>
-        <div v-if="loading">
+        <b-navbar-item v-if="loading">
-          <b-navbar-item>
+          <div class="fa-1x">
-            <div class="fa-1x">
+            <i class="fas fa-circle-notch fa-spin"></i>&nbsp;
-              <i class="fas fa-circle-notch fa-spin"></i>&nbsp;
+            &nbsp;{{ $t('generic.loading') }}
-              &nbsp;Loading
+          </div>
-            </div>
+        </b-navbar-item>
-          </b-navbar-item>
-        </div>
       </template>
     </b-navbar>
     <section v-if='$store.state.client.bannerText && $store.state.client.bannerEnabled && showBanner' class="hero is-info">
@@ -585,7 +583,6 @@ export default {
           }
           this.loading = false
         }).catch(() => {
-      localStorage.setItem('userCache', JSON.stringify(this.$store.state.user));
       this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
       this.loading = false
       console.log(this.getBannerId())

src/locales/en.json

@@ -163,6 +163,23 @@
     "logout": "You have been logged out of Kaverti.",
     "register": "You have been registered to Kaverti, Welcome!"
   },
+  "generic": {
+    "name": "Kaverti",
+    "loading": "Loading"
+  },
+  "relationships": {
+    "pending": "Cancel Friend Request",
+    "notFriends": "Send Friend Request",
+    "pendingCanAccept": "Accept Friend Request"
+  },
+  "badges": {
+    "admin": "Admin",
+    "bot": "Bot",
+    "add": "+",
+    "system": "System",
+    "banned": "Banned",
+    "hidden": "Hidden"
+  },
   "user": {
     "title": "Loading",
     "about": "About",
@@ -174,7 +191,18 @@
     "items": "Items",
     "wall": "User Wall",
     "description": "Description",
-    "created": "Registered at"
+    "created": "Registered at",
+    "defaultDesc": "Hi, I'm ",
+    "marketplace": "Published items",
+    "relationships": "Friends",
+    "wearing": "Wearing",
+    "inventoryTab": {
+      "buyNow": "Buy now for ",
+      "was": "was",
+      "unavailable": "Item is unavailable",
+      "noItems": "This user doesn't have any items in their inventory yet!",
+      "onSale": "Item is on sale"
+    }
   },
   "stats": {
     "title": "Stats",

src/router/index.js

@@ -23,7 +23,7 @@ const routes = [
     name: 'Debug',
     component: route('Debug')
   },
-  { path: '/u/:username', redirect: '/u/:username/posts', component: route('User'), children: [
+  { path: '/u/:username', redirect: '/u/:username/awards', component: route('User'), children: [
       { path: 'posts', component: route('UserPosts') },
       { path: 'threads', component: route('UserThreads') },
       { path: 'items', component: route('UserMarketplace') },

src/views/User.vue

@@ -8,16 +8,26 @@
   <main>
     <div class="columns is-centered">
       <div class="column is-4 is-vcentered has-text-centered">
-        <h1 class="title">{{user.username}}</h1>
+        <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>
         <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="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>
+          <b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'accepted'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.accepted')}}</b-button>
+          <b-button class="is-info" v-if="relationships.type === ''" disabled><i class="fas fa-spin"></i> &nbsp;<i class="fas fa-circle-notch fa-spin"></i>&nbsp;{{ $t('generic.loading') }}</b-button>
+        </div>
         <h1 class="subtitle">
           {{ $t('user.about') }} {{user.username}}
         </h1>
         <div class="box limit">
-          {{ $t('user.description') }}: {{user.description}}<br>
+          <div v-if="user.description">{{ $t('user.description') }}: {{user.description}}</div><br>
-          {{ $t('user.created') }}: {{user.createdAt}}
+          <div v-if="!user.description">{{$t('user.description')}}: {{$t('user.defaultDesc')}} {{user.username}}</div>
+          {{ $t('user.created') }}: {{user.createdAt}}<br>
+          {{ $t('user.marketplace') }}:
         </div>
       </div>
       <div class="column is-6 is-vcentered has-text-centered">
@@ -26,12 +36,12 @@
 
           <div class="tabs">
             <ul>
-              <router-link tag="li" :to="'/u/' + user.username + '/posts'" exact><a>{{ $t('user.posts') }}</a></router-link>
-              <router-link tag="li" :to="'/u/' + user.username + '/threads'" exact><a>{{ $t('user.threads') }}</a></router-link>
               <router-link tag="li" :to="'/u/' + user.username + '/wall'" exact><a>{{ $t('user.wall') }}</a></router-link>
               <router-link tag="li" :to="'/u/' + user.username + '/items'" exact><a>{{ $t('user.items') }}</a></router-link>
               <router-link tag="li" :to="'/u/' + user.username + '/inventory'" exact><a>{{ $t('user.inventory') }}</a></router-link>
               <router-link tag="li" :to="'/u/' + user.username + '/awards'" exact><a>{{ $t('user.awards') }}</a></router-link>
+              <router-link tag="li" :to="'/u/' + user.username + '/wearing'" exact><a>{{ $t('user.wearing') }}</a></router-link>
+              <router-link tag="li" :to="'/u/' + user.username + '/friends'" exact><a>{{ $t('user.relationships') }}</a></router-link>
             </ul>
           </div>
         </div>
@@ -47,20 +57,14 @@
 
 <script>
 import AjaxErrorHandler from '../../assets/js/errorHandler'
-
+import Badges from '../components/Badges'
 export default {
   name: 'user',
+  components: {
+    Badges
+  },
   data () {
     return {
-      menuItems: [
-        /* { name: 'Wall', route: 'wall' }, */
-        { name: 'Posts', route: 'posts' },
-        { name: 'Threads', route: 'threads' },
-        /* { name: 'Friends', route: 'friends' } */
-      ],
-      selected: 0,
-
-      username: this.$route.params.username,
       user: {
         username: "Loading",
         description: "Loading",
@@ -115,6 +119,9 @@ export default {
               AjaxErrorHandler(this.$store)(e)
             }
           })
+      this.axios
+          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/get/' + this.$route.params.username)
+          .then(res => this.relationships.type = res.data.type)
     },
     scrubDesc () {
       this.axios
@@ -149,9 +156,10 @@ export default {
           .catch(AjaxErrorHandler(this.$store))
     },
     refreshFriend() {
+      this.relationships.type === ''
       this.axios
           .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
-          .then(res => this.relationship = res.data)
+          .then(res => this.relationships.type = res.data.type)
     },
     removeFriend () {
       this.axios
@@ -228,9 +236,7 @@ export default {
             this.refreshFriend()
             this.description.loading = false
 
-            AjaxErrorHandler(this.$store)(e, error => {
+            AjaxErrorHandler(this.$store)(e)
-              this.description.error = error.message
-            })
             this.axios
                 .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
                 .then(res => this.relationship = res.data)

src/views/UserAwards.vue

@@ -1,5 +1,48 @@
 <template>
   <main>
-
+    <div class="columns">
+      <div class="column is-4" v-for='(award) in awards' :key='"award-" + award.id'>
+        <div class="box">
+          <b-tag v-if="award.Award.rarity === 'Common'">{{award.Award.rarity}}</b-tag>
+          <b-tag v-if="award.Award.rarity === 'Uncommon'">{{award.Award.rarity}}</b-tag>
+          <b-tag v-if="award.Award.rarity === 'Rare'" class="is-warning">{{award.Award.rarity}}</b-tag>
+          <b-tag v-if="award.Award.rarity === 'Extremely Rare'" class="is-danger">{{award.Award.rarity}}</b-tag>
+          <b-tag v-if="award.Award.rarity === 'Impossible'" class="is-danger">{{award.Award.rarity}}</b-tag><br>
+          <b-tooltip :label="award.Award.description"><h1 class="subtitle">{{award.Award.name}} &nbsp;<i class="fas fa-info-circle"></i></h1></b-tooltip><br>
+          <img :src="'https://cdn.kaverti.com/awards/icon/' + award.Award.icon + '.png'">
+        </div>
+      </div>
+    </div>
   </main>
-</template>
+</template>
+<script>
+import AjaxErrorHandler from "../../assets/js/errorHandler";
+
+export default {
+  name: 'UserAwards',
+  props: ['username'],
+  data() {
+    return {
+      awards: []
+    }
+  },
+  mounted() {
+    this.axios
+        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?awards=true`)
+        .then(res => {
+          this.awards = res.data
+        })
+        .catch(e => {
+          let invalidId = e.response.data.errors.find(error => {
+            return error.name === 'accountDoesNotExist'
+          })
+
+          if (invalidId) {
+            this.$store.commit('set404Page', true)
+          } else {
+            AjaxErrorHandler(this.$store)(e)
+          }
+        })
+  }
+}
+</script>

src/views/UserFriends.vue

@@ -1,5 +1,40 @@
 <template>
   <main>
-
+    <div class="column" v-if="!friends.length">
+      <i class="far fa-times-square large-icon"></i>
+      <h1 class="subtitle">This user doesn't have any friends yet, how about you send them a friend request?</h1>
+      <b-button>Send {{$route.params.username}} a friend request</b-button>
+    </div>
   </main>
-</template>
+</template>
+<script>
+import AjaxErrorHandler from "../../assets/js/errorHandler";
+
+export default {
+  name: 'UserFriends',
+  props: ['username'],
+  data() {
+    return {
+      friends: []
+    }
+  },
+  mounted() {
+    this.axios
+        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/user/' + this.$route.params.username)
+        .then(res => {
+          this.inventory = res.data.Inventories
+        })
+        .catch(e => {
+          let invalidId = e.response.data.errors.find(error => {
+            return error.name === 'accountDoesNotExist'
+          })
+
+          if (invalidId) {
+            this.$store.commit('set404Page', true)
+          } else {
+            AjaxErrorHandler(this.$store)(e)
+          }
+        })
+  }
+}
+</script>

src/views/UserInventory.vue

@@ -1,5 +1,50 @@
 <template>
   <main>
-
+    <div class="columns is-multiline">
+      <div class="column" v-if="!inventory.length">
+        <i class="far fa-times-square large-icon"></i>
+        <h1 class="subtitle">{{$t('user.inventoryTab.noItems')}}</h1>
+      </div>
+      <div class="column is-4" v-for='(item) in inventory' :key='"item-" + item.id'>
+        <h1 class="subtitle">{{item.Item.name}}</h1>
+        <div class="box">
+          <img v-if="item.Item.approved" width="128px" height="128px" :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.Item.previewFile + '.png'">
+          <b-button class="is-info" v-if="!item.Item.offSale && !item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.Item.price}}</b-button>
+          <b-button class="is-success" v-if="item.Item.saleEnabled">{{$t('user.inventoryTab.buyNow')}} <img style="vertical-align: middle" src="https://cdn.kaverti.com/icons/koins-white.svg" width="12%">{{item.Item.salePrice}} <b-tooltip class="is-success" :label="$t('user.inventoryTab.onSale')"><i class="fas fa-info-circle"></i></b-tooltip></b-button>
+          <b-button disabled v-if="item.Item.offSale">{{$t('user.inventoryTab.unavailable')}}</b-button>
+        </div>
+      </div>
+    </div>
   </main>
-</template>
+</template>
+<script>
+import AjaxErrorHandler from "../../assets/js/errorHandler";
+
+export default {
+  name: 'UserInventory',
+  props: ['username'],
+  data() {
+    return {
+      inventory: []
+    }
+  },
+  mounted() {
+    this.axios
+        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?sort=username&order=desc&offset=234243&inventory=true`)
+        .then(res => {
+          this.inventory = res.data.Inventories
+        })
+        .catch(e => {
+          let invalidId = e.response.data.errors.find(error => {
+            return error.name === 'accountDoesNotExist'
+          })
+
+          if (invalidId) {
+            this.$store.commit('set404Page', true)
+          } else {
+            AjaxErrorHandler(this.$store)(e)
+          }
+        })
+  }
+}
+</script>

src/views/UserPosts.vue

@@ -76,7 +76,7 @@ export default {
           })
     }
   },
-  created () {
+  mounted () {
     this.$store.dispatch('setTitle', this.$route.params.username + ' - Posts')
 
     this.axios