Adding and deleting users

This commit is contained in:
advplyr 2021-08-27 07:01:47 -05:00
parent db0ecfb51b
commit 35808abdf6
15 changed files with 323 additions and 12 deletions

View File

@ -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'
},

View File

@ -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>

View File

@ -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">

View File

@ -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() {

View File

@ -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>

View File

@ -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>

View File

@ -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": {

View File

@ -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', {

View File

@ -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>

View File

@ -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
},

View File

@ -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": {

View File

@ -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()

View File

@ -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' })

View File

@ -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
})
}

View File

@ -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()
}