Editing accounts, change root account username, removed token expiration

client/components/modals/AccountModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" :width="800" :height="500" :processing="processing">
+  <modals-modal v-model="show" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
         <p class="font-book text-3xl text-white truncate">{{ title }}</p>
@@ -8,18 +8,22 @@
     <form @submit.prevent="submitForm">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
         <div class="w-full p-8">
-          <div class="flex py-2">
-            <ui-text-input-with-label v-model="newUser.username" label="Username" class="mx-2" />
-            <ui-text-input-with-label v-model="newUser.password" label="Password" type="password" class="mx-2" />
+          <div class="flex py-2 -mx-2">
+            <div class="w-1/2 px-2">
+              <ui-text-input-with-label v-model="newUser.username" label="Username" class="mx-2" />
+            </div>
+            <div class="w-1/2 px-2">
+              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? 'Password' : 'Change Password'" type="password" class="mx-2" />
+            </div>
           </div>
           <div class="flex py-2">
             <div class="px-2">
-              <ui-input-dropdown v-model="newUser.type" label="Account Type" :editable="false" :items="accountTypes" />
+              <ui-input-dropdown v-model="newUser.type" label="Account Type" :disabled="isEditingRoot" :editable="false" :items="accountTypes" />
             </div>
             <div class="flex-grow" />
-            <div class="flex items-center pt-4 px-2">
-              <p class="px-3 font-semibold">Is Active</p>
-              <ui-toggle-switch v-model="newUser.isActive" />
+            <div v-show="!isEditingRoot" class="flex items-center pt-4 px-2">
+              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">Is Active</p>
+              <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
             </div>
           </div>
           <div class="flex pt-4">
@@ -68,7 +72,10 @@ export default {
       }
     },
     title() {
-      return this.isNew ? 'Add New Account' : `Update "${(this.account || {}).username}" Account`
+      return this.isNew ? 'Add New Account' : `Update Account: ${(this.account || {}).username}`
+    },
+    isEditingRoot() {
+      return this.account && this.account.type === 'root'
     }
   },
   methods: {
@@ -77,6 +84,39 @@ export default {
         this.$toast.error('Enter a username')
         return
       }
+
+      if (this.isNew) {
+        this.submitCreateAccount()
+      } else {
+        this.submitUpdateAccount()
+      }
+    },
+    submitUpdateAccount() {
+      var account = { ...this.newUser }
+      if (!account.password || account.type === 'root') {
+        delete account.password
+      }
+      if (account.type === 'root' && !account.isActive) return
+
+      this.processing = true
+      this.$axios
+        .$patch(`/api/user/${this.account.id}`, account)
+        .then((data) => {
+          this.processing = false
+          if (data.error) {
+            this.$toast.error(`Failed to update account: ${data.error}`)
+          } else {
+            this.$toast.success('Account updated')
+            this.show = false
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to update account', error)
+          this.processing = false
+          this.$toast.error('Failed to update account')
+        })
+    },
+    submitCreateAccount() {
       if (!this.newUser.password) {
         this.$toast.error('Must have a password, only root user can have an empty password')
         return
@@ -84,25 +124,22 @@ export default {
 
       var account = { ...this.newUser }
       this.processing = true
-      if (this.isNew) {
-        this.$axios
-          .$post('/api/user', account)
-          .then((data) => {
-            this.processing = false
-            if (data.error) {
-              this.$toast.error(`Failed to create account: ${data.error}`)
-            } else {
-              console.log('New Account:', data.user)
-              this.$toast.success('New account created')
-              this.show = false
-            }
-          })
-          .catch((error) => {
-            console.error('Failed to create account', error)
-            this.processing = false
+      this.$axios
+        .$post('/api/user', account)
+        .then((data) => {
+          this.processing = false
+          if (data.error) {
+            this.$toast.error(`Failed to create account: ${data.error}`)
+          } else {
             this.$toast.success('New account created')
-          })
-      }
+            this.show = false
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to create account', error)
+          this.processing = false
+          this.$toast.error('Failed to create account')
+        })
     },
     toggleActive() {
       this.newUser.isActive = !this.newUser.isActive

client/components/ui/InputDropdown.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="w-full">
-    <p class="px-1 text-sm font-semibold">{{ label }}</p>
+  <div class="w-full" :class="disabled ? 'cursor-not-allowed' : ''">
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
-        <div ref="inputWrapper" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded px-2 py-2">
-          <input ref="input" v-model="textInput" :readonly="!editable" class="h-full w-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+        <div ref="inputWrapper" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'bg-bg pointer-events-none text-gray-400' : 'bg-primary'">
+          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
         </div>
       </form>
 
@@ -33,6 +33,7 @@
 export default {
   props: {
     value: [String, Number],
+    disabled: Boolean,
     label: String,
     items: {
       type: Array,
@@ -121,4 +122,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/ui/ToggleSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="border rounded-full border-black-100 flex items-center cursor-pointer w-12 justify-end" :class="toggleColor" @click="clickToggle">
-      <span class="rounded-full border w-6 h-6 border-black-50 bg-white shadow transform transition-transform duration-100" :class="!toggleValue ? '-translate-x-6' : ''"> </span>
+    <div class="border rounded-full border-black-100 flex items-center cursor-pointer w-12 justify-start" :class="className" @click="clickToggle">
+      <span class="rounded-full border w-6 h-6 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
     </div>
   </div>
 </template>
@@ -17,7 +17,8 @@ export default {
     offColor: {
       type: String,
       default: 'primary'
-    }
+    },
+    disabled: Boolean
   },
   computed: {
     toggleValue: {
@@ -28,12 +29,18 @@ export default {
         this.$emit('input', val)
       }
     },
-    toggleColor() {
+    className() {
+      if (this.disabled) return 'bg-bg cursor-not-allowed'
       return this.toggleValue ? `bg-${this.onColor}` : `bg-${this.offColor}`
+    },
+    switchClassName() {
+      var bgColor = this.disabled ? 'bg-gray-300' : 'bg-white'
+      return this.toggleValue ? 'translate-x-6 ' + bgColor : bgColor
     }
   },
   methods: {
     clickToggle() {
+      if (this.disabled) return
       this.toggleValue = !this.toggleValue
     }
   }

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {

client/pages/config/index.vue

@@ -27,6 +27,7 @@
             </td>
             <td>
               <div class="w-full flex justify-center">
+                <span class="material-icons hover:text-gray-400 cursor-pointer text-base pr-2" @click="editUser(user)">edit</span>
                 <span v-show="user.type !== 'root'" class="material-icons text-base hover:text-error cursor-pointer" @click="deleteUserClick(user)">delete</span>
               </div>
             </td>
@@ -76,7 +77,7 @@
     </div>
     <div class="fixed bottom-0 left-0 w-10 h-10" @dblclick="setDeveloperMode"></div>
 
-    <modals-account-modal v-model="showAccountModal" />
+    <modals-account-modal v-model="showAccountModal" :account="selectedAccount" />
   </div>
 </template>
 
@@ -91,6 +92,7 @@ export default {
     return {
       isResettingAudiobooks: false,
       users: [],
+      selectedAccount: null,
       showAccountModal: false,
       isDeletingUser: false,
       newServerSettings: {}
@@ -145,10 +147,6 @@ export default {
     scanCovers() {
       this.$root.socket.emit('scan_covers')
     },
-    clickAddUser() {
-      this.showAccountModal = true
-      // this.$toast.info('Under Construction: User management coming soon.')
-    },
     loadUsers() {
       this.$axios
         .$get('/api/users')
@@ -175,6 +173,14 @@ export default {
           })
       }
     },
+    clickAddUser() {
+      this.selectedAccount = null
+      this.showAccountModal = true
+    },
+    editUser(user) {
+      this.selectedAccount = user
+      this.showAccountModal = true
+    },
     deleteUserClick(user) {
       if (this.isDeletingUser) return
       if (confirm(`Are you sure you want to permanently delete user "${user.username}"?`)) {
@@ -198,7 +204,7 @@ export default {
     },
     addUpdateUser(user) {
       if (!this.users) return
-      var index = this.users.find((u) => u.id === user.id)
+      var index = this.users.findIndex((u) => u.id === user.id)
       if (index >= 0) {
         this.users.splice(index, 1, user)
       } else {

client/pages/login.vue

@@ -27,7 +27,7 @@ export default {
     return {
       error: null,
       processing: false,
-      username: 'root',
+      username: '',
       password: null
     }
   },

client/plugins/axios.js

@@ -1,6 +1,5 @@
 export default function ({ $axios, store }) {
   $axios.onRequest(config => {
-    // console.log('Making request to ' + config.url)
     if (config.url.startsWith('http:') || config.url.startsWith('https:')) {
       return
     }
@@ -11,6 +10,7 @@ export default function ({ $axios, store }) {
 
     if (process.env.NODE_ENV === 'development') {
       config.url = `/dev${config.url}`
+      console.log('Making request to ' + config.url)
     }
   })