Update:JWT signing

client/components/modals/AccountModal.vue

@@ -146,7 +146,6 @@ export default {
   watch: {
     show: {
       handler(newVal) {
-        console.log('accoutn modal show change', newVal)
         if (newVal) {
           this.init()
         }
@@ -162,6 +161,9 @@ export default {
         this.$emit('input', val)
       }
     },
+    user() {
+      return this.$store.state.user.user
+    },
     title() {
       return this.isNew ? 'Add New Account' : `Update ${(this.account || {}).username}`
     },
@@ -250,6 +252,12 @@ export default {
             this.$toast.error(`Failed to update account: ${data.error}`)
           } else {
             console.log('Account updated', data.user)
+
+            if (data.user.id === this.user.id && data.user.token !== this.user.token) {
+              console.log('Current user token was updated')
+              this.$store.commit('user/setUserToken', data.user.token)
+            }
+
             this.$toast.success('Account updated')
             this.show = false
           }
@@ -305,7 +313,6 @@ export default {
 
       this.isNew = !this.account
       if (this.account) {
-        console.log(this.account)
         this.newUser = {
           username: this.account.username,
           password: this.account.password,

client/pages/config/users/_id/index.vue

@@ -13,11 +13,12 @@
         <widgets-online-indicator :value="!!userOnline" />
         <h1 class="text-xl pl-2">{{ username }}</h1>
       </div>
-      <div class="cursor-pointer text-gray-400 hover:text-white" @click="copyToClipboard(userToken)">
-        <p v-if="userToken" class="py-2 text-xs">
-          <strong class="text-white">API Token: </strong><br /><span class="text-white">{{ userToken }}</span
-          ><span class="material-icons pl-2 text-base">content_copy</span>
-        </p>
+      <div v-if="userToken" class="flex text-xs mt-4">
+        <ui-text-input-with-label label="API Token" :value="userToken" readonly />
+
+        <div class="px-1 mt-8 cursor-pointer" @click="copyToClipboard(userToken)">
+          <span class="material-icons pl-2 text-base">content_copy</span>
+        </div>
       </div>
       <div class="w-full h-px bg-white bg-opacity-10 my-2" />
       <div class="py-2">
@@ -138,12 +139,15 @@ export default {
       this.$copyToClipboard(str, this)
     },
     async init() {
-      this.listeningSessions = await this.$axios.$get(`/api/users/${this.user.id}/listening-sessions?page=0&itemsPerPage=10`).then((data) => {
-        return data.sessions || []
-      }).catch((err) => {
-        console.error('Failed to load listening sesions', err)
-        return []
-      })
+      this.listeningSessions = await this.$axios
+        .$get(`/api/users/${this.user.id}/listening-sessions?page=0&itemsPerPage=10`)
+        .then((data) => {
+          return data.sessions || []
+        })
+        .catch((err) => {
+          console.error('Failed to load listening sesions', err)
+          return []
+        })
       this.listeningStats = await this.$axios.$get(`/api/users/${this.user.id}/listening-stats`).catch((err) => {
         console.error('Failed to load listening sesions', err)
         return []

client/store/user.js

@@ -136,6 +136,10 @@ export const mutations = {
       localStorage.removeItem('token')
     }
   },
+  setUserToken(state, token) {
+    state.user.token = token
+    localStorage.setItem('token', user.token)
+  },
   updateMediaProgress(state, { id, data }) {
     if (!state.user) return
     if (!data) {