Reset password and users table on settings page

client/pages/account.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="w-full h-full p-8">
+    <div class="w-full max-w-2xl mx-auto">
+      <h1 class="text-2xl">Account</h1>
+
+      <div class="my-4">
+        <div class="flex -mx-2">
+          <div class="w-2/3 px-2">
+            <ui-text-input-with-label disabled :value="username" label="Username" />
+          </div>
+          <div class="w-1/3 px-2">
+            <ui-text-input-with-label disabled :value="usertype" label="Account Type" />
+          </div>
+        </div>
+
+        <div class="w-full h-px bg-primary my-4" />
+
+        <p class="mb-4 text-lg">Change Password</p>
+        <form @submit.prevent="submitChangePassword">
+          <ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" label="Password" class="my-2" />
+          <ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" label="New Password" class="my-2" />
+          <ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" label="Confirm Password" class="my-2" />
+          <div class="flex items-center py-2">
+            <p v-if="isRoot" class="text-error py-2 text-xs">* Root user is the only user that can have an empty password</p>
+            <div class="flex-grow" />
+            <ui-btn type="submit" :loading="changingPassword" color="success">Submit</ui-btn>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      password: null,
+      newPassword: null,
+      confirmPassword: null,
+      changingPassword: false
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user || null
+    },
+    username() {
+      return this.user.username
+    },
+    usertype() {
+      return this.user.type
+    },
+    isRoot() {
+      return this.usertype === 'root'
+    }
+  },
+  methods: {
+    resetForm() {
+      this.password = null
+      this.newPassword = null
+      this.confirmPassword = null
+    },
+    submitChangePassword() {
+      if (this.newPassword !== this.confirmPassword) {
+        return this.$toast.error('New password and confirm password do not match')
+      }
+      this.changingPassword = true
+      this.$axios
+        .$patch('/api/user/password', {
+          password: this.password,
+          newPassword: this.newPassword
+        })
+        .then((res) => {
+          if (res.success) {
+            this.$toast.success('Password Changed Successfully')
+            this.resetForm()
+          } else {
+            this.$toast.error(res.error || 'Unknown Error')
+          }
+          this.changingPassword = false
+        })
+        .catch((error) => {
+          console.error(error)
+          this.$toast.error('Api call failed')
+          this.changingPassword = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

client/pages/config/index.vue

@@ -1,10 +1,29 @@
 <template>
   <div class="page p-6" :class="streamAudiobook ? 'streaming' : ''">
     <div class="w-full max-w-4xl mx-auto">
-      <h1 class="text-2xl mb-2">Config</h1>
+      <div class="flex items-center mb-2">
+        <h1 class="text-2xl">Users</h1>
+        <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
+          <span class="material-icons" style="font-size: 1.4rem">add</span>
+        </div>
+        <!-- <ui-btn small :padding-x="4" class="h-8">Create User</ui-btn> -->
+      </div>
       <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
-      <div class="p-4 text-center h-20">
-        <p>Nothing much here yet...</p>
+      <div class="p-4 text-center">
+        <table id="accounts" class="mb-8">
+          <tr>
+            <th>Username</th>
+            <th>Account Type</th>
+            <th style="width: 200px">Created At</th>
+          </tr>
+          <tr v-for="user in users" :key="user.id">
+            <td>{{ user.username }}</td>
+            <td>{{ user.type }}</td>
+            <td class="text-sm font-mono">
+              {{ new Date(user.createdAt).toISOString() }}
+            </td>
+          </tr>
+        </table>
       </div>
       <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
       <div class="flex items-center py-4 mb-8">
@@ -16,7 +35,7 @@
       <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
 
       <div class="flex items-center py-4">
-        <ui-btn color="error" small :padding-x="4" :loading="isResettingAudiobooks" @click="resetAudiobooks">Reset All Audiobooks</ui-btn>
+        <ui-btn color="bg" small :padding-x="4" :loading="isResettingAudiobooks" @click="resetAudiobooks">Reset All Audiobooks</ui-btn>
       </div>
 
       <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
@@ -41,7 +60,8 @@
 export default {
   data() {
     return {
-      isResettingAudiobooks: false
+      isResettingAudiobooks: false,
+      users: null
     }
   },
   computed: {
@@ -53,6 +73,19 @@ export default {
     scan() {
       this.$root.socket.emit('scan')
     },
+    clickAddUser() {
+      this.$toast.info('Under Construction: User management coming soon.')
+    },
+    loadUsers() {
+      this.$axios
+        .$get('/api/users')
+        .then((users) => {
+          this.users = users
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+        })
+    },
     resetAudiobooks() {
       if (confirm('WARNING! This action will remove all audiobooks from the database including any updates or matches you have made. This does not do anything to your actual files. Shall we continue?')) {
         this.isResettingAudiobooks = true
@@ -70,6 +103,39 @@ export default {
       }
     }
   },
-  mounted() {}
+  mounted() {
+    this.loadUsers()
+  }
 }
-</script>
+</script>
+
+<style>
+#accounts {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+#accounts td,
+#accounts th {
+  border: 1px solid #2e2e2e;
+  padding: 8px 8px;
+  text-align: left;
+}
+
+#accounts tr:nth-child(even) {
+  background-color: #3a3a3a;
+}
+
+#accounts tr:hover {
+  background-color: #444;
+}
+
+#accounts th {
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #333;
+}
+</style>