refactor(09-05): CODE-09 purge — Phase 9 files (WHAT comments removed)
Frontend: AdminLayout, AdminSidebar, AdminOverviewView, AdminUsersView, AdminQuotasView, AdminAiView, AdminAuditView, router/index.js, LoginView, tailwind.config.js, api/admin.js — WHAT labels stripped; WHY constraints preserved (D-16 anchors, security notes, api_key write-only invariant, router guard rationale, D-08/D-09/D-10 decision refs, fetchWithRetry reason). Backend: overview.py was already clean (no WHAT comments present). Frontend: 137 tests pass, build succeeds. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
3b639b7a72
commit
7ef65de046
@@ -1,10 +1,3 @@
|
||||
/**
|
||||
* Admin API — user management, quota, AI config, audit log, daily exports.
|
||||
*
|
||||
* Consumers: AdminUsersView.vue, AdminQuotasView.vue, AdminAiView.vue,
|
||||
* AdminAuditView.vue
|
||||
*/
|
||||
|
||||
import { request, fetchWithRetry } from './utils.js'
|
||||
|
||||
export function adminListUsers() {
|
||||
@@ -104,17 +97,8 @@ export function adminListAuditLog({ start, end, user_handle, event_type, page =
|
||||
return request(`/api/admin/audit-log?${params}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Export the audit log as a CSV file using fetch + Blob URL.
|
||||
*
|
||||
* Unlike window.location.href, this sends the Authorization Bearer header so
|
||||
* the endpoint can authenticate the request (D-13, T-06.2-04-03).
|
||||
*
|
||||
* Refactored to use fetchWithRetry() — the retry boilerplate is consolidated
|
||||
* in utils.js (CODE-08).
|
||||
*
|
||||
* Must NOT call res.json() — CSV is text/csv.
|
||||
*/
|
||||
// Unlike window.location.href, fetchWithRetry sends the Authorization Bearer header so
|
||||
// the endpoint can authenticate. Must NOT call res.json() — CSV is text/csv.
|
||||
export async function adminExportAuditLogCsv(params = {}) {
|
||||
const searchParams = new URLSearchParams({ format: 'csv' })
|
||||
if (params.start) searchParams.set('start', params.start)
|
||||
@@ -145,14 +129,7 @@ export async function getAdminOverview() {
|
||||
return request('/api/admin/overview')
|
||||
}
|
||||
|
||||
/**
|
||||
* Download a specific Celery daily audit export file from MinIO using fetch + Blob URL.
|
||||
*
|
||||
* Uses fetchWithRetry() to send the Authorization Bearer header (D-17, T-06.2-04-03).
|
||||
* Refactored to use fetchWithRetry() — retry logic consolidated in utils.js (CODE-08).
|
||||
*
|
||||
* @param {string} date — YYYY-MM-DD format date string
|
||||
*/
|
||||
// Uses fetchWithRetry() to send the Authorization Bearer header (D-17, T-06.2-04-03).
|
||||
export async function adminDownloadDailyExport(date) {
|
||||
const res = await fetchWithRetry(`/api/admin/audit-log/daily-exports/${date}`)
|
||||
if (!res.ok) throw new Error(`Download failed: ${res.status}`)
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full shrink-0">
|
||||
<!-- Logo -->
|
||||
<div class="px-6 py-5 border-b border-gray-100">
|
||||
<h1 class="text-lg font-bold text-indigo-600 tracking-tight">DocuVault</h1>
|
||||
<p class="text-xs text-indigo-500 font-semibold mt-0.5">Admin</p>
|
||||
</div>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="flex-1 px-3 py-4 overflow-y-auto">
|
||||
<!-- Overview -->
|
||||
<router-link
|
||||
to="/admin"
|
||||
class="nav-link"
|
||||
@@ -21,7 +18,6 @@
|
||||
Overview
|
||||
</router-link>
|
||||
|
||||
<!-- Users -->
|
||||
<router-link
|
||||
to="/admin/users"
|
||||
class="nav-link"
|
||||
@@ -34,7 +30,6 @@
|
||||
Users
|
||||
</router-link>
|
||||
|
||||
<!-- Quotas -->
|
||||
<router-link
|
||||
to="/admin/quotas"
|
||||
class="nav-link"
|
||||
@@ -47,7 +42,6 @@
|
||||
Quotas
|
||||
</router-link>
|
||||
|
||||
<!-- AI Config -->
|
||||
<router-link
|
||||
to="/admin/ai"
|
||||
class="nav-link"
|
||||
@@ -60,7 +54,6 @@
|
||||
AI Config
|
||||
</router-link>
|
||||
|
||||
<!-- Audit Log -->
|
||||
<router-link
|
||||
to="/admin/audit"
|
||||
class="nav-link"
|
||||
@@ -74,7 +67,6 @@
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<!-- User identity footer -->
|
||||
<div class="px-3 py-4 border-t border-gray-100">
|
||||
<div v-if="authStore.user" class="flex items-center gap-3 px-4 py-3 border-t border-gray-100 mt-2 -mx-3">
|
||||
<div class="bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-full w-8 h-8 flex items-center justify-center shrink-0">
|
||||
|
||||
@@ -15,7 +15,6 @@ const routes = [
|
||||
{ path: '/document/:id', component: DocumentView },
|
||||
{ path: '/settings', component: SettingsView },
|
||||
|
||||
// Phase 2 — public auth routes (no guard)
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('../views/auth/LoginView.vue'),
|
||||
@@ -37,7 +36,6 @@ const routes = [
|
||||
meta: { public: true, layout: 'auth' },
|
||||
},
|
||||
|
||||
// Phase 2 — authenticated routes
|
||||
{ path: '/account', redirect: '/settings' },
|
||||
|
||||
// Admin panel — standalone route subtree with AdminLayout as the route component.
|
||||
@@ -56,7 +54,6 @@ const routes = [
|
||||
],
|
||||
},
|
||||
|
||||
// Cloud storage overview and folder browser
|
||||
{
|
||||
path: '/cloud',
|
||||
name: 'cloud',
|
||||
@@ -70,7 +67,6 @@ const routes = [
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
|
||||
// Phase 4 — folder and sharing routes
|
||||
{
|
||||
path: '/folders/:folderId',
|
||||
name: 'folder',
|
||||
@@ -96,7 +92,6 @@ const router = createRouter({
|
||||
router.beforeEach(async (to) => {
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// Step 1: ensure access token is present for non-public routes.
|
||||
if (!to.meta.public && !authStore.accessToken) {
|
||||
try {
|
||||
await authStore.refresh()
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- ── System AI Providers (Global) ───────────────────────────────────── -->
|
||||
<section class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-sm font-semibold text-gray-900">System AI Providers (Global)</h2>
|
||||
@@ -9,7 +8,6 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading spinner -->
|
||||
<div v-if="loadingSystem" class="p-6 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
@@ -17,19 +15,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System error banner -->
|
||||
<div v-if="systemError" class="mx-6 mt-4 px-4 py-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
{{ systemError }}
|
||||
</div>
|
||||
|
||||
<!-- Provider accordion list -->
|
||||
<div v-if="!loadingSystem" class="divide-y divide-gray-100">
|
||||
<div
|
||||
v-for="prov in systemProviders"
|
||||
:key="prov.provider_id"
|
||||
:class="['transition-colors', prov.is_active ? 'border-l-4 border-l-green-500' : '']"
|
||||
>
|
||||
<!-- Accordion header -->
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-3 text-left hover:bg-gray-50 transition-colors"
|
||||
@click="toggleProvider(prov.provider_id)"
|
||||
@@ -49,9 +44,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Accordion body -->
|
||||
<div v-if="openProviderId === prov.provider_id" class="px-6 pb-5 pt-2 bg-gray-50 space-y-3">
|
||||
<!-- API Key -->
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">API Key</label>
|
||||
<input
|
||||
@@ -63,7 +56,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Base URL -->
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">Base URL</label>
|
||||
<input
|
||||
@@ -74,7 +66,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Model name — searchable dropdown populated from provider's /models endpoint -->
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">Model Name</label>
|
||||
<SearchableModelSelect
|
||||
@@ -84,7 +75,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Context chars -->
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-600 mb-1">Context Characters</label>
|
||||
<input
|
||||
@@ -97,9 +87,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-2 pt-1">
|
||||
<!-- Set Active -->
|
||||
<button
|
||||
@click="saveSystemProvider(prov.provider_id, { activate: true })"
|
||||
:disabled="savingProvider === prov.provider_id || prov.is_active"
|
||||
@@ -108,7 +96,6 @@
|
||||
Set Active
|
||||
</button>
|
||||
|
||||
<!-- Save -->
|
||||
<button
|
||||
@click="saveSystemProvider(prov.provider_id)"
|
||||
:disabled="savingProvider === prov.provider_id"
|
||||
@@ -118,7 +105,6 @@
|
||||
{{ savingProvider === prov.provider_id ? 'Saving…' : 'Save' }}
|
||||
</button>
|
||||
|
||||
<!-- Test Connection -->
|
||||
<button
|
||||
@click="runTestConnection(prov.provider_id)"
|
||||
:disabled="testingProvider === prov.provider_id || savingProvider === prov.provider_id"
|
||||
@@ -131,7 +117,6 @@
|
||||
{{ testingProvider === prov.provider_id ? 'Testing…' : 'Test Connection' }}
|
||||
</button>
|
||||
|
||||
<!-- Test result badge -->
|
||||
<span
|
||||
v-if="testResults[prov.provider_id] === 'ok'"
|
||||
class="text-xs bg-green-100 text-green-700 font-semibold px-2 py-1 rounded-full"
|
||||
@@ -148,7 +133,6 @@
|
||||
|
||||
<!-- ── Per-user AI provider assignment (existing — DO NOT MODIFY) ─────── -->
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
@@ -156,13 +140,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="users.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
|
||||
<p class="text-sm text-gray-500">Create the first user account to get started.</p>
|
||||
</div>
|
||||
|
||||
<!-- AI config table -->
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
@@ -216,7 +198,6 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -227,7 +208,6 @@ import * as api from '../../api/client.js'
|
||||
import { getAiConfig, saveAiConfig, testAiConnection } from '../../api/client.js'
|
||||
import SearchableModelSelect from '../../components/ui/SearchableModelSelect.vue'
|
||||
|
||||
// ── Per-provider default lookup (mirrors backend PROVIDER_DEFAULTS) ───────────
|
||||
|
||||
const _PROVIDER_DEFAULTS = {
|
||||
openai: { base_url: null, model: 'gpt-4o', context_chars: 120000 },
|
||||
@@ -246,7 +226,6 @@ function providerDefaultBaseUrl(pid) { return _PROVIDER_DEFAULTS[pid]?.base_url
|
||||
function providerDefaultModel(pid) { return _PROVIDER_DEFAULTS[pid]?.model || '' }
|
||||
function providerDefaultContextChars(pid) { return _PROVIDER_DEFAULTS[pid]?.context_chars || 8000 }
|
||||
|
||||
// ── System provider state ─────────────────────────────────────────────────────
|
||||
|
||||
const systemProviders = ref([])
|
||||
const loadingSystem = ref(false)
|
||||
@@ -263,7 +242,7 @@ function toggleProvider(pid) {
|
||||
|
||||
function _initForm(prov) {
|
||||
formByProvider[prov.provider_id] = {
|
||||
api_key: '', // write-only: never pre-filled from server
|
||||
api_key: '', // write-only: never pre-filled from server
|
||||
base_url: prov.base_url || '',
|
||||
model_name: prov.model_name || '',
|
||||
context_chars: prov.context_chars || 0,
|
||||
@@ -291,7 +270,6 @@ async function saveSystemProvider(providerId, opts = {}) {
|
||||
const form = formByProvider[providerId] || {}
|
||||
const body = { provider_id: providerId }
|
||||
|
||||
// Only include fields the admin actually modified (api_key only if user typed something)
|
||||
if (form.api_key !== '') body.api_key = form.api_key
|
||||
if (form.base_url !== '') body.base_url = form.base_url
|
||||
if (form.model_name !== '') body.model_name = form.model_name
|
||||
@@ -312,7 +290,6 @@ async function runTestConnection(providerId) {
|
||||
testingProvider.value = providerId
|
||||
testResults[providerId] = null
|
||||
const form = formByProvider[providerId] || {}
|
||||
// Pass unsaved form values so admins can test credentials before saving
|
||||
const overrides = {}
|
||||
if (form.api_key) overrides.api_key = form.api_key
|
||||
if (form.base_url) overrides.base_url = form.base_url
|
||||
@@ -328,7 +305,6 @@ async function runTestConnection(providerId) {
|
||||
setTimeout(() => { testResults[providerId] = null }, 3000)
|
||||
}
|
||||
|
||||
// ── Per-user assignment state (existing — DO NOT MODIFY) ──────────────────────
|
||||
|
||||
const users = ref([])
|
||||
const loading = ref(false)
|
||||
@@ -336,7 +312,6 @@ const loadError = ref(null)
|
||||
const savingId = ref(null)
|
||||
const savedId = ref(null)
|
||||
|
||||
// Per-user config state: { [userId]: { provider, model } }
|
||||
const configs = reactive({})
|
||||
|
||||
const providers = [
|
||||
@@ -367,7 +342,6 @@ async function saveConfig(userId) {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Load system providers AND per-user list in parallel
|
||||
loadSystemProviders()
|
||||
|
||||
loading.value = true
|
||||
@@ -375,7 +349,6 @@ onMounted(async () => {
|
||||
try {
|
||||
const data = await api.adminListUsers()
|
||||
users.value = data.items || []
|
||||
// Initialize per-user config state
|
||||
for (const user of users.value) {
|
||||
configs[user.id] = {
|
||||
provider: user.ai_provider || '',
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Filter bar -->
|
||||
<div class="flex flex-wrap gap-3 mb-4 items-end">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-500 mb-1">From</label>
|
||||
@@ -76,7 +75,6 @@
|
||||
<p v-if="exportError" class="text-xs text-red-600 self-center">{{ exportError }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
@@ -84,15 +82,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fetch error state -->
|
||||
<p v-else-if="fetchError" class="text-xs text-red-600 mt-1">{{ fetchError }}</p>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="entries.length === 0" class="text-center py-12 text-gray-400 text-sm">
|
||||
No audit log entries match the selected filters.
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
@@ -131,7 +126,6 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="!loading && entries.length > 0" class="flex items-center justify-between mt-4">
|
||||
<button
|
||||
@click="prevPage"
|
||||
@@ -203,7 +197,7 @@ const fetchError = ref(null)
|
||||
const exportingCsv = ref(false)
|
||||
const exportError = ref(null)
|
||||
|
||||
// Daily exports state (D-17)
|
||||
|
||||
const dailyExports = ref([])
|
||||
const loadingExports = ref(false)
|
||||
const selectedExportDate = ref('')
|
||||
|
||||
@@ -2,42 +2,33 @@
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-6">Overview</h2>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="text-gray-500">Loading overview…</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="text-red-600">{{ error }}</div>
|
||||
|
||||
<!-- Content -->
|
||||
<template v-else-if="overview">
|
||||
<!-- Stat cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<!-- Users -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Users</p>
|
||||
<p class="text-2xl font-bold text-gray-900">{{ overview.user_count }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Storage -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Storage</p>
|
||||
<p class="text-2xl font-bold text-gray-900">{{ formatSize(overview.total_storage_bytes) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Processing -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Processing</p>
|
||||
<p class="text-2xl font-bold text-gray-900">{{ overview.doc_status?.processing ?? 0 }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Ready -->
|
||||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Ready</p>
|
||||
<p class="text-2xl font-bold text-gray-900">{{ overview.doc_status?.ready ?? 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent audit table -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Recent Activity</h3>
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
@@ -8,13 +7,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="rows.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
|
||||
<p class="text-sm text-gray-500">Create the first user account to get started.</p>
|
||||
</div>
|
||||
|
||||
<!-- Quotas table -->
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
@@ -83,7 +80,6 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -129,7 +125,6 @@ async function saveQuota(row) {
|
||||
savingId.value = row.id
|
||||
try {
|
||||
const result = await api.adminUpdateQuota(row.id, newBytes)
|
||||
// Update the row in place
|
||||
const idx = rows.value.findIndex(r => r.id === row.id)
|
||||
if (idx !== -1) {
|
||||
rows.value[idx] = {
|
||||
@@ -139,7 +134,6 @@ async function saveQuota(row) {
|
||||
}
|
||||
if (result.warning) {
|
||||
editWarning.value = true
|
||||
// Keep edit mode open briefly to show warning, then close
|
||||
setTimeout(() => {
|
||||
editingId.value = null
|
||||
editWarning.value = false
|
||||
@@ -161,11 +155,9 @@ onMounted(async () => {
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
// Load users first to get email addresses
|
||||
const usersData = await api.adminListUsers()
|
||||
const users = usersData.items || []
|
||||
|
||||
// Fetch quotas for all users in parallel
|
||||
const quotaResults = await Promise.allSettled(
|
||||
users.map(u => api.adminGetUserQuota(u.id).then(q => ({ ...q, id: u.id, email: u.email })))
|
||||
)
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Create user panel (inline above table) -->
|
||||
<div v-if="showCreateForm" class="bg-white border border-gray-200 rounded-xl p-6 mb-4">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">Create user</h3>
|
||||
<div class="space-y-3">
|
||||
@@ -80,7 +79,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table header with Create user button -->
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-sm text-gray-500">{{ users.length }} user{{ users.length !== 1 ? 's' : '' }}</p>
|
||||
<button
|
||||
@@ -92,7 +90,6 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
||||
@@ -100,13 +97,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="users.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
|
||||
<p class="text-sm text-gray-500">Create the first user account to get started.</p>
|
||||
</div>
|
||||
|
||||
<!-- Users table -->
|
||||
<div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
@@ -261,7 +256,6 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Action error message -->
|
||||
<p v-if="actionError" class="mt-3 text-sm text-red-600">{{ actionError }}</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -297,13 +291,10 @@ function generateRandomPassword() {
|
||||
const special = '!@#$%^&*'
|
||||
const charset = upper + lower + digits + special // 64 chars — 256 % 64 === 0, no modulo bias
|
||||
|
||||
// Generate 16 random positions
|
||||
const arr = new Uint8Array(16)
|
||||
crypto.getRandomValues(arr)
|
||||
const chars = Array.from(arr, byte => charset[byte % charset.length])
|
||||
|
||||
// Inject one guaranteed character from each required class at random positions
|
||||
// using four additional random bytes to pick the injection positions.
|
||||
const posArr = new Uint8Array(8)
|
||||
crypto.getRandomValues(posArr)
|
||||
const required = [
|
||||
@@ -312,11 +303,9 @@ function generateRandomPassword() {
|
||||
digits[posArr[2] % digits.length],
|
||||
special[posArr[3] % special.length],
|
||||
]
|
||||
// Place each required char at a distinct position (0..3) in the array
|
||||
for (let i = 0; i < 4; i++) {
|
||||
chars[i] = required[i]
|
||||
}
|
||||
// Shuffle using Fisher-Yates with the last 4 random bytes as seeds
|
||||
for (let i = chars.length - 1; i > 0; i--) {
|
||||
const j = posArr[4 + (i % 4)] % (i + 1)
|
||||
;[chars[i], chars[j]] = [chars[j], chars[i]]
|
||||
@@ -365,7 +354,6 @@ async function submitCreate() {
|
||||
password: newUser.password,
|
||||
role: newUser.role,
|
||||
})
|
||||
// Prepend the new user with sensible defaults for display
|
||||
users.value.unshift({
|
||||
id: created.id,
|
||||
handle: created.handle,
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 w-full">
|
||||
<!-- Step: password -->
|
||||
<template v-if="step === 'password'">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Sign in to DocuVault</h2>
|
||||
|
||||
@@ -38,7 +37,6 @@
|
||||
<label for="remember-me" class="text-sm text-gray-600">Stay signed in for 30 days</label>
|
||||
</div>
|
||||
|
||||
<!-- Form-level error -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
|
||||
@@ -70,7 +68,6 @@
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<!-- Step: TOTP -->
|
||||
<template v-else-if="step === 'totp'">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-1">Two-factor authentication</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">Enter the 6-digit code from your authenticator app.</p>
|
||||
@@ -88,7 +85,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Form-level error -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
|
||||
@@ -127,7 +123,6 @@
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<!-- Step: backup code -->
|
||||
<template v-else-if="step === 'backup'">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-1">Two-factor authentication</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">Enter a backup code.</p>
|
||||
@@ -144,7 +139,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Form-level error -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
|
||||
@@ -195,7 +189,6 @@ const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Form state
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const totpInput = ref('')
|
||||
@@ -204,7 +197,6 @@ const loading = ref(false)
|
||||
const error = ref(null)
|
||||
const rememberMe = ref(false)
|
||||
|
||||
// Step: 'password' | 'totp' | 'backup'
|
||||
const step = ref('password')
|
||||
|
||||
function resetToPassword() {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
import forms from '@tailwindcss/forms'
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{vue,js}'],
|
||||
|
||||
Reference in New Issue
Block a user