Add registration control, admin user management, and security hardening

- Registration auto-closes after first user; admin can toggle from /admin/users
- Admin user management view with user list and delete
- Password confirmation on registration form
- Password change in Settings (PUT /api/auth/password)
- Session cookie hardening: HttpOnly, SameSite=Lax, optional Secure flag
- Startup warning when SECRET_KEY is default
- Production deployment docs: reverse proxy, rate limiting, CSP headers
- Fix assist prompt to preserve markdown headings in target sections
- Simplify prod compose networking

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/AppHeader.vue

@@ -61,6 +61,7 @@ router.afterEach(() => {
         <router-link to="/tasks" class="nav-link">Tasks</router-link>
         <router-link to="/chat" class="nav-link">Chat</router-link>
         <router-link to="/settings" class="nav-link">Settings</router-link>
+        <router-link v-if="authStore.isAdmin" to="/admin/users" class="nav-link">Users</router-link>
         <span class="status-indicator" :class="statusClass" :title="statusLabel">
           <span class="status-dot"></span>
         </span>

frontend/src/router/index.ts

@@ -77,6 +77,11 @@ const router = createRouter({
       name: "settings",
       component: () => import("@/views/SettingsView.vue"),
     },
+    {
+      path: "/admin/users",
+      name: "admin-users",
+      component: () => import("@/views/UserManagementView.vue"),
+    },
   ],
 });
 

frontend/src/stores/auth.ts

@@ -7,6 +7,7 @@ export const useAuthStore = defineStore("auth", () => {
   const user = ref<User | null>(null);
   const loading = ref(true);
   const hasUsers = ref(true);
+  const registrationOpen = ref(false);
 
   const isAuthenticated = computed(() => user.value !== null);
   const isAdmin = computed(() => user.value?.role === "admin");
@@ -26,8 +27,10 @@ export const useAuthStore = defineStore("auth", () => {
     try {
       const data = await apiGet<AuthStatus>("/api/auth/status");
       hasUsers.value = data.has_users;
+      registrationOpen.value = data.registration_open;
     } catch {
       hasUsers.value = true;
+      registrationOpen.value = false;
     }
   }
 
@@ -52,6 +55,7 @@ export const useAuthStore = defineStore("auth", () => {
     user,
     loading,
     hasUsers,
+    registrationOpen,
     isAuthenticated,
     isAdmin,
     checkAuth,

frontend/src/types/auth.ts

@@ -8,4 +8,5 @@ export interface User {
 
 export interface AuthStatus {
   has_users: boolean;
+  registration_open: boolean;
 }

frontend/src/views/RegisterView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import AppLogo from "@/components/AppLogo.vue";
@@ -9,11 +9,30 @@ const authStore = useAuthStore();
 
 const username = ref("");
 const password = ref("");
+const confirmPassword = ref("");
 const email = ref("");
 const error = ref("");
 const submitting = ref(false);
+const checking = ref(true);
+
+const passwordMismatch = computed(
+  () => confirmPassword.value.length > 0 && password.value !== confirmPassword.value
+);
+
+const canSubmit = computed(
+  () => !submitting.value && !passwordMismatch.value && password.value.length >= 8
+);
+
+onMounted(async () => {
+  await authStore.checkHasUsers();
+  checking.value = false;
+});
 
 async function handleSubmit() {
+  if (passwordMismatch.value) {
+    error.value = "Passwords do not match";
+    return;
+  }
   error.value = "";
   submitting.value = true;
   try {
@@ -36,50 +55,77 @@ async function handleSubmit() {
   <main class="auth-page">
     <div class="auth-card">
       <div class="auth-brand"><AppLogo :size="32" /><h1>Create Account</h1></div>
-      <form @submit.prevent="handleSubmit">
-        <div class="field">
-          <label for="username">Username</label>
-          <input
-            id="username"
-            v-model="username"
-            type="text"
-            autocomplete="username"
-            required
-            class="input"
-          />
-        </div>
-        <div class="field">
-          <label for="email">Email (optional)</label>
-          <input
-            id="email"
-            v-model="email"
-            type="email"
-            autocomplete="email"
-            class="input"
-          />
-        </div>
-        <div class="field">
-          <label for="password">Password</label>
-          <input
-            id="password"
-            v-model="password"
-            type="password"
-            autocomplete="new-password"
-            required
-            minlength="8"
-            class="input"
-          />
-          <p class="field-hint">Must be at least 8 characters</p>
-        </div>
-        <p v-if="error" class="error-msg">{{ error }}</p>
-        <button type="submit" class="btn-submit" :disabled="submitting">
-          {{ submitting ? "Creating account..." : "Create Account" }}
-        </button>
-      </form>
-      <p class="auth-footer">
-        Already have an account?
-        <router-link to="/login">Sign in</router-link>
-      </p>
+
+      <div v-if="checking" class="loading-msg">Checking registration status...</div>
+
+      <div v-else-if="!authStore.registrationOpen" class="closed-msg">
+        <p>Registration is currently closed.</p>
+        <p>Contact an administrator to get an account.</p>
+        <p class="auth-footer">
+          Already have an account?
+          <router-link to="/login">Sign in</router-link>
+        </p>
+      </div>
+
+      <template v-else>
+        <form @submit.prevent="handleSubmit">
+          <div class="field">
+            <label for="username">Username</label>
+            <input
+              id="username"
+              v-model="username"
+              type="text"
+              autocomplete="username"
+              required
+              class="input"
+            />
+          </div>
+          <div class="field">
+            <label for="email">Email (optional)</label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              autocomplete="email"
+              class="input"
+            />
+          </div>
+          <div class="field">
+            <label for="password">Password</label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              autocomplete="new-password"
+              required
+              minlength="8"
+              class="input"
+            />
+            <p class="field-hint">Must be at least 8 characters</p>
+          </div>
+          <div class="field">
+            <label for="confirm-password">Confirm Password</label>
+            <input
+              id="confirm-password"
+              v-model="confirmPassword"
+              type="password"
+              autocomplete="new-password"
+              required
+              class="input"
+              :class="{ 'input-error': passwordMismatch }"
+            />
+            <p v-if="passwordMismatch" class="error-hint">Passwords do not match</p>
+          </div>
+          <p v-if="error" class="error-msg">{{ error }}</p>
+          <button type="submit" class="btn-submit" :disabled="!canSubmit">
+            {{ submitting ? "Creating account..." : "Create Account" }}
+          </button>
+        </form>
+        <p class="auth-footer">
+          Already have an account?
+          <router-link to="/login">Sign in</router-link>
+        </p>
+      </template>
     </div>
   </main>
 </template>
@@ -111,6 +157,21 @@ async function handleSubmit() {
   margin: 0;
   text-align: center;
 }
+.loading-msg {
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  padding: 1rem 0;
+}
+.closed-msg {
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 0.95rem;
+  padding: 0.5rem 0;
+}
+.closed-msg p {
+  margin: 0.5rem 0;
+}
 .field {
   margin-bottom: 1rem;
 }
@@ -134,11 +195,22 @@ async function handleSubmit() {
   outline: none;
   border-color: var(--color-primary);
 }
+.input-error {
+  border-color: var(--color-danger);
+}
+.input-error:focus {
+  border-color: var(--color-danger);
+}
 .field-hint {
   margin: 0.35rem 0 0;
   font-size: 0.8rem;
   color: var(--color-text-muted);
 }
+.error-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-danger);
+}
 .error-msg {
   color: var(--color-danger);
   font-size: 0.9rem;

frontend/src/views/SettingsView.vue

@@ -3,12 +3,17 @@ import { ref, computed, onMounted } from "vue";
 import { useSettingsStore } from "@/stores/settings";
 import { useAuthStore } from "@/stores/auth";
 import { useToastStore } from "@/stores/toast";
+import { apiPut } from "@/api/client";
 import type { ModelInfo } from "@/types/settings";
 
 const store = useSettingsStore();
 const authStore = useAuthStore();
 const toastStore = useToastStore();
 const assistantName = ref("");
+const currentPassword = ref("");
+const newPassword = ref("");
+const confirmNewPassword = ref("");
+const changingPassword = ref(false);
 const saving = ref(false);
 const saved = ref(false);
 const pullProgress = ref<{ model: string; percent: number } | null>(null);
@@ -190,6 +195,33 @@ onMounted(async () => {
   store.fetchInstalledModels();
 });
 
+async function changePassword() {
+  if (newPassword.value !== confirmNewPassword.value) {
+    toastStore.show("New passwords do not match", "error");
+    return;
+  }
+  changingPassword.value = true;
+  try {
+    await apiPut("/api/auth/password", {
+      current_password: currentPassword.value,
+      new_password: newPassword.value,
+    });
+    toastStore.show("Password changed successfully");
+    currentPassword.value = "";
+    newPassword.value = "";
+    confirmNewPassword.value = "";
+  } catch (e: unknown) {
+    if (e && typeof e === "object" && "body" in e) {
+      const body = (e as { body?: { error?: string } }).body;
+      toastStore.show(body?.error || "Failed to change password", "error");
+    } else {
+      toastStore.show("Failed to change password", "error");
+    }
+  } finally {
+    changingPassword.value = false;
+  }
+}
+
 async function saveAssistant() {
   saving.value = true;
   saved.value = false;
@@ -345,6 +377,54 @@ async function handleRestoreFile(event: Event) {
       </div>
     </section>
 
+    <section class="settings-section">
+      <h2>Change Password</h2>
+      <div class="field">
+        <label for="current-password">Current Password</label>
+        <input
+          id="current-password"
+          v-model="currentPassword"
+          type="password"
+          autocomplete="current-password"
+          class="input"
+        />
+      </div>
+      <div class="field">
+        <label for="new-password">New Password</label>
+        <input
+          id="new-password"
+          v-model="newPassword"
+          type="password"
+          autocomplete="new-password"
+          class="input"
+        />
+        <p class="field-hint">Must be at least 8 characters</p>
+      </div>
+      <div class="field">
+        <label for="confirm-new-password">Confirm New Password</label>
+        <input
+          id="confirm-new-password"
+          v-model="confirmNewPassword"
+          type="password"
+          autocomplete="new-password"
+          class="input"
+          :class="{ 'input-error': confirmNewPassword && newPassword !== confirmNewPassword }"
+        />
+        <p v-if="confirmNewPassword && newPassword !== confirmNewPassword" class="error-hint">
+          Passwords do not match
+        </p>
+      </div>
+      <div class="actions">
+        <button
+          class="btn-save"
+          @click="changePassword"
+          :disabled="changingPassword || !currentPassword || newPassword.length < 8 || newPassword !== confirmNewPassword"
+        >
+          {{ changingPassword ? "Changing..." : "Change Password" }}
+        </button>
+      </div>
+    </section>
+
     <section class="settings-section">
       <h2>Model</h2>
       <p class="section-desc">
@@ -538,6 +618,17 @@ async function handleRestoreFile(event: Event) {
   font-size: 0.9rem;
   font-weight: 600;
 }
+.input-error {
+  border-color: var(--color-danger);
+}
+.input-error:focus {
+  border-color: var(--color-danger);
+}
+.error-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-danger);
+}
 
 /* Model list */
 .model-list {

frontend/src/views/UserManagementView.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { apiGet, apiPut, apiDelete } from "@/api/client";
+import { useAuthStore } from "@/stores/auth";
+import { useToastStore } from "@/stores/toast";
+import type { User } from "@/types/auth";
+
+const authStore = useAuthStore();
+const toastStore = useToastStore();
+
+const users = ref<User[]>([]);
+const registrationOpen = ref(false);
+const loading = ref(true);
+const toggling = ref(false);
+const confirmDeleteId = ref<number | null>(null);
+const deleting = ref<number | null>(null);
+
+onMounted(async () => {
+  await Promise.all([fetchUsers(), fetchRegistration()]);
+  loading.value = false;
+});
+
+async function fetchUsers() {
+  try {
+    const data = await apiGet<{ users: User[] }>("/api/admin/users");
+    users.value = data.users;
+  } catch {
+    toastStore.show("Failed to load users", "error");
+  }
+}
+
+async function fetchRegistration() {
+  try {
+    const data = await apiGet<{ open: boolean }>("/api/admin/registration");
+    registrationOpen.value = data.open;
+  } catch {
+    // Ignore — will default to false
+  }
+}
+
+async function toggleRegistration() {
+  toggling.value = true;
+  try {
+    const data = await apiPut<{ open: boolean }>("/api/admin/registration", {
+      open: !registrationOpen.value,
+    });
+    registrationOpen.value = data.open;
+    toastStore.show(data.open ? "Registration opened" : "Registration closed");
+  } catch {
+    toastStore.show("Failed to update registration setting", "error");
+  } finally {
+    toggling.value = false;
+  }
+}
+
+function confirmDelete(userId: number) {
+  if (confirmDeleteId.value === userId) {
+    deleteUser(userId);
+  } else {
+    confirmDeleteId.value = userId;
+  }
+}
+
+function cancelDelete() {
+  confirmDeleteId.value = null;
+}
+
+async function deleteUser(userId: number) {
+  confirmDeleteId.value = null;
+  deleting.value = userId;
+  try {
+    await apiDelete(`/api/admin/users/${userId}`);
+    users.value = users.value.filter((u) => u.id !== userId);
+    toastStore.show("User deleted");
+  } catch (e: unknown) {
+    if (e && typeof e === "object" && "body" in e) {
+      const body = (e as { body?: { error?: string } }).body;
+      toastStore.show(body?.error || "Failed to delete user", "error");
+    } else {
+      toastStore.show("Failed to delete user", "error");
+    }
+  } finally {
+    deleting.value = null;
+  }
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+</script>
+
+<template>
+  <main class="users-page">
+    <h1>User Management</h1>
+
+    <section class="settings-section">
+      <h2>Registration</h2>
+      <div class="registration-row">
+        <div class="registration-info">
+          <p class="registration-status">
+            Registration is currently
+            <strong :class="registrationOpen ? 'text-success' : 'text-muted'">
+              {{ registrationOpen ? "open" : "closed" }}
+            </strong>
+          </p>
+          <p class="field-hint">
+            When closed, new users can only be added by an administrator.
+          </p>
+        </div>
+        <button
+          class="btn-toggle"
+          :class="registrationOpen ? 'btn-toggle-close' : 'btn-toggle-open'"
+          @click="toggleRegistration"
+          :disabled="toggling"
+        >
+          {{ toggling ? "Updating..." : registrationOpen ? "Close Registration" : "Open Registration" }}
+        </button>
+      </div>
+    </section>
+
+    <section class="settings-section">
+      <h2>Users</h2>
+
+      <div v-if="loading" class="loading-msg">Loading users...</div>
+
+      <div v-else-if="users.length === 0" class="empty-msg">No users found.</div>
+
+      <table v-else class="users-table">
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th class="hide-mobile">Email</th>
+            <th>Role</th>
+            <th class="hide-mobile">Joined</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="u in users" :key="u.id">
+            <td class="cell-username">{{ u.username }}</td>
+            <td class="hide-mobile cell-email">{{ u.email || "—" }}</td>
+            <td>
+              <span class="role-badge" :class="u.role === 'admin' ? 'role-admin' : 'role-user'">
+                {{ u.role }}
+              </span>
+            </td>
+            <td class="hide-mobile cell-date">{{ formatDate(u.created_at) }}</td>
+            <td class="cell-actions">
+              <template v-if="u.id === authStore.user?.id">
+                <span class="you-label">You</span>
+              </template>
+              <template v-else-if="confirmDeleteId === u.id">
+                <button
+                  class="btn-confirm-delete"
+                  @click="confirmDelete(u.id)"
+                  :disabled="deleting !== null"
+                >
+                  {{ deleting === u.id ? "Deleting..." : "Confirm" }}
+                </button>
+                <button class="btn-cancel-delete" @click="cancelDelete">Cancel</button>
+              </template>
+              <template v-else>
+                <button
+                  class="btn-delete"
+                  @click="confirmDelete(u.id)"
+                  :disabled="deleting !== null"
+                >
+                  Delete
+                </button>
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.users-page {
+  max-width: 960px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+.users-page h1 {
+  margin: 0 0 1.5rem;
+}
+.settings-section {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+.settings-section h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+}
+
+/* Registration toggle */
+.registration-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.registration-info {
+  flex: 1;
+}
+.registration-status {
+  margin: 0;
+  font-size: 0.95rem;
+}
+.text-success {
+  color: var(--color-success);
+}
+.text-muted {
+  color: var(--color-text-muted);
+}
+.field-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+.btn-toggle {
+  padding: 0.45rem 1rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.btn-toggle:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btn-toggle-open {
+  background: var(--color-primary);
+  color: #fff;
+}
+.btn-toggle-open:hover:not(:disabled) {
+  opacity: 0.9;
+}
+.btn-toggle-close {
+  background: var(--color-bg-secondary);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.btn-toggle-close:hover:not(:disabled) {
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+/* Users table */
+.loading-msg,
+.empty-msg {
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  padding: 1rem 0;
+}
+.users-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.users-table th {
+  text-align: left;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.users-table td {
+  padding: 0.65rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.9rem;
+}
+.users-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.cell-username {
+  font-weight: 600;
+}
+.cell-email {
+  color: var(--color-text-secondary);
+}
+.cell-date {
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+}
+.cell-actions {
+  white-space: nowrap;
+}
+
+/* Role badges */
+.role-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--radius-sm);
+}
+.role-admin {
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+.role-user {
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+}
+
+/* Action buttons */
+.you-label {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+.btn-delete {
+  padding: 0.25rem 0.6rem;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.btn-delete:hover:not(:disabled) {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+.btn-delete:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.btn-confirm-delete {
+  padding: 0.25rem 0.6rem;
+  background: var(--color-danger);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
+.btn-confirm-delete:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+.btn-confirm-delete:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.btn-cancel-delete {
+  padding: 0.25rem 0.6rem;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.btn-cancel-delete:hover {
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+
+@media (max-width: 768px) {
+  .registration-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .btn-toggle {
+    width: 100%;
+  }
+}
+</style>