Adding and deleting users

client/components/app/Appbar.vue

@@ -11,7 +11,7 @@
         <controls-global-search />
         <div class="flex-grow" />
 
-        <nuxt-link to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
+        <nuxt-link v-if="isRootUser" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
           <span class="material-icons">settings</span>
         </nuxt-link>
 
@@ -56,6 +56,9 @@ export default {
     user() {
       return this.$store.state.user.user
     },
+    isRootUser() {
+      return this.$store.getters['user/getIsRoot']
+    },
     username() {
       return this.user ? this.user.username : 'err'
     },

client/components/modals/AccountModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <modals-modal v-model="show" :width="800" :height="500" :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>
+      </div>
+    </template>
+    <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>
+          <div class="flex py-2">
+            <div class="px-2">
+              <ui-input-dropdown v-model="newUser.type" label="Account Type" :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>
+          </div>
+          <div class="flex pt-4">
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">Submit</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    account: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newUser: {},
+      isNew: true,
+      accountTypes: ['guest', 'user', 'admin']
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this.isNew ? 'Add New Account' : `Update "${(this.account || {}).username}" Account`
+    }
+  },
+  methods: {
+    submitForm() {
+      if (!this.newUser.username) {
+        this.$toast.error('Enter a username')
+        return
+      }
+      if (!this.newUser.password) {
+        this.$toast.error('Must have a password, only root user can have an empty password')
+        return
+      }
+
+      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.$toast.success('New account created')
+          })
+      }
+    },
+    toggleActive() {
+      this.newUser.isActive = !this.newUser.isActive
+    },
+    init() {
+      this.isNew = !this.account
+      if (this.account) {
+        this.newUser = {
+          username: this.account.username,
+          password: this.account.password,
+          type: this.account.type,
+          isActive: this.account.isActive
+        }
+      } else {
+        this.newUser = {
+          username: null,
+          password: null,
+          type: 'user',
+          isActive: true
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-50 flex items-center justify-center z-30 opacity-0">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-30 opacity-0">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">

client/components/ui/InputDropdown.vue

@@ -4,7 +4,7 @@
     <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" class="h-full w-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <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>
       </form>
 
@@ -37,6 +37,10 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    editable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

client/components/ui/ToggleSwitch.vue

@@ -0,0 +1,34 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean
+  },
+  computed: {
+    toggleValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    toggleColor() {
+      return this.toggleValue ? 'bg-success' : 'bg-primary'
+    }
+  },
+  methods: {
+    clickToggle() {
+      console.log('click toggle', this.toggleValue)
+      this.toggleValue = !this.toggleValue
+    }
+  }
+}
+</script>

client/layouts/default.vue

@@ -168,6 +168,11 @@ export default {
   },
   mounted() {
     this.initializeSocket()
+
+    if (this.$route.query.error) {
+      this.$toast.error(this.$route.query.error)
+      this.$router.replace(this.$route.path)
+    }
   }
 }
 </script>

client/package.json

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

client/pages/account.vue

@@ -65,6 +65,9 @@ export default {
       if (this.newPassword !== this.confirmPassword) {
         return this.$toast.error('New password and confirm password do not match')
       }
+      if (this.password === this.newPassword) {
+        return this.$toast.error('Password and New Password cannot be the same')
+      }
       this.changingPassword = true
       this.$axios
         .$patch('/api/user/password', {

client/pages/config/index.vue

@@ -15,13 +15,21 @@
             <th>Username</th>
             <th>Account Type</th>
             <th style="width: 200px">Created At</th>
+            <th style="width: 100px"></th>
           </tr>
           <tr v-for="user in users" :key="user.id">
-            <td>{{ user.username }}</td>
+            <td>
+              {{ user.username }} <span class="text-xs text-gray-400 italic pl-4">({{ user.id }})</span>
+            </td>
             <td>{{ user.type }}</td>
             <td class="text-sm font-mono">
               {{ new Date(user.createdAt).toISOString() }}
             </td>
+            <td>
+              <div class="w-full flex justify-center">
+                <span v-show="user.type !== 'root'" class="material-icons text-base hover:text-error cursor-pointer" @click="deleteUserClick(user)">delete</span>
+              </div>
+            </td>
           </tr>
         </table>
       </div>
@@ -59,15 +67,24 @@
       </div>
     </div>
     <div class="fixed bottom-0 left-0 w-10 h-10" @dblclick="setDeveloperMode"></div>
+
+    <modals-account-modal v-model="showAccountModal" />
   </div>
 </template>
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsRoot']) {
+      redirect('/?error=unauthorized')
+    }
+  },
   data() {
     return {
       isResettingAudiobooks: false,
-      users: null
+      users: [],
+      showAccountModal: false,
+      isDeletingUser: false
     }
   },
   computed: {
@@ -94,7 +111,8 @@ export default {
       this.$root.socket.emit('scan_covers')
     },
     clickAddUser() {
-      this.$toast.info('Under Construction: User management coming soon.')
+      this.showAccountModal = true
+      // this.$toast.info('Under Construction: User management coming soon.')
     },
     loadUsers() {
       this.$axios
@@ -121,10 +139,64 @@ export default {
             this.$toast.error('Failed to reset audiobooks - stop docker and manually remove appdata')
           })
       }
+    },
+    deleteUserClick(user) {
+      if (this.isDeletingUser) return
+      if (confirm(`Are you sure you want to permanently delete user "${user.username}"?`)) {
+        this.isDeletingUser = true
+        this.$axios
+          .$delete(`/api/user/${user.id}`)
+          .then((data) => {
+            this.isDeletingUser = false
+            if (data.error) {
+              this.$toast.error(data.error)
+            } else {
+              this.$toast.success('User deleted')
+            }
+          })
+          .catch((error) => {
+            console.error('Failed to delete user', error)
+            this.$toast.error('Failed to delete user')
+            this.isDeletingUser = false
+          })
+      }
+    },
+    addUpdateUser(user) {
+      if (!this.users) return
+      var index = this.users.find((u) => u.id === user.id)
+      if (index >= 0) {
+        this.users.splice(index, 1, user)
+      } else {
+        this.users.push(user)
+      }
+    },
+    userRemoved(user) {
+      this.users = this.users.filter((u) => u.id !== user.id)
+    },
+    init(attempts = 0) {
+      if (!this.$root.socket) {
+        if (attempts > 10) {
+          return console.error('Failed to setup socket listeners')
+        }
+        setTimeout(() => {
+          this.init(++attempts)
+        }, 250)
+        return
+      }
+      this.$root.socket.on('user_added', this.addUpdateUser)
+      this.$root.socket.on('user_updated', this.addUpdateUser)
+      this.$root.socket.on('user_removed', this.userRemoved)
     }
   },
   mounted() {
     this.loadUsers()
+    this.init()
+  },
+  beforeDestroy() {
+    if (this.$root.socket) {
+      this.$root.socket.off('user_added', this.newUserAdded)
+      this.$root.socket.off('user_updated', this.userUpdated)
+    }
   }
 }
 </script>

client/store/user.js

@@ -12,6 +12,7 @@ export const state = () => ({
 })
 
 export const getters = {
+  getIsRoot: (state) => state.user && state.user.type === 'root',
   getToken: (state) => {
     return state.user ? state.user.token : null
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "0.9.84-beta",
+  "version": "0.9.85-beta",
   "description": "Self-hosted audiobook server for managing and playing audiobooks.",
   "main": "index.js",
   "scripts": {

server/ApiController.js

@@ -1,5 +1,6 @@
 const express = require('express')
 const Logger = require('./Logger')
+const User = require('./User')
 const { isObject } = require('./utils/index')
 
 class ApiController {
@@ -33,10 +34,14 @@ class ApiController {
     this.router.patch('/match/:id', this.match.bind(this))
 
     this.router.get('/users', this.getUsers.bind(this))
+    this.router.post('/user', this.createUser.bind(this))
+    this.router.delete('/user/:id', this.deleteUser.bind(this))
     this.router.delete('/user/audiobook/:id', this.resetUserAudiobookProgress.bind(this))
     this.router.patch('/user/password', this.userChangePassword.bind(this))
     this.router.patch('/user/settings', this.userUpdateSettings.bind(this))
 
+
+
     this.router.post('/authorize', this.authorize.bind(this))
 
     this.router.get('/genres', this.getGenres.bind(this))
@@ -255,6 +260,53 @@ class ApiController {
     })
   }
 
+  async createUser(req, res) {
+    var account = req.body
+    account.id = (Math.trunc(Math.random() * 1000) + Date.now()).toString(36)
+    account.pash = await this.auth.hashPass(account.password)
+    delete account.password
+    account.token = await this.auth.generateAccessToken({ userId: account.id })
+    account.createdAt = Date.now()
+    var newUser = new User(account)
+    var success = await this.db.insertUser(newUser)
+    if (success) {
+      this.emitter('user_added', newUser)
+      res.json({
+        user: newUser.toJSONForBrowser()
+      })
+    } else {
+      res.json({
+        error: 'Failed to save new user'
+      })
+    }
+  }
+
+  async deleteUser(req, res) {
+    if (req.params.id === 'root') {
+      return res.sendStatus(500)
+    }
+    if (req.user.id === req.params.id) {
+      Logger.error('Attempting to delete themselves...')
+      return res.sendStatus(500)
+    }
+    var user = this.db.users.find(u => u.id === req.params.id)
+    if (!user) {
+      Logger.error('User not found')
+      return res.json({
+        error: 'User not found'
+      })
+    }
+
+    // Todo: check if user is logged in and cancel streams
+
+    var userJson = user.toJSONForBrowser()
+    await this.db.removeEntity('user', user.id)
+    this.emitter('user_removed', userJson)
+    res.json({
+      success: true
+    })
+  }
+
   getGenres(req, res) {
     res.json({
       genres: this.db.getGenres()

server/Auth.js

@@ -2,7 +2,6 @@ const bcrypt = require('bcryptjs')
 const jwt = require('jsonwebtoken')
 const Logger = require('./Logger')
 
-
 class Auth {
   constructor(db) {
     this.db = db
@@ -90,7 +89,7 @@ class Auth {
     var password = req.body.password || ''
     Logger.debug('Check Auth', username, !!password)
 
-    var user = this.users.find(u => u.id === username)
+    var user = this.users.find(u => u.username === username)
 
     if (!user) {
       return res.json({ error: 'User not found' })

server/Db.js

@@ -58,6 +58,7 @@ class Db {
       pash: '',
       stream: null,
       token,
+      isActive: true,
       createdAt: Date.now()
     })
   }
@@ -115,8 +116,10 @@ class Db {
     return this.usersDb.insert([user]).then((results) => {
       Logger.debug(`[DB] Inserted user ${results.inserted}`)
       this.users.push(user)
+      return true
     }).catch((error) => {
       Logger.error(`[DB] Insert user Failed ${error}`)
+      return false
     })
   }
 

server/User.js

@@ -6,6 +6,7 @@ class User {
     this.type = null
     this.stream = null
     this.token = null
+    this.isActive = true
     this.createdAt = null
     this.audiobooks = null
     this.settings = {}
@@ -34,6 +35,7 @@ class User {
       stream: this.stream,
       token: this.token,
       audiobooks: this.audiobooks,
+      isActive: this.isActive,
       createdAt: this.createdAt,
       settings: this.settings
     }
@@ -47,6 +49,7 @@ class User {
       stream: this.stream,
       token: this.token,
       audiobooks: this.audiobooks,
+      isActive: this.isActive,
       createdAt: this.createdAt,
       settings: this.settings
     }
@@ -57,10 +60,11 @@ class User {
     this.username = user.username
     this.pash = user.pash
     this.type = user.type
-    this.stream = user.stream
+    this.stream = user.stream || null
     this.token = user.token
     this.audiobooks = user.audiobooks || null
-    this.createdAt = user.createdAt
+    this.isActive = (user.isActive === undefined || user.id === 'root') ? true : !!user.isActive
+    this.createdAt = user.createdAt || Date.now()
     this.settings = user.settings || this.getDefaultUserSettings()
   }