Implement web-based user management / admin setup. (#8)

Implement Admin Settings dialog for user management and toggling the public server flag, not needing CLI for maintenance anymore.
2025-10-01 01:10:33 +01:00
parent bf604334bd
commit cfc80d2462
7 changed files with 427 additions and 2 deletions
--- a/cista/auth.py
+++ b/cista/auth.py
@@ -10,6 +10,7 @@ from sanic import Blueprint, html, json, redirect
 from sanic.exceptions import BadRequest, Forbidden, Unauthorized

 from cista import config, session
+from cista.util import pwgen

 _argon = argon2.PasswordHasher()
 _droppyhash = re.compile(r"^([a-f0-9]{64})\$([a-f0-9]{8})$")
@@ -191,3 +192,91 @@ async def change_password(request):
        res = json({"message": "Password updated"})
    session.create(res, username)
    return res
+
+
+@bp.get("/users")
+async def list_users(request):
+    verify(request, privileged=True)
+    users = []
+    for name, user in config.config.users.items():
+        users.append(
+            {
+                "username": name,
+                "privileged": user.privileged,
+                "lastSeen": user.lastSeen,
+            }
+        )
+    return json({"users": users})
+
+
+@bp.post("/users")
+async def create_user(request):
+    verify(request, privileged=True)
+    try:
+        if request.headers.content_type == "application/json":
+            username = request.json["username"]
+            password = request.json.get("password")
+            privileged = request.json.get("privileged", False)
+        else:
+            username = request.form["username"][0]
+            password = request.form.get("password", [None])[0]
+            privileged = request.form.get("privileged", ["false"])[0].lower() == "true"
+        if not username or not username.isidentifier():
+            raise ValueError("Invalid username")
+    except (KeyError, ValueError) as e:
+        raise BadRequest(str(e)) from e
+    if username in config.config.users:
+        raise BadRequest("User already exists")
+    if not password:
+        password = pwgen.generate()
+    changes = {"privileged": privileged}
+    changes["hash"] = _argon.hash(_pwnorm(password))
+    try:
+        config.update_user(username, changes)
+    except Exception as e:
+        raise BadRequest(str(e)) from e
+    return json({"message": f"User {username} created", "password": password})
+
+
+@bp.put("/users/<username>")
+async def update_user(request, username):
+    verify(request, privileged=True)
+    try:
+        if request.headers.content_type == "application/json":
+            changes = request.json
+        else:
+            changes = {}
+            if "password" in request.form:
+                changes["password"] = request.form["password"][0]
+            if "privileged" in request.form:
+                changes["privileged"] = request.form["privileged"][0].lower() == "true"
+    except KeyError as e:
+        raise BadRequest("Missing fields") from e
+    password_response = None
+    if "password" in changes:
+        if changes["password"] == "":
+            changes["password"] = pwgen.generate()
+        password_response = changes["password"]
+        changes["hash"] = _argon.hash(_pwnorm(changes["password"]))
+        del changes["password"]
+    if not changes:
+        return json({"message": "No changes"})
+    try:
+        config.update_user(username, changes)
+    except Exception as e:
+        raise BadRequest(str(e)) from e
+    response = {"message": f"User {username} updated"}
+    if password_response:
+        response["password"] = password_response
+    return json(response)
+
+
+@bp.put("/config/public")
+async def update_public(request):
+    verify(request, privileged=True)
+    try:
+        public = request.json["public"]
+    except KeyError:
+        raise BadRequest("Missing public field") from None
+    config.update_config({"public": public})
+    return json({"message": "Public setting updated"})
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,7 @@
 <template>
  <LoginModal />
  <SettingsModal />
+  <UserManagementModal />
  <header>
    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
      <HeaderSelected :path="path.pathList" />
@@ -28,6 +29,7 @@ import { computed } from 'vue'
 import Router from '@/router/index'
 import type { SortOrder } from './utils/docsort'
 import type SettingsModalVue from './components/SettingsModal.vue'
+import UserManagementModal from './components/UserManagementModal.vue'

 interface Path {
  path: string
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -73,7 +73,10 @@ watchEffect(() => {
 const settingsMenu = (e: Event) => {
  // show the context menu
  const items = []
-  items.push({ label: 'Settings', onClick: () => { store.dialog = 'settings' }})
+  items.push({ label: 'Change Password', onClick: () => { store.dialog = 'settings' }})
+  if (store.user.privileged) {
+    items.push({ label: 'Admin Settings', onClick: () => { store.dialog = 'usermgmt' }})
+  }
  if (store.user.isLoggedIn) {
    items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
  } else {
--- a/frontend/src/components/UserManagementModal.vue
+++ b/frontend/src/components/UserManagementModal.vue
@@ -0,0 +1,250 @@
+<template>
+  <ModalDialog name=usermgmt title="Admin Settings">
+    <div v-if="loading" class="loading">Loading...</div>
+    <div v-else>
+      <h3>Server Settings</h3>
+      <div class="form-row">
+        <input
+          id="publicServer"
+          type="checkbox"
+          v-model="serverSettings.public"
+          @change="updateServerSettings"
+        />
+        <label for="publicServer">Publicly accessible without any user account.</label>
+      </div>
+      <h3>Users</h3>
+      <button @click="addUser" class="button" title="Add new user">➕ Add User</button>
+      <div v-if="success" class="success-message">
+        {{ success }}
+        <button @click="copySuccess" class="button small" title="Copy to clipboard"><EFBFBD></button>
+      </div>
+      <table class="user-table">
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th>Admin</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="user in users" :key="user.username">
+            <td>{{ user.username }}</td>
+            <td>
+              <input
+                type="checkbox"
+                :checked="user.privileged"
+                @change="toggleAdmin(user, $event)"
+                :disabled="user.username === store.user.username"
+              />
+            </td>
+            <td>
+              <button @click="renameUser(user)" class="button small" title="Rename user">✏️</button>
+              <button @click="resetPassword(user)" class="button small" title="Reset password">🔑</button>
+              <button @click="deleteUserAction(user.username)" class="button small danger" :disabled="user.username === store.user.username" title="Delete user">🗑️</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h3 class="error-text">{{ error || '\u00A0' }}</h3>
+      <div class="dialog-buttons">
+        <button @click="close" class="button">Close</button>
+      </div>
+    </div>
+  </ModalDialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, watch } from 'vue'
+import { listUsers, createUser, updateUser, deleteUser, updatePublic } from '@/repositories/User'
+import type { ISimpleError } from '@/repositories/Client'
+import { useMainStore } from '@/stores/main'
+
+interface User {
+  username: string
+  privileged: boolean
+  lastSeen: number
+}
+
+const store = useMainStore()
+const loading = ref(true)
+const users = ref<User[]>([])
+const error = ref('')
+const success = ref('')
+const serverSettings = reactive({
+  public: false
+})
+
+const close = () => {
+  store.dialog = ''
+  error.value = ''
+  success.value = ''
+}
+
+const loadUsers = async () => {
+  try {
+    loading.value = true
+    const data = await listUsers()
+    users.value = data.users
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to load users'
+  } finally {
+    loading.value = false
+  }
+}
+
+const addUser = async () => {
+  const username = window.prompt('Enter username for new user:')
+  if (!username || !username.trim()) return
+  try {
+    error.value = ''
+    success.value = ''
+    const result = await createUser(username.trim(), undefined, false)
+    await loadUsers()
+    if (result.password) {
+      success.value = `User ${username.trim()} created. Password: ${result.password}`
+    }
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to add user'
+  }
+}
+
+const toggleAdmin = async (user: User, event: Event) => {
+  const target = event.target as HTMLInputElement
+  try {
+    error.value = ''
+    await updateUser(user.username, { privileged: target.checked })
+    user.privileged = target.checked
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to update user'
+    target.checked = user.privileged // revert
+  }
+}
+
+const renameUser = async (user: User) => {
+  const newName = window.prompt('Enter new username:', user.username)
+  if (!newName || !newName.trim() || newName.trim() === user.username) return
+  // For rename, we need to create new user and delete old, or have a rename endpoint
+  // Since no rename endpoint, perhaps delete and create
+  try {
+    error.value = ''
+    success.value = ''
+    const result = await createUser(newName.trim(), undefined, user.privileged)
+    await deleteUser(user.username)
+    await loadUsers()
+    if (result.password) {
+      success.value = `User renamed to ${newName.trim()}. New password: ${result.password}`
+    }
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to rename user'
+  }
+}
+
+const resetPassword = async (user: User) => {
+  if (!confirm(`Reset password for ${user.username}? A new password will be generated.`)) return
+  try {
+    error.value = ''
+    success.value = ''
+    const result = await updateUser(user.username, { password: "" })
+    if (result.password) {
+      success.value = `Password reset for ${user.username}. New password: ${result.password}`
+    }
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to reset password'
+  }
+}
+
+const deleteUserAction = async (username: string) => {
+  if (!confirm(`Delete user ${username}?`)) return
+  try {
+    error.value = ''
+    await deleteUser(username)
+    await loadUsers()
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to delete user'
+  }
+}
+
+const copySuccess = async () => {
+  const passwordMatch = success.value.match(/Password: (.+)/)
+  if (passwordMatch) {
+    await navigator.clipboard.writeText(passwordMatch[1])
+    // Maybe flash or something, but for now just copy
+  }
+}
+
+const updateServerSettings = async () => {
+  try {
+    error.value = ''
+    success.value = ''
+    await updatePublic(serverSettings.public)
+    // Update store
+    store.server.public = serverSettings.public
+    success.value = 'Server settings updated'
+  } catch (e) {
+    const httpError = e as ISimpleError
+    error.value = httpError.message || 'Failed to update settings'
+  }
+}
+
+onMounted(() => {
+  serverSettings.public = store.server.public
+  loadUsers()
+})
+
+watch(() => store.server.public, (newVal) => {
+  serverSettings.public = newVal
+})
+</script>
+
+<style scoped>
+.user-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
+}
+.user-table th, .user-table td {
+  border: 1px solid var(--border-color);
+  padding: 0.5rem;
+  text-align: left;
+}
+.user-table th {
+  background: var(--soft-color);
+}
+.button.small {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  margin-right: 0.25rem;
+}
+.button.danger {
+  background: var(--red-color);
+  color: white;
+}
+.button.danger:hover {
+  background: #d00;
+}
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.form-row label {
+  min-width: 100px;
+}
+.success-message {
+  background: var(--accent-color);
+  color: white;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
--- a/frontend/src/repositories/Client.ts
+++ b/frontend/src/repositories/Client.ts
@@ -1,4 +1,20 @@
 class ClientClass {
+  async get(url: string): Promise<any> {
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        accept: 'application/json'
+      }
+    })
+    let msg
+    try {
+      msg = await res.json()
+    } catch (e) {
+      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
+    }
+    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
+    return msg
+  }
  async post(url: string, data?: Record<string, any>): Promise<any> {
    const res = await fetch(url, {
      method: 'POST',
@@ -17,6 +33,40 @@ class ClientClass {
    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
    return msg
  }
+  async put(url: string, data?: Record<string, any>): Promise<any> {
+    const res = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json'
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined
+    })
+    let msg
+    try {
+      msg = await res.json()
+    } catch (e) {
+      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
+    }
+    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
+    return msg
+  }
+  async delete(url: string): Promise<any> {
+    const res = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        accept: 'application/json'
+      }
+    })
+    let msg
+    try {
+      msg = await res.json()
+    } catch (e) {
+      throw new SimpleError(res.status, `🛑 ${res.status} ${res.statusText}`)
+    }
+    if ('error' in msg) throw new SimpleError(msg.error.code, msg.error.message)
+    return msg
+  }
 }

 export const Client = new ClientClass()
--- a/frontend/src/repositories/User.ts
+++ b/frontend/src/repositories/User.ts
@@ -24,3 +24,34 @@ export async function changePassword(username: string, passwordChange: string, p
  })
  return data
 }
+
+export const url_users = '/users'
+
+export async function listUsers() {
+  const data = await Client.get(url_users)
+  return data
+}
+
+export async function createUser(username: string, password?: string, privileged?: boolean) {
+  const data = await Client.post(url_users, {
+    username,
+    password,
+    privileged
+  })
+  return data
+}
+
+export async function updateUser(username: string, changes: { password?: string, privileged?: boolean }) {
+  const data = await Client.put(`${url_users}/${username}`, changes)
+  return data
+}
+
+export async function deleteUser(username: string) {
+  const data = await Client.delete(`${url_users}/${username}`)
+  return data
+}
+
+export async function updatePublic(publicFlag: boolean) {
+  const data = await Client.put('/config/public', { public: publicFlag })
+  return data
+}
--- a/frontend/src/stores/main.ts
+++ b/frontend/src/stores/main.ts
@@ -18,7 +18,7 @@ export const useMainStore = defineStore({
    connected: false,
    cursor: '' as string,
    server: {} as Record<string, any>,
-    dialog: '' as '' | 'login' | 'settings',
+    dialog: '' as '' | 'login' | 'settings' | 'usermgmt',
    uprogress: {} as any,
    dprogress: {} as any,
    prefs: {