chore: merge executor worktree (worktree-agent-a38a2f14f84388704)
This commit is contained in:
curo1305
@@ -0,0 +1,235 @@
|
|||||||
|
---
|
||||||
|
phase: "09"
|
||||||
|
plan: "04"
|
||||||
|
subsystem: frontend-router-auth
|
||||||
|
tags: [admin, router, guard, tailwind, cleanup, security]
|
||||||
|
dependency_graph:
|
||||||
|
requires: [09-01, 09-02, 09-03]
|
||||||
|
provides:
|
||||||
|
- frontend/src/router/index.js (nested /admin subtree + corrected guard)
|
||||||
|
- frontend/src/views/auth/LoginView.vue (admin login redirect)
|
||||||
|
- frontend/tailwind.config.js (safelist)
|
||||||
|
affects:
|
||||||
|
- frontend/src/router/__tests__/router.guard.test.js
|
||||||
|
- frontend/src/components/admin/__tests__/ (3 test files migrated)
|
||||||
|
- frontend/src/api/admin.js (JSDoc updated)
|
||||||
|
- frontend/src/views/SettingsView.vue (stale comment removed)
|
||||||
|
tech_stack:
|
||||||
|
added: []
|
||||||
|
patterns:
|
||||||
|
- "Vue Router 4 nested route subtree — AdminLayout as /admin component, 5 lazy-loaded children"
|
||||||
|
- "to.matched.some(r => r.meta.requiresAdmin) — only correct pattern for child-route meta inheritance in Vue Router 4"
|
||||||
|
- "D-09/D-10 strict admin role separation — two guard branches, one per direction"
|
||||||
|
- "Tailwind safelist with regex patterns — covers all dynamic color families from formatters.js + AuditLogTab.actionTypeClass()"
|
||||||
|
key_files:
|
||||||
|
created: []
|
||||||
|
modified:
|
||||||
|
- frontend/src/router/index.js
|
||||||
|
- frontend/src/views/auth/LoginView.vue
|
||||||
|
- frontend/tailwind.config.js
|
||||||
|
- frontend/src/router/__tests__/router.guard.test.js
|
||||||
|
- frontend/src/components/admin/__tests__/AdminUsersTab.test.js
|
||||||
|
- frontend/src/components/admin/__tests__/AdminQuotasTab.test.js
|
||||||
|
- frontend/src/components/admin/__tests__/AdminAiConfigTab.test.js
|
||||||
|
- frontend/src/api/admin.js
|
||||||
|
- frontend/src/views/SettingsView.vue
|
||||||
|
deleted:
|
||||||
|
- frontend/src/views/AdminView.vue
|
||||||
|
- frontend/src/components/admin/AdminUsersTab.vue
|
||||||
|
- frontend/src/components/admin/AdminQuotasTab.vue
|
||||||
|
- frontend/src/components/admin/AdminAiConfigTab.vue
|
||||||
|
- frontend/src/components/admin/AuditLogTab.vue
|
||||||
|
decisions:
|
||||||
|
- "to.matched.some(r => r.meta.requiresAdmin) is the guard pattern — flat to.meta.requiresAdmin silently bypasses all /admin/* child routes in Vue Router 4"
|
||||||
|
- "D-09 admin-on-user-route redirect added to beforeEach — isAdminRoute + isAdmin combination covers both directions cleanly"
|
||||||
|
- "Tailwind safelist extended to include sky (OneDrive providerBg) and amber (AuditLogTab actionTypeClass admin badge) — correcting the original D-14 which omitted these families"
|
||||||
|
- "Tab tests migrated to import from views/admin/Admin*View.vue — behavior identical, no test logic changed"
|
||||||
|
- "router.guard.test.js: AdminView mock replaced with AdminLayout + 5 view mocks; D-09 redirect test added"
|
||||||
|
metrics:
|
||||||
|
duration: "18 minutes"
|
||||||
|
completed: "2026-06-12"
|
||||||
|
tasks_completed: 3
|
||||||
|
tasks_total: 3
|
||||||
|
files_created: 0
|
||||||
|
files_modified: 9
|
||||||
|
files_deleted: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 09 Plan 04: Router Rewire, Login Redirect, Cleanup Summary
|
||||||
|
|
||||||
|
**One-liner:** Nested `/admin` route subtree wired with AdminLayout as component, `to.matched.some()` guard fixed, D-08/D-09/D-10 strict admin separation enforced, Tailwind safelist installed for `sky`+`amber` color families, and five legacy files deleted with tests migrated.
|
||||||
|
|
||||||
|
## Tasks Completed
|
||||||
|
|
||||||
|
| Task | Name | Commit | Files |
|
||||||
|
|------|------|--------|-------|
|
||||||
|
| 1 | Rewire router/index.js + Tailwind safelist | `5dbfb6c` | frontend/src/router/index.js, frontend/tailwind.config.js |
|
||||||
|
| 2 | Wire admin login redirect in LoginView.vue | `bdd68b2` | frontend/src/views/auth/LoginView.vue |
|
||||||
|
| 3 | Delete AdminView.vue + 4 tab files; migrate tests | `e6467d1` | 5 deletions, 6 modified (tests + api comment + settings comment) |
|
||||||
|
|
||||||
|
## What Was Built
|
||||||
|
|
||||||
|
### Task 1 — Nested /admin Route + Guard + Tailwind Safelist
|
||||||
|
|
||||||
|
**Router rewire:** The flat `/admin` route pointing to the deleted `AdminView.vue` is replaced with a nested route whose `component` is the lazy-loaded `AdminLayout.vue`. Five children are registered:
|
||||||
|
|
||||||
|
```
|
||||||
|
{ path: '', AdminOverviewView.vue } → /admin
|
||||||
|
{ path: 'users', AdminUsersView.vue } → /admin/users
|
||||||
|
{ path: 'quotas', AdminQuotasView.vue } → /admin/quotas
|
||||||
|
{ path: 'ai', AdminAiView.vue } → /admin/ai
|
||||||
|
{ path: 'audit', AdminAuditView.vue } → /admin/audit
|
||||||
|
```
|
||||||
|
|
||||||
|
Only the parent carries `meta: { requiresAdmin: true }`. Child routes intentionally do not repeat it — the guard uses `to.matched.some(r => r.meta.requiresAdmin)` which walks the full matched ancestors array, making the parent's meta apply to every child.
|
||||||
|
|
||||||
|
**Guard fix:** The old `if (to.meta.requiresAdmin && ...)` check is replaced with a 5-step guard:
|
||||||
|
1. Silent refresh on non-public routes with no access token
|
||||||
|
2. Compute `isAdminRoute = to.matched.some(r => r.meta.requiresAdmin)`
|
||||||
|
3. Compute `isAdmin = authStore.user?.role === 'admin'`
|
||||||
|
4. D-10a: `isAdminRoute && !isAdmin` → redirect `{ path: '/' }`
|
||||||
|
5. D-09: `!isAdminRoute && !to.meta.public && isAdmin` → redirect `{ path: '/admin' }`
|
||||||
|
|
||||||
|
The `!to.meta.public` clause in step 5 ensures auth routes (`/login`, `/register`, `/password-reset`, `/password-reset/confirm`) remain reachable for admin users — this is the critical escape hatch that prevents redirect loops when an admin session expires and the guard sends them to `/login`.
|
||||||
|
|
||||||
|
**Tailwind safelist:** Two regex patterns added covering all dynamic class families:
|
||||||
|
- `bg-(blue|sky|green|purple|orange|amber|gray|indigo|red)-(50|100|500|600)` — covers `providerBg()` (OneDrive=sky, Google Drive=blue, Nextcloud=orange, WebDAV=gray) and `actionTypeClass()` (auth=blue, folder/share=purple, admin=amber, document=gray)
|
||||||
|
- `text-(blue|sky|green|purple|orange|amber|gray|indigo|red)-(400|500|600|700)` — covers `providerColor()` and `actionTypeClass()` text variants
|
||||||
|
|
||||||
|
`sky` and `amber` were the two families missing from the original D-14 draft. RESEARCH.md Pattern 7 (confirmed in CONTEXT.md) corrects this — both are included.
|
||||||
|
|
||||||
|
### Task 2 — Admin Login Redirect (D-08)
|
||||||
|
|
||||||
|
The `handleLoginResult(!result)` branch in `LoginView.vue` is updated:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const defaultRedirect = authStore.user?.role === 'admin' ? '/admin' : '/'
|
||||||
|
const redirect = route.query.redirect || defaultRedirect
|
||||||
|
await router.push(redirect)
|
||||||
|
```
|
||||||
|
|
||||||
|
`authStore.user.role` is synchronously populated inside `authStore.login()` before the store action returns (verified by reading `auth.js` line 82: `user.value = data.user`), so the role check fires with a fully populated user object.
|
||||||
|
|
||||||
|
The `?redirect=` query param is still honored for non-admin users. For admin users, the D-09 guard in the router would intercept any `?redirect=/` attempt and redirect back to `/admin` anyway — the D-08 check here is belt-and-suspenders.
|
||||||
|
|
||||||
|
The `requires_totp` and `requires_password_change` branches are byte-for-byte unchanged.
|
||||||
|
|
||||||
|
### Task 3 — Delete Legacy Files + Migrate Tests
|
||||||
|
|
||||||
|
**Five files deleted via `git rm`:**
|
||||||
|
- `frontend/src/views/AdminView.vue` — old tab-container view, replaced by `AdminLayout` + nested routes
|
||||||
|
- `frontend/src/components/admin/AdminUsersTab.vue` — promoted to `views/admin/AdminUsersView.vue` in 09-03
|
||||||
|
- `frontend/src/components/admin/AdminQuotasTab.vue` — promoted to `views/admin/AdminQuotasView.vue` in 09-03
|
||||||
|
- `frontend/src/components/admin/AdminAiConfigTab.vue` — promoted to `views/admin/AdminAiView.vue` in 09-03
|
||||||
|
- `frontend/src/components/admin/AuditLogTab.vue` — promoted to `views/admin/AdminAuditView.vue` in 09-03
|
||||||
|
|
||||||
|
**Test migrations** (import path rewrite only — no test logic changed):
|
||||||
|
- `__tests__/AdminUsersTab.test.js`: `import AdminUsersTab from '../AdminUsersTab.vue'` → `from '../../../views/admin/AdminUsersView.vue'`
|
||||||
|
- `__tests__/AdminQuotasTab.test.js`: `import AdminQuotasTab from '../AdminQuotasTab.vue'` → `from '../../../views/admin/AdminQuotasView.vue'`
|
||||||
|
- `__tests__/AdminAiConfigTab.test.js`: `import AdminAiConfigTab from '../AdminAiConfigTab.vue'` → `from '../../../views/admin/AdminAiView.vue'`
|
||||||
|
|
||||||
|
**Router guard test updated:**
|
||||||
|
- Replaced `vi.mock('../../views/AdminView.vue', ...)` with mocks for `layouts/AdminLayout.vue` and all five `views/admin/Admin*View.vue` files
|
||||||
|
- Added D-09 redirect test: admin navigating to `/` is redirected to `/admin`
|
||||||
|
|
||||||
|
**Two stale comments updated (Rule 2 — correctness):**
|
||||||
|
- `src/api/admin.js` JSDoc consumer list updated from `AdminXxxTab.vue` names to `Admin*View.vue` names
|
||||||
|
- `src/views/SettingsView.vue` stale `<!-- Tab strip (copy AdminView pattern verbatim) -->` comment simplified to `<!-- Tab strip -->`
|
||||||
|
|
||||||
|
## Acceptance Criteria Results
|
||||||
|
|
||||||
|
| Criterion | Result |
|
||||||
|
|-----------|--------|
|
||||||
|
| `grep -c "to.matched.some(r => r.meta.requiresAdmin)" router/index.js` ≥ 1 | 1 — PASS |
|
||||||
|
| `grep -c "to.meta.requiresAdmin" router/index.js` = 0 | 0 — PASS |
|
||||||
|
| `grep -c "AdminLayout" router/index.js` ≥ 1 | 2 — PASS |
|
||||||
|
| All 5 Admin*View imports present in router | PASS |
|
||||||
|
| `grep -c "AdminView" router/index.js` = 0 | 0 — PASS |
|
||||||
|
| `grep -c "safelist" tailwind.config.js` = 1 | 1 — PASS |
|
||||||
|
| `grep -c "amber" tailwind.config.js` ≥ 1 | 2 — PASS |
|
||||||
|
| `grep -c "sky" tailwind.config.js` ≥ 1 | 2 — PASS |
|
||||||
|
| `grep -c "authStore.user?.role === 'admin'" LoginView.vue` = 1 | 1 — PASS |
|
||||||
|
| `grep -c "defaultRedirect" LoginView.vue` ≥ 2 | 2 — PASS |
|
||||||
|
| None of 5 deleted files exist | PASS |
|
||||||
|
| No stale `AdminXxxTab` import references remain | PASS |
|
||||||
|
| `npm run build` succeeds | 881 ms, 0 errors — PASS |
|
||||||
|
| `npm test` passes | 137/137 tests — PASS |
|
||||||
|
|
||||||
|
## Smoke Check (Build Artifacts)
|
||||||
|
|
||||||
|
`npm run build` produced separate lazy-loaded chunks for all 5 admin routes:
|
||||||
|
- `AdminLayout-BbuVmUU8.js` (4.46 kB) — AdminLayout entry chunk
|
||||||
|
- `admin-BFKH-0jn.js` (3.04 kB) — shared admin chunk
|
||||||
|
- `AdminOverviewView-DUqzmtNA.js` (3.49 kB)
|
||||||
|
- `AdminQuotasView-Cao0PSry.js` (4.53 kB)
|
||||||
|
- `AdminAuditView-DDh7qqQi.js` (9.24 kB)
|
||||||
|
- `AdminUsersView-BLLys8CV.js` (12.62 kB)
|
||||||
|
- `AdminAiView-CZ8yB8IZ.js` (16.43 kB)
|
||||||
|
|
||||||
|
`AdminAuditView` chunk contains the full `actionTypeClass()` logic with `bg-amber-50 text-amber-700` and `bg-blue-50 text-blue-600` classes — confirmed present in build output. Tailwind safelist ensures these survive tree-shaking in production.
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
### Auto-fixed Issues
|
||||||
|
|
||||||
|
**[Rule 2 - Missing Critical Functionality] Added D-09 redirect test to router guard test**
|
||||||
|
|
||||||
|
- **Found during:** Task 3 (router guard test update)
|
||||||
|
- **Issue:** The test file verified the non-admin → `/` redirect (D-10a) but had no test for the admin → `/admin` redirect (D-09). D-09 is a security-relevant guard branch — omitting it from the test suite is a missing correctness invariant.
|
||||||
|
- **Fix:** Added `it('redirects an admin user away from / to /admin (D-09)', ...)` test with admin role mock navigating to `/` and asserting `router.currentRoute.value.path === '/admin'`.
|
||||||
|
- **Files modified:** `frontend/src/router/__tests__/router.guard.test.js`
|
||||||
|
- **Commit:** `e6467d1`
|
||||||
|
|
||||||
|
**[Rule 1 - Bug] Stale JSDoc consumer list in api/admin.js**
|
||||||
|
|
||||||
|
- **Found during:** Task 3 (grep scan for stale references)
|
||||||
|
- **Issue:** `src/api/admin.js` JSDoc listed the deleted `AdminXxxTab.vue` and `AuditLogTab.vue` names as consumers. Post-deletion, these filenames no longer exist — an inaccurate comment is a correctness issue.
|
||||||
|
- **Fix:** Updated JSDoc consumer list to `AdminUsersView.vue, AdminQuotasView.vue, AdminAiView.vue, AdminAuditView.vue`.
|
||||||
|
- **Files modified:** `frontend/src/api/admin.js`
|
||||||
|
- **Commit:** `e6467d1`
|
||||||
|
|
||||||
|
**[Rule 1 - Bug] Stale AdminView reference in SettingsView.vue comment**
|
||||||
|
|
||||||
|
- **Found during:** Task 3 (grep scan for `AdminView` references)
|
||||||
|
- **Issue:** `src/views/SettingsView.vue` contained `<!-- Tab strip (copy AdminView pattern verbatim) -->`. After `AdminView.vue` is deleted, this comment references a non-existent file.
|
||||||
|
- **Fix:** Simplified to `<!-- Tab strip -->`.
|
||||||
|
- **Files modified:** `frontend/src/views/SettingsView.vue`
|
||||||
|
- **Commit:** `e6467d1`
|
||||||
|
|
||||||
|
**[Rule 3 - Blocking] npm not installed in worktree frontend — installed deps locally**
|
||||||
|
|
||||||
|
- **Found during:** Task 1 verification (npm run build)
|
||||||
|
- **Issue:** The worktree's `frontend/` directory had no `node_modules/`. `npm run build` failed with `ERR_MODULE_NOT_FOUND` for vite.
|
||||||
|
- **Fix:** Ran `npm install` + `npm approve-scripts --allow-scripts-pending` in the worktree's `frontend/`. Build succeeded after this.
|
||||||
|
- **Files modified:** None (dev-time infrastructure only — `node_modules/` is gitignored).
|
||||||
|
|
||||||
|
## Known Stubs
|
||||||
|
|
||||||
|
None — no hardcoded data or placeholder content introduced. All admin routes resolve to the real view components from 09-02 and 09-03.
|
||||||
|
|
||||||
|
## Threat Flags
|
||||||
|
|
||||||
|
None — no new network endpoints, API routes, or trust boundaries introduced. This plan is purely frontend routing and build configuration.
|
||||||
|
|
||||||
|
Threat mitigations from the plan's threat register:
|
||||||
|
- **T-09-04-01 (Elevation of Privilege):** `to.matched.some(r => r.meta.requiresAdmin)` guard covers all `/admin/*` child routes — IMPLEMENTED. Backend `get_current_admin` dependency remains the authoritative second gate.
|
||||||
|
- **T-09-04-02 (Privilege Escalation via ?redirect=):** D-08 puts role check FIRST; even `?redirect=/` for an admin routes through the D-09 guard — IMPLEMENTED.
|
||||||
|
- **T-09-04-03 (CSS purge of dynamic classes):** Tailwind safelist covers `sky` (OneDrive) and `amber` (audit admin badge) — IMPLEMENTED. Build output confirms separate admin chunks exist.
|
||||||
|
- **T-09-04-04 (Redirect loop):** `isAdminRoute` for `/admin/*` short-circuits D-09 so admins on admin routes are not redirected; auth routes have `!to.meta.public` guard — IMPLEMENTED.
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
|
|
||||||
|
- `frontend/src/router/index.js` — MODIFIED (nested /admin + corrected guard)
|
||||||
|
- `frontend/tailwind.config.js` — MODIFIED (safelist added)
|
||||||
|
- `frontend/src/views/auth/LoginView.vue` — MODIFIED (admin login redirect)
|
||||||
|
- `frontend/src/views/AdminView.vue` — DELETED
|
||||||
|
- `frontend/src/components/admin/AdminUsersTab.vue` — DELETED
|
||||||
|
- `frontend/src/components/admin/AdminQuotasTab.vue` — DELETED
|
||||||
|
- `frontend/src/components/admin/AdminAiConfigTab.vue` — DELETED
|
||||||
|
- `frontend/src/components/admin/AuditLogTab.vue` — DELETED
|
||||||
|
- Commit `5dbfb6c` (Task 1) — FOUND
|
||||||
|
- Commit `bdd68b2` (Task 2) — FOUND
|
||||||
|
- Commit `e6467d1` (Task 3) — FOUND
|
||||||
|
- `npm run build` succeeds (0 errors, 5 admin chunks in output) — PASSED
|
||||||
|
- `npm test` — 137/137 tests passed — PASSED
|
||||||
|
- No stale `AdminView` / `AdminXxxTab` imports remain — PASSED
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* Admin API — user management, quota, AI config, audit log, daily exports.
|
* Admin API — user management, quota, AI config, audit log, daily exports.
|
||||||
*
|
*
|
||||||
* Consumers: AdminUsersTab.vue, AdminQuotasTab.vue, AdminAiConfigTab.vue,
|
* Consumers: AdminUsersView.vue, AdminQuotasView.vue, AdminAiView.vue,
|
||||||
* AuditLogTab.vue, AdminDailyExportsTab.vue
|
* AdminAuditView.vue
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { request, fetchWithRetry } from './utils.js'
|
import { request, fetchWithRetry } from './utils.js'
|
||||||
|
|||||||
@@ -1,391 +0,0 @@
|
|||||||
<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>
|
|
||||||
<p class="text-xs text-gray-500 mt-0.5">
|
|
||||||
These settings apply to all classification jobs. Per-user overrides below take precedence when set.
|
|
||||||
</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>
|
|
||||||
Loading AI providers…
|
|
||||||
</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)"
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="text-sm font-medium text-gray-900 capitalize">{{ prov.provider_id }}</span>
|
|
||||||
<span
|
|
||||||
v-if="prov.is_active"
|
|
||||||
class="bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full"
|
|
||||||
>Active</span>
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
:class="['w-4 h-4 text-gray-400 transition-transform', openProviderId === prov.provider_id ? 'rotate-180' : '']"
|
|
||||||
fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-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
|
|
||||||
v-model="formByProvider[prov.provider_id].api_key"
|
|
||||||
type="password"
|
|
||||||
:placeholder="prov.has_api_key ? '(unchanged)' : '(not set)'"
|
|
||||||
autocomplete="off"
|
|
||||||
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Base URL -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs font-medium text-gray-600 mb-1">Base URL</label>
|
|
||||||
<input
|
|
||||||
v-model="formByProvider[prov.provider_id].base_url"
|
|
||||||
type="text"
|
|
||||||
:placeholder="providerDefaultBaseUrl(prov.provider_id) || '(default)'"
|
|
||||||
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
|
||||||
/>
|
|
||||||
</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
|
|
||||||
v-model="formByProvider[prov.provider_id].model_name"
|
|
||||||
:provider-id="prov.provider_id"
|
|
||||||
:placeholder="providerDefaultModel(prov.provider_id)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Context chars -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs font-medium text-gray-600 mb-1">Context Characters</label>
|
|
||||||
<input
|
|
||||||
v-model.number="formByProvider[prov.provider_id].context_chars"
|
|
||||||
type="number"
|
|
||||||
:placeholder="String(providerDefaultContextChars(prov.provider_id))"
|
|
||||||
min="1000"
|
|
||||||
max="2000000"
|
|
||||||
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
|
||||||
/>
|
|
||||||
</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"
|
|
||||||
class="text-xs bg-green-600 text-white font-semibold px-3 py-1.5 rounded-lg hover:bg-green-700 disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
Set Active
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Save -->
|
|
||||||
<button
|
|
||||||
@click="saveSystemProvider(prov.provider_id)"
|
|
||||||
:disabled="savingProvider === prov.provider_id"
|
|
||||||
class="text-xs bg-indigo-600 text-white font-semibold px-3 py-1.5 rounded-lg hover:bg-indigo-700 disabled:opacity-50 flex items-center gap-1 transition-colors"
|
|
||||||
>
|
|
||||||
<span v-if="savingProvider === prov.provider_id" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
{{ savingProvider === prov.provider_id ? 'Saving…' : 'Save' }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Test Connection -->
|
|
||||||
<button
|
|
||||||
@click="runTestConnection(prov.provider_id)"
|
|
||||||
:disabled="testingProvider === prov.provider_id || savingProvider === prov.provider_id"
|
|
||||||
class="text-xs border border-gray-300 text-gray-700 font-semibold px-3 py-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-50 flex items-center gap-1.5 transition-colors"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="testingProvider === prov.provider_id"
|
|
||||||
class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"
|
|
||||||
></span>
|
|
||||||
{{ 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"
|
|
||||||
>OK</span>
|
|
||||||
<span
|
|
||||||
v-else-if="testResults[prov.provider_id] === 'failed'"
|
|
||||||
class="text-xs bg-red-100 text-red-700 font-semibold px-2 py-1 rounded-full"
|
|
||||||
>Failed</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ── 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>
|
|
||||||
Loading AI config…
|
|
||||||
</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>
|
|
||||||
<tr class="bg-gray-50 text-left">
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">AI Provider</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">AI Model</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-gray-200">
|
|
||||||
<tr v-for="user in users" :key="user.id" class="bg-white text-sm">
|
|
||||||
<td class="px-4 py-3 text-gray-900">{{ user.email }}</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<select
|
|
||||||
v-model="configs[user.id].provider"
|
|
||||||
class="block w-36 rounded-lg px-2 py-1.5 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-white"
|
|
||||||
>
|
|
||||||
<option value="">— None —</option>
|
|
||||||
<option v-for="p in providers" :key="p.value" :value="p.value">{{ p.label }}</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<input
|
|
||||||
v-model="configs[user.id].model"
|
|
||||||
type="text"
|
|
||||||
placeholder="e.g. gpt-4o"
|
|
||||||
class="block w-40 rounded-lg px-2 py-1.5 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
@click="saveConfig(user.id)"
|
|
||||||
:disabled="savingId === user.id"
|
|
||||||
class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold disabled:opacity-50 flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<span v-if="savingId === user.id" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
{{ savingId === user.id ? 'Saving…' : 'Save' }}
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
v-if="savedId === user.id"
|
|
||||||
class="text-xs text-green-600 font-semibold"
|
|
||||||
>
|
|
||||||
Saved
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Error message -->
|
|
||||||
<p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
|
||||||
import * as api from '../../api/client.js'
|
|
||||||
import { getAiConfig, saveAiConfig, testAiConnection } from '../../api/client.js'
|
|
||||||
import SearchableModelSelect from '../ui/SearchableModelSelect.vue'
|
|
||||||
|
|
||||||
// ── Per-provider default lookup (mirrors backend PROVIDER_DEFAULTS) ───────────
|
|
||||||
|
|
||||||
const _PROVIDER_DEFAULTS = {
|
|
||||||
openai: { base_url: null, model: 'gpt-4o', context_chars: 120000 },
|
|
||||||
anthropic: { base_url: null, model: 'claude-sonnet-4-6', context_chars: 180000 },
|
|
||||||
gemini: { base_url: 'https://generativelanguage.googleapis.com/v1beta/openai/', model: 'gemini-2.0-flash', context_chars: 800000 },
|
|
||||||
groq: { base_url: 'https://api.groq.com/openai/v1', model: 'llama-3.3-70b-versatile', context_chars: 128000 },
|
|
||||||
xai: { base_url: 'https://api.x.ai/v1', model: 'grok-3-mini', context_chars: 128000 },
|
|
||||||
deepseek: { base_url: 'https://api.deepseek.com', model: 'deepseek-chat', context_chars: 60000 },
|
|
||||||
openrouter: { base_url: 'https://openrouter.ai/api/v1', model: 'anthropic/claude-3.5-sonnet', context_chars: 180000 },
|
|
||||||
mistral: { base_url: 'https://api.mistral.ai/v1', model: 'mistral-large-latest', context_chars: 128000 },
|
|
||||||
ollama: { base_url: 'http://host.docker.internal:11434/v1', model: 'llama3.2', context_chars: 8000 },
|
|
||||||
lmstudio: { base_url: 'http://host.docker.internal:1234/v1', model: 'gemma-4-e4b-it', context_chars: 8000 },
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
const systemError = ref(null)
|
|
||||||
const openProviderId = ref(null)
|
|
||||||
const formByProvider = reactive({})
|
|
||||||
const testResults = reactive({})
|
|
||||||
const savingProvider = ref(null)
|
|
||||||
const testingProvider = ref(null)
|
|
||||||
|
|
||||||
function toggleProvider(pid) {
|
|
||||||
openProviderId.value = openProviderId.value === pid ? null : pid
|
|
||||||
}
|
|
||||||
|
|
||||||
function _initForm(prov) {
|
|
||||||
formByProvider[prov.provider_id] = {
|
|
||||||
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,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadSystemProviders() {
|
|
||||||
loadingSystem.value = true
|
|
||||||
systemError.value = null
|
|
||||||
try {
|
|
||||||
const data = await getAiConfig()
|
|
||||||
systemProviders.value = data.providers || []
|
|
||||||
for (const prov of systemProviders.value) {
|
|
||||||
_initForm(prov)
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
systemError.value = e.message || 'Failed to load AI provider config'
|
|
||||||
} finally {
|
|
||||||
loadingSystem.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveSystemProvider(providerId, opts = {}) {
|
|
||||||
savingProvider.value = providerId
|
|
||||||
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
|
|
||||||
if (form.context_chars && form.context_chars !== 0) body.context_chars = form.context_chars
|
|
||||||
if (opts.activate) body.is_active = true
|
|
||||||
|
|
||||||
try {
|
|
||||||
await saveAiConfig(body)
|
|
||||||
await loadSystemProviders()
|
|
||||||
} catch (e) {
|
|
||||||
systemError.value = e.message || 'Failed to save provider config'
|
|
||||||
} finally {
|
|
||||||
savingProvider.value = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
if (form.model_name) overrides.model_name = form.model_name
|
|
||||||
try {
|
|
||||||
const r = await testAiConnection(providerId, overrides)
|
|
||||||
testResults[providerId] = r.ok ? 'ok' : 'failed'
|
|
||||||
} catch {
|
|
||||||
testResults[providerId] = 'failed'
|
|
||||||
} finally {
|
|
||||||
testingProvider.value = null
|
|
||||||
}
|
|
||||||
setTimeout(() => { testResults[providerId] = null }, 3000)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Per-user assignment state (existing — DO NOT MODIFY) ──────────────────────
|
|
||||||
|
|
||||||
const users = ref([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const loadError = ref(null)
|
|
||||||
const savingId = ref(null)
|
|
||||||
const savedId = ref(null)
|
|
||||||
|
|
||||||
// Per-user config state: { [userId]: { provider, model } }
|
|
||||||
const configs = reactive({})
|
|
||||||
|
|
||||||
const providers = [
|
|
||||||
{ value: 'openai', label: 'OpenAI' },
|
|
||||||
{ value: 'anthropic', label: 'Anthropic' },
|
|
||||||
{ value: 'ollama', label: 'Ollama' },
|
|
||||||
{ value: 'lmstudio', label: 'LM Studio' },
|
|
||||||
]
|
|
||||||
|
|
||||||
async function saveConfig(userId) {
|
|
||||||
savingId.value = userId
|
|
||||||
savedId.value = null
|
|
||||||
try {
|
|
||||||
await api.adminUpdateAiConfig(
|
|
||||||
userId,
|
|
||||||
configs[userId].provider || null,
|
|
||||||
configs[userId].model || null
|
|
||||||
)
|
|
||||||
savedId.value = userId
|
|
||||||
setTimeout(() => {
|
|
||||||
if (savedId.value === userId) savedId.value = null
|
|
||||||
}, 1500)
|
|
||||||
} catch (e) {
|
|
||||||
loadError.value = e.message
|
|
||||||
} finally {
|
|
||||||
savingId.value = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
// Load system providers AND per-user list in parallel
|
|
||||||
loadSystemProviders()
|
|
||||||
|
|
||||||
loading.value = true
|
|
||||||
loadError.value = null
|
|
||||||
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 || '',
|
|
||||||
model: user.ai_model || '',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
loadError.value = e.message
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,182 +0,0 @@
|
|||||||
<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>
|
|
||||||
Loading quotas…
|
|
||||||
</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>
|
|
||||||
<tr class="bg-gray-50 text-left">
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Used</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Limit</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Usage %</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-gray-200">
|
|
||||||
<tr v-for="row in rows" :key="row.id" class="bg-white text-sm">
|
|
||||||
<td class="px-4 py-3 text-gray-900">{{ row.email }}</td>
|
|
||||||
<td class="px-4 py-3 text-gray-700">{{ formatMB(row.used_bytes) }}</td>
|
|
||||||
|
|
||||||
<!-- Limit cell — inline edit when editing -->
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<div v-if="editingId === row.id">
|
|
||||||
<input
|
|
||||||
v-model.number="editLimitMB"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
step="1"
|
|
||||||
class="block w-28 rounded-lg px-2 py-1 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
|
||||||
@keyup.enter="saveQuota(row)"
|
|
||||||
@keyup.escape="cancelEdit"
|
|
||||||
/>
|
|
||||||
<p v-if="editWarning && editingId === row.id" class="mt-1 text-xs text-amber-600">
|
|
||||||
New limit is below current usage ({{ formatMB(row.used_bytes) }}). Existing documents will not be deleted, but uploads will be blocked.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span v-else class="text-gray-700">{{ formatMB(row.limit_bytes) }}</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="px-4 py-3 text-gray-700">
|
|
||||||
{{ usagePercent(row.used_bytes, row.limit_bytes) }}%
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<!-- Actions cell -->
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<div v-if="editingId === row.id" class="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
@click="saveQuota(row)"
|
|
||||||
:disabled="savingId === row.id"
|
|
||||||
class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold disabled:opacity-50 flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<span v-if="savingId === row.id" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
{{ savingId === row.id ? 'Saving…' : 'Save' }}
|
|
||||||
</button>
|
|
||||||
<span class="text-gray-300">·</span>
|
|
||||||
<button @click="cancelEdit" class="text-sm text-gray-500 hover:text-gray-700">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
v-else
|
|
||||||
@click="startEdit(row)"
|
|
||||||
class="text-sm text-indigo-600 hover:text-indigo-700"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Error message -->
|
|
||||||
<p v-if="loadError" class="mt-3 text-sm text-red-600">{{ loadError }}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
|
||||||
import * as api from '../../api/client.js'
|
|
||||||
|
|
||||||
const rows = ref([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const loadError = ref(null)
|
|
||||||
const editingId = ref(null)
|
|
||||||
const editLimitMB = ref(0)
|
|
||||||
const editWarning = ref(false)
|
|
||||||
const savingId = ref(null)
|
|
||||||
|
|
||||||
function formatMB(bytes) {
|
|
||||||
if (bytes == null) return '—'
|
|
||||||
return Math.round(bytes / 1048576) + ' MB'
|
|
||||||
}
|
|
||||||
|
|
||||||
function usagePercent(used, limit) {
|
|
||||||
if (!limit) return 0
|
|
||||||
return Math.round((used / limit) * 100)
|
|
||||||
}
|
|
||||||
|
|
||||||
function startEdit(row) {
|
|
||||||
editingId.value = row.id
|
|
||||||
editLimitMB.value = Math.round(row.limit_bytes / 1048576)
|
|
||||||
editWarning.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelEdit() {
|
|
||||||
editingId.value = null
|
|
||||||
editWarning.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveQuota(row) {
|
|
||||||
const newBytes = editLimitMB.value * 1048576
|
|
||||||
if (newBytes < row.used_bytes) {
|
|
||||||
editWarning.value = true
|
|
||||||
}
|
|
||||||
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] = {
|
|
||||||
...rows.value[idx],
|
|
||||||
limit_bytes: result.limit_bytes,
|
|
||||||
used_bytes: result.used_bytes,
|
|
||||||
}
|
|
||||||
if (result.warning) {
|
|
||||||
editWarning.value = true
|
|
||||||
// Keep edit mode open briefly to show warning, then close
|
|
||||||
setTimeout(() => {
|
|
||||||
editingId.value = null
|
|
||||||
editWarning.value = false
|
|
||||||
}, 3000)
|
|
||||||
} else {
|
|
||||||
editingId.value = null
|
|
||||||
editWarning.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
loadError.value = e.message
|
|
||||||
editingId.value = null
|
|
||||||
} finally {
|
|
||||||
savingId.value = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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 })))
|
|
||||||
)
|
|
||||||
|
|
||||||
rows.value = quotaResults
|
|
||||||
.filter(r => r.status === 'fulfilled')
|
|
||||||
.map(r => r.value)
|
|
||||||
} catch (e) {
|
|
||||||
loadError.value = e.message
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,480 +0,0 @@
|
|||||||
<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">
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
|
|
||||||
<input
|
|
||||||
v-model="newUser.email"
|
|
||||||
type="email"
|
|
||||||
placeholder="user@example.com"
|
|
||||||
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Role</label>
|
|
||||||
<select
|
|
||||||
v-model="newUser.role"
|
|
||||||
class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors bg-white"
|
|
||||||
>
|
|
||||||
<option value="user">User</option>
|
|
||||||
<option value="admin">Admin</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Temporary password</label>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<input
|
|
||||||
:value="newUser.password"
|
|
||||||
type="text"
|
|
||||||
readonly
|
|
||||||
class="block flex-1 rounded-lg px-3 py-2 text-sm border border-gray-200 bg-gray-50 text-gray-700 font-mono focus:outline-none"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
@click="copyPassword"
|
|
||||||
class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors"
|
|
||||||
:title="passwordCopied ? 'Copied!' : 'Copy password'"
|
|
||||||
>
|
|
||||||
<svg v-if="!passwordCopied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
<svg v-else class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
@click="generatePassword"
|
|
||||||
class="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors"
|
|
||||||
title="Regenerate password"
|
|
||||||
>
|
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p v-if="createError" class="text-xs text-red-600">{{ createError }}</p>
|
|
||||||
<div class="flex gap-2 pt-1">
|
|
||||||
<button
|
|
||||||
@click="submitCreate"
|
|
||||||
:disabled="creating"
|
|
||||||
class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg disabled:opacity-50 transition-colors"
|
|
||||||
>
|
|
||||||
<span v-if="creating" class="flex items-center gap-1.5">
|
|
||||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
|
|
||||||
Creating…
|
|
||||||
</span>
|
|
||||||
<span v-else>Create user</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
@click="cancelCreate"
|
|
||||||
class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</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
|
|
||||||
v-if="!showCreateForm"
|
|
||||||
@click="openCreateForm"
|
|
||||||
class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
Create user
|
|
||||||
</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>
|
|
||||||
Loading users…
|
|
||||||
</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>
|
|
||||||
<tr class="bg-gray-50 text-left">
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Handle</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Role</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
|
|
||||||
<th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-gray-200">
|
|
||||||
<tr
|
|
||||||
v-for="user in users"
|
|
||||||
:key="user.id"
|
|
||||||
:class="[
|
|
||||||
'text-sm transition-colors',
|
|
||||||
!user.is_active ? 'bg-gray-50' : 'bg-white',
|
|
||||||
pendingAction[user.id] ? 'pointer-events-none opacity-60' : '',
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<td class="px-4 py-3 text-gray-900">{{ user.email }}</td>
|
|
||||||
<td class="px-4 py-3 text-gray-500 font-mono text-xs">{{ user.handle ? '@' + user.handle : '—' }}</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold"
|
|
||||||
:class="user.role === 'admin' ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-100 text-gray-600'"
|
|
||||||
>
|
|
||||||
{{ user.role === 'admin' ? 'Admin' : 'User' }}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<span
|
|
||||||
class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold"
|
|
||||||
:class="user.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
|
|
||||||
>
|
|
||||||
{{ user.is_active ? 'Active' : 'Deactivated' }}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 text-gray-500">{{ formatDate(user.created_at) }}</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<!-- Inline deactivation confirmation -->
|
|
||||||
<div v-if="confirmDeactivate === user.id" class="space-y-2">
|
|
||||||
<p class="text-xs text-gray-700">
|
|
||||||
Deactivate <span class="font-semibold">{{ user.email }}</span>? They will lose access immediately. Their data is preserved.
|
|
||||||
</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
@click="confirmDoDeactivate(user.id)"
|
|
||||||
:disabled="pendingAction[user.id]"
|
|
||||||
class="text-red-600 hover:text-red-700 text-sm font-semibold disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<span v-if="pendingAction[user.id]" class="flex items-center gap-1">
|
|
||||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
Deactivating…
|
|
||||||
</span>
|
|
||||||
<span v-else>Deactivate</span>
|
|
||||||
</button>
|
|
||||||
<span class="text-gray-300">·</span>
|
|
||||||
<button @click="confirmDeactivate = null" class="text-gray-500 hover:text-gray-700 text-sm">
|
|
||||||
Keep account
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Inline delete confirmation panel -->
|
|
||||||
<div v-else-if="confirmDelete === user.id" class="space-y-2">
|
|
||||||
<p class="text-xs text-red-700 font-semibold">
|
|
||||||
Permanently delete <span class="font-bold">{{ user.email }}</span>?
|
|
||||||
This will erase all their documents, cloud connections, and quota data. This cannot be undone.
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs text-gray-700 mb-1 font-semibold">Your admin password to confirm</label>
|
|
||||||
<input
|
|
||||||
v-model="deletePassword"
|
|
||||||
type="password"
|
|
||||||
autocomplete="current-password"
|
|
||||||
placeholder="Admin password"
|
|
||||||
class="block w-full rounded-lg px-2 py-1.5 text-xs border border-red-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors"
|
|
||||||
@keydown.enter.prevent="confirmDoDelete(user.id)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p v-if="deleteError" class="text-xs text-red-600">{{ deleteError }}</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
@click="confirmDoDelete(user.id)"
|
|
||||||
:disabled="pendingAction[user.id] || !deletePassword"
|
|
||||||
class="text-red-700 hover:text-red-800 text-sm font-semibold disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<span v-if="pendingAction[user.id]" class="flex items-center gap-1">
|
|
||||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
Deleting…
|
|
||||||
</span>
|
|
||||||
<span v-else>Delete permanently</span>
|
|
||||||
</button>
|
|
||||||
<span class="text-gray-300">·</span>
|
|
||||||
<button @click="cancelDelete" class="text-gray-500 hover:text-gray-700 text-sm">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Normal actions -->
|
|
||||||
<div v-else class="flex items-center gap-2">
|
|
||||||
<span v-if="pendingAction[user.id]" class="flex items-center gap-1 text-gray-400 text-sm">
|
|
||||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<template v-else-if="user.is_active">
|
|
||||||
<button
|
|
||||||
@click="resetPassword(user.id)"
|
|
||||||
class="text-indigo-600 hover:text-indigo-700 text-sm"
|
|
||||||
>
|
|
||||||
Reset password
|
|
||||||
</button>
|
|
||||||
<span class="text-gray-300">·</span>
|
|
||||||
<button
|
|
||||||
@click="startDeactivate(user.id)"
|
|
||||||
class="text-red-600 hover:text-red-700 text-sm"
|
|
||||||
>
|
|
||||||
Deactivate
|
|
||||||
</button>
|
|
||||||
<span class="text-gray-300">·</span>
|
|
||||||
<button
|
|
||||||
@click="startDelete(user.id)"
|
|
||||||
class="text-red-800 hover:text-red-900 text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<button
|
|
||||||
@click="reactivate(user.id)"
|
|
||||||
class="text-indigo-600 hover:text-indigo-700 text-sm"
|
|
||||||
>
|
|
||||||
Reactivate
|
|
||||||
</button>
|
|
||||||
<span class="text-gray-300">·</span>
|
|
||||||
<button
|
|
||||||
@click="startDelete(user.id)"
|
|
||||||
class="text-red-800 hover:text-red-900 text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Action error message -->
|
|
||||||
<p v-if="actionError" class="mt-3 text-sm text-red-600">{{ actionError }}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
|
||||||
import { formatDate } from '../../utils/formatters.js'
|
|
||||||
import * as api from '../../api/client.js'
|
|
||||||
|
|
||||||
const users = ref([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const showCreateForm = ref(false)
|
|
||||||
const confirmDeactivate = ref(null)
|
|
||||||
const confirmDelete = ref(null)
|
|
||||||
const deletePassword = ref('')
|
|
||||||
const deleteError = ref(null)
|
|
||||||
const pendingAction = reactive({})
|
|
||||||
const actionError = ref(null)
|
|
||||||
const creating = ref(false)
|
|
||||||
const createError = ref(null)
|
|
||||||
const passwordCopied = ref(false)
|
|
||||||
|
|
||||||
const newUser = reactive({
|
|
||||||
email: '',
|
|
||||||
role: 'user',
|
|
||||||
password: '',
|
|
||||||
})
|
|
||||||
|
|
||||||
function generateRandomPassword() {
|
|
||||||
const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ'
|
|
||||||
const lower = 'abcdefghijkmnpqrstuvwxyz'
|
|
||||||
const digits = '23456789'
|
|
||||||
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 = [
|
|
||||||
upper[posArr[0] % upper.length],
|
|
||||||
lower[posArr[1] % lower.length],
|
|
||||||
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]]
|
|
||||||
}
|
|
||||||
|
|
||||||
return chars.join('')
|
|
||||||
}
|
|
||||||
|
|
||||||
function generatePassword() {
|
|
||||||
newUser.password = generateRandomPassword()
|
|
||||||
passwordCopied.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyPassword() {
|
|
||||||
navigator.clipboard.writeText(newUser.password).then(() => {
|
|
||||||
passwordCopied.value = true
|
|
||||||
setTimeout(() => { passwordCopied.value = false }, 2000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function openCreateForm() {
|
|
||||||
newUser.email = ''
|
|
||||||
newUser.role = 'user'
|
|
||||||
newUser.password = generateRandomPassword()
|
|
||||||
createError.value = null
|
|
||||||
showCreateForm.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelCreate() {
|
|
||||||
showCreateForm.value = false
|
|
||||||
createError.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
async function submitCreate() {
|
|
||||||
if (!newUser.email) {
|
|
||||||
createError.value = 'Email is required.'
|
|
||||||
return
|
|
||||||
}
|
|
||||||
creating.value = true
|
|
||||||
createError.value = null
|
|
||||||
try {
|
|
||||||
const handle = newUser.email.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 40)
|
|
||||||
const created = await api.adminCreateUser({
|
|
||||||
handle,
|
|
||||||
email: newUser.email,
|
|
||||||
password: newUser.password,
|
|
||||||
role: newUser.role,
|
|
||||||
})
|
|
||||||
// Prepend the new user with sensible defaults for display
|
|
||||||
users.value.unshift({
|
|
||||||
id: created.id,
|
|
||||||
handle: created.handle,
|
|
||||||
email: created.email,
|
|
||||||
role: created.role,
|
|
||||||
is_active: true,
|
|
||||||
totp_enabled: false,
|
|
||||||
ai_provider: null,
|
|
||||||
ai_model: null,
|
|
||||||
created_at: created.created_at,
|
|
||||||
})
|
|
||||||
showCreateForm.value = false
|
|
||||||
} catch (e) {
|
|
||||||
createError.value = e.message
|
|
||||||
} finally {
|
|
||||||
creating.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startDeactivate(id) {
|
|
||||||
confirmDeactivate.value = id
|
|
||||||
confirmDelete.value = null
|
|
||||||
deletePassword.value = ''
|
|
||||||
deleteError.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
function startDelete(id) {
|
|
||||||
confirmDelete.value = id
|
|
||||||
deletePassword.value = ''
|
|
||||||
deleteError.value = null
|
|
||||||
confirmDeactivate.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelDelete() {
|
|
||||||
confirmDelete.value = null
|
|
||||||
deletePassword.value = ''
|
|
||||||
deleteError.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
async function confirmDoDelete(id) {
|
|
||||||
pendingAction[id] = true
|
|
||||||
deleteError.value = null
|
|
||||||
try {
|
|
||||||
await api.adminDeleteUser(id, deletePassword.value)
|
|
||||||
users.value = users.value.filter(u => u.id !== id)
|
|
||||||
cancelDelete()
|
|
||||||
} catch (e) {
|
|
||||||
deleteError.value = e.message
|
|
||||||
} finally {
|
|
||||||
delete pendingAction[id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function confirmDoDeactivate(id) {
|
|
||||||
pendingAction[id] = true
|
|
||||||
actionError.value = null
|
|
||||||
try {
|
|
||||||
await api.adminDeactivateUser(id)
|
|
||||||
const idx = users.value.findIndex(u => u.id === id)
|
|
||||||
if (idx !== -1) {
|
|
||||||
users.value[idx] = { ...users.value[idx], is_active: false }
|
|
||||||
}
|
|
||||||
confirmDeactivate.value = null
|
|
||||||
} catch (e) {
|
|
||||||
actionError.value = e.message
|
|
||||||
confirmDeactivate.value = null
|
|
||||||
} finally {
|
|
||||||
delete pendingAction[id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function reactivate(id) {
|
|
||||||
pendingAction[id] = true
|
|
||||||
actionError.value = null
|
|
||||||
try {
|
|
||||||
await api.adminReactivateUser(id)
|
|
||||||
const idx = users.value.findIndex(u => u.id === id)
|
|
||||||
if (idx !== -1) {
|
|
||||||
users.value[idx] = { ...users.value[idx], is_active: true }
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
actionError.value = e.message
|
|
||||||
} finally {
|
|
||||||
delete pendingAction[id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resetPassword(id) {
|
|
||||||
pendingAction[id] = true
|
|
||||||
actionError.value = null
|
|
||||||
try {
|
|
||||||
await api.adminResetUserPassword(id)
|
|
||||||
} catch (e) {
|
|
||||||
actionError.value = e.message
|
|
||||||
} finally {
|
|
||||||
delete pendingAction[id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const data = await api.adminListUsers()
|
|
||||||
users.value = data.items || []
|
|
||||||
} catch (e) {
|
|
||||||
actionError.value = e.message
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,346 +0,0 @@
|
|||||||
<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>
|
|
||||||
<input
|
|
||||||
v-model="filters.start"
|
|
||||||
type="date"
|
|
||||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs font-semibold text-gray-500 mb-1">To</label>
|
|
||||||
<input
|
|
||||||
v-model="filters.end"
|
|
||||||
type="date"
|
|
||||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs font-semibold text-gray-500 mb-1">User handle</label>
|
|
||||||
<input
|
|
||||||
v-model="filters.user_handle"
|
|
||||||
type="text"
|
|
||||||
placeholder="All users"
|
|
||||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-36"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs font-semibold text-gray-500 mb-1">Action</label>
|
|
||||||
<select
|
|
||||||
v-model="filters.event_type"
|
|
||||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white"
|
|
||||||
>
|
|
||||||
<option value="">All actions</option>
|
|
||||||
<option value="auth">Auth</option>
|
|
||||||
<option value="document">Document</option>
|
|
||||||
<option value="folder">Folder</option>
|
|
||||||
<option value="share">Share</option>
|
|
||||||
<option value="admin">Admin</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
@click="applyFilters"
|
|
||||||
class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
|
|
||||||
>
|
|
||||||
Apply filters
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="activeFilterCount > 0"
|
|
||||||
@click="clearFilters"
|
|
||||||
class="border border-gray-300 text-gray-500 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
Clear filters
|
|
||||||
</button>
|
|
||||||
<div class="relative inline-flex flex-col items-start gap-1">
|
|
||||||
<button
|
|
||||||
@click="exportCsv"
|
|
||||||
:disabled="exportingCsv"
|
|
||||||
class="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<span v-if="exportingCsv" class="flex items-center gap-1">
|
|
||||||
<span class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
Exporting…
|
|
||||||
</span>
|
|
||||||
<span v-else>Export CSV</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
v-if="activeFilterCount > 0"
|
|
||||||
class="text-xs text-amber-600"
|
|
||||||
>
|
|
||||||
{{ activeFilterCount }} filter{{ activeFilterCount !== 1 ? 's' : '' }} active
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
Loading audit log…
|
|
||||||
</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>
|
|
||||||
<tr class="bg-gray-50 border-b border-gray-200">
|
|
||||||
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Timestamp</th>
|
|
||||||
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">User</th>
|
|
||||||
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Email</th>
|
|
||||||
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Action Type</th>
|
|
||||||
<th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">IP Address</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
v-for="entry in entries"
|
|
||||||
:key="entry.id"
|
|
||||||
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
<td class="px-4 py-3 font-mono text-xs text-gray-500">{{ formatTimestamp(entry.created_at) }}</td>
|
|
||||||
<td class="px-4 py-3 text-sm text-gray-700">{{ entry.user_handle || entry.user_id || '—' }}</td>
|
|
||||||
<td class="px-4 py-3 text-sm text-gray-500">
|
|
||||||
<span v-if="entry.user_email">{{ entry.user_email }}</span>
|
|
||||||
<span v-else-if="entry.metadata_?.attempted_email_hash" class="text-amber-600 font-mono text-xs">hash:{{ entry.metadata_.attempted_email_hash }} <span class="text-xs not-italic">(attempted)</span></span>
|
|
||||||
<span v-else>—</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3">
|
|
||||||
<span
|
|
||||||
class="text-xs px-2 py-1 rounded-full font-medium"
|
|
||||||
:class="actionTypeClass(entry.event_type)"
|
|
||||||
>
|
|
||||||
{{ entry.event_type }}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono text-xs">{{ entry.ip_address || '—' }}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pagination -->
|
|
||||||
<div v-if="!loading && entries.length > 0" class="flex items-center justify-between mt-4">
|
|
||||||
<button
|
|
||||||
@click="prevPage"
|
|
||||||
:disabled="page <= 1"
|
|
||||||
class="text-sm text-gray-600 hover:text-gray-900 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
<span class="text-sm text-gray-500">Page {{ page }}</span>
|
|
||||||
<button
|
|
||||||
@click="nextPage"
|
|
||||||
:disabled="page * perPage >= total"
|
|
||||||
class="text-sm text-gray-600 hover:text-gray-900 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Daily exports section (D-17, C-4) -->
|
|
||||||
<div class="border-t border-gray-100 mt-6 pt-6">
|
|
||||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Daily exports</h3>
|
|
||||||
|
|
||||||
<p v-if="loadingExports" class="text-sm text-gray-400">Loading exports…</p>
|
|
||||||
|
|
||||||
<p v-else-if="dailyExports.length === 0" class="text-sm text-gray-400 italic">
|
|
||||||
No daily exports available.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div v-else class="flex items-end gap-3">
|
|
||||||
<select
|
|
||||||
v-model="selectedExportDate"
|
|
||||||
class="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white"
|
|
||||||
>
|
|
||||||
<option value="" disabled>Choose a date</option>
|
|
||||||
<option
|
|
||||||
v-for="exp in dailyExports"
|
|
||||||
:key="exp.date"
|
|
||||||
:value="exp.date"
|
|
||||||
>
|
|
||||||
{{ exp.date }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<button
|
|
||||||
@click="downloadDailyExport"
|
|
||||||
:disabled="!selectedExportDate || downloadingExport"
|
|
||||||
class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm px-4 py-2 rounded-lg disabled:opacity-50 transition-colors flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<span v-if="downloadingExport" class="animate-spin rounded-full border-2 border-current border-t-transparent w-3 h-3"></span>
|
|
||||||
Download
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="exportsError" class="text-xs text-red-600 mt-2">{{ exportsError }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted, computed } from 'vue'
|
|
||||||
import * as api from '../../api/client.js'
|
|
||||||
|
|
||||||
const entries = ref([])
|
|
||||||
const total = ref(0)
|
|
||||||
const page = ref(1)
|
|
||||||
const perPage = 50
|
|
||||||
const loading = ref(false)
|
|
||||||
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('')
|
|
||||||
const downloadingExport = ref(false)
|
|
||||||
const exportsError = ref(null)
|
|
||||||
|
|
||||||
const filters = reactive({
|
|
||||||
start: '',
|
|
||||||
end: '',
|
|
||||||
user_handle: '',
|
|
||||||
event_type: '',
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
fetchLog()
|
|
||||||
loadDailyExports()
|
|
||||||
})
|
|
||||||
|
|
||||||
async function fetchLog() {
|
|
||||||
loading.value = true
|
|
||||||
fetchError.value = null
|
|
||||||
try {
|
|
||||||
const data = await api.adminListAuditLog({
|
|
||||||
start: filters.start || undefined,
|
|
||||||
end: filters.end || undefined,
|
|
||||||
user_handle: filters.user_handle || undefined,
|
|
||||||
event_type: filters.event_type || undefined,
|
|
||||||
page: page.value,
|
|
||||||
per_page: perPage,
|
|
||||||
})
|
|
||||||
entries.value = Array.isArray(data) ? data : (data.items ?? [])
|
|
||||||
total.value = data.total ?? entries.value.length
|
|
||||||
} catch (e) {
|
|
||||||
entries.value = []
|
|
||||||
fetchError.value = 'Failed to load audit log. Please try again.'
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyFilters() {
|
|
||||||
page.value = 1
|
|
||||||
fetchLog()
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearFilters() {
|
|
||||||
filters.start = ''
|
|
||||||
filters.end = ''
|
|
||||||
filters.user_handle = ''
|
|
||||||
filters.event_type = ''
|
|
||||||
page.value = 1
|
|
||||||
fetchLog()
|
|
||||||
}
|
|
||||||
|
|
||||||
const activeFilterCount = computed(() => {
|
|
||||||
let count = 0
|
|
||||||
if (filters.start) count++
|
|
||||||
if (filters.end) count++
|
|
||||||
if (filters.user_handle) count++
|
|
||||||
if (filters.event_type) count++
|
|
||||||
return count
|
|
||||||
})
|
|
||||||
|
|
||||||
function prevPage() {
|
|
||||||
if (page.value > 1) {
|
|
||||||
page.value--
|
|
||||||
fetchLog()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextPage() {
|
|
||||||
if (page.value * perPage < total.value) {
|
|
||||||
page.value++
|
|
||||||
fetchLog()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function exportCsv() {
|
|
||||||
exportingCsv.value = true
|
|
||||||
exportError.value = null
|
|
||||||
try {
|
|
||||||
await api.adminExportAuditLogCsv({
|
|
||||||
start: filters.start || undefined,
|
|
||||||
end: filters.end || undefined,
|
|
||||||
user_handle: filters.user_handle || undefined,
|
|
||||||
event_type: filters.event_type || undefined,
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
exportError.value = 'Export failed. Please try again.'
|
|
||||||
} finally {
|
|
||||||
exportingCsv.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadDailyExports() {
|
|
||||||
loadingExports.value = true
|
|
||||||
exportsError.value = null
|
|
||||||
try {
|
|
||||||
const data = await api.adminListDailyExports()
|
|
||||||
dailyExports.value = data.items ?? []
|
|
||||||
} catch (e) {
|
|
||||||
dailyExports.value = []
|
|
||||||
exportsError.value = 'Failed to load daily exports. Please try again.'
|
|
||||||
} finally {
|
|
||||||
loadingExports.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function downloadDailyExport() {
|
|
||||||
if (!selectedExportDate.value) return
|
|
||||||
downloadingExport.value = true
|
|
||||||
exportsError.value = null
|
|
||||||
try {
|
|
||||||
await api.adminDownloadDailyExport(selectedExportDate.value)
|
|
||||||
} catch (e) {
|
|
||||||
exportsError.value = 'Download failed. Please try again.'
|
|
||||||
} finally {
|
|
||||||
downloadingExport.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTimestamp(iso) {
|
|
||||||
if (!iso) return '—'
|
|
||||||
try {
|
|
||||||
return new Date(iso).toISOString().replace('T', ' ').slice(0, 19)
|
|
||||||
} catch {
|
|
||||||
return iso
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function actionTypeClass(eventType) {
|
|
||||||
if (!eventType) return 'bg-gray-100 text-gray-600'
|
|
||||||
const t = eventType.toLowerCase()
|
|
||||||
if (t.startsWith('auth')) return 'bg-blue-50 text-blue-600'
|
|
||||||
if (t.startsWith('document')) return 'bg-gray-100 text-gray-600'
|
|
||||||
if (t.startsWith('folder') || t.startsWith('share')) return 'bg-purple-50 text-purple-600'
|
|
||||||
if (t.startsWith('admin')) return 'bg-amber-50 text-amber-700'
|
|
||||||
return 'bg-gray-100 text-gray-600'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -7,7 +7,7 @@ vi.mock('../../../api/client.js', () => ({
|
|||||||
adminUpdateAiConfig: vi.fn(),
|
adminUpdateAiConfig: vi.fn(),
|
||||||
}))
|
}))
|
||||||
|
|
||||||
import AdminAiConfigTab from '../AdminAiConfigTab.vue'
|
import AdminAiConfigTab from '../../../views/admin/AdminAiView.vue'
|
||||||
import * as api from '../../../api/client.js'
|
import * as api from '../../../api/client.js'
|
||||||
|
|
||||||
function makeUser(overrides = {}) {
|
function makeUser(overrides = {}) {
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ vi.mock('../../../api/client.js', () => ({
|
|||||||
adminUpdateQuota: vi.fn(),
|
adminUpdateQuota: vi.fn(),
|
||||||
}))
|
}))
|
||||||
|
|
||||||
import AdminQuotasTab from '../AdminQuotasTab.vue'
|
import AdminQuotasTab from '../../../views/admin/AdminQuotasView.vue'
|
||||||
import * as api from '../../../api/client.js'
|
import * as api from '../../../api/client.js'
|
||||||
|
|
||||||
const MB = 1048576
|
const MB = 1048576
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ vi.mock('../../../api/client.js', () => ({
|
|||||||
adminCreateUser: vi.fn(),
|
adminCreateUser: vi.fn(),
|
||||||
}))
|
}))
|
||||||
|
|
||||||
import AdminUsersTab from '../AdminUsersTab.vue'
|
import AdminUsersTab from '../../../views/admin/AdminUsersView.vue'
|
||||||
import * as api from '../../../api/client.js'
|
import * as api from '../../../api/client.js'
|
||||||
|
|
||||||
function makeUser(overrides = {}) {
|
function makeUser(overrides = {}) {
|
||||||
|
|||||||
@@ -11,7 +11,12 @@ vi.mock('../../views/auth/LoginView.vue', () => ({ default: { template: '<div />
|
|||||||
vi.mock('../../views/auth/RegisterView.vue', () => ({ default: { template: '<div />' } }))
|
vi.mock('../../views/auth/RegisterView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
vi.mock('../../views/auth/PasswordResetView.vue', () => ({ default: { template: '<div />' } }))
|
vi.mock('../../views/auth/PasswordResetView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
vi.mock('../../views/auth/NewPasswordView.vue', () => ({ default: { template: '<div />' } }))
|
vi.mock('../../views/auth/NewPasswordView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
vi.mock('../../views/AdminView.vue', () => ({ default: { template: '<div />' } }))
|
vi.mock('../../layouts/AdminLayout.vue', () => ({ default: { template: '<div><router-view /></div>' } }))
|
||||||
|
vi.mock('../../views/admin/AdminOverviewView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
|
vi.mock('../../views/admin/AdminUsersView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
|
vi.mock('../../views/admin/AdminQuotasView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
|
vi.mock('../../views/admin/AdminAiView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
|
vi.mock('../../views/admin/AdminAuditView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
vi.mock('../../views/SharedView.vue', () => ({ default: { template: '<div />' } }))
|
vi.mock('../../views/SharedView.vue', () => ({ default: { template: '<div />' } }))
|
||||||
|
|
||||||
// Heavy view components imported statically — stub them too
|
// Heavy view components imported statically — stub them too
|
||||||
@@ -78,4 +83,18 @@ describe('router — admin guard (SEC-07)', () => {
|
|||||||
await router.push('/admin')
|
await router.push('/admin')
|
||||||
expect(router.currentRoute.value.path).toBe('/admin')
|
expect(router.currentRoute.value.path).toBe('/admin')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('redirects an admin user away from / to /admin (D-09)', async () => {
|
||||||
|
// Arrange: admin trying to navigate to a regular user route
|
||||||
|
useAuthStore.mockReturnValue({
|
||||||
|
accessToken: 'fake-token',
|
||||||
|
user: { id: '1', role: 'admin' },
|
||||||
|
refresh: vi.fn().mockResolvedValue(undefined),
|
||||||
|
})
|
||||||
|
|
||||||
|
// Act: admin attempts to visit the regular user home
|
||||||
|
await router.push('/')
|
||||||
|
// The D-09 guard branch returns { path: '/admin' }
|
||||||
|
expect(router.currentRoute.value.path).toBe('/admin')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -39,7 +39,22 @@ const routes = [
|
|||||||
|
|
||||||
// Phase 2 — authenticated routes
|
// Phase 2 — authenticated routes
|
||||||
{ path: '/account', redirect: '/settings' },
|
{ path: '/account', redirect: '/settings' },
|
||||||
{ path: '/admin', component: () => import('../views/AdminView.vue'), meta: { requiresAdmin: true } },
|
|
||||||
|
// Admin panel — standalone route subtree with AdminLayout as the route component.
|
||||||
|
// Children do NOT re-declare requiresAdmin — the guard uses to.matched.some() to
|
||||||
|
// inherit from the parent (Vue Router 4 does not propagate meta to children).
|
||||||
|
{
|
||||||
|
path: '/admin',
|
||||||
|
component: () => import('../layouts/AdminLayout.vue'),
|
||||||
|
meta: { requiresAdmin: true },
|
||||||
|
children: [
|
||||||
|
{ path: '', component: () => import('../views/admin/AdminOverviewView.vue') },
|
||||||
|
{ path: 'users', component: () => import('../views/admin/AdminUsersView.vue') },
|
||||||
|
{ path: 'quotas', component: () => import('../views/admin/AdminQuotasView.vue') },
|
||||||
|
{ path: 'ai', component: () => import('../views/admin/AdminAiView.vue') },
|
||||||
|
{ path: 'audit', component: () => import('../views/admin/AdminAuditView.vue') },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
// Cloud storage overview and folder browser
|
// Cloud storage overview and folder browser
|
||||||
{
|
{
|
||||||
@@ -75,11 +90,13 @@ const router = createRouter({
|
|||||||
routes,
|
routes,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Navigation guard (D-10): redirect unauthenticated users to /login.
|
// Navigation guard — enforces auth and admin role separation (D-09, D-10).
|
||||||
// On page reload the access token is gone (memory-only per CLAUDE.md), so we attempt
|
// On page reload the access token is gone (memory-only per CLAUDE.md), so we attempt
|
||||||
// a silent refresh via the httpOnly cookie before concluding the session is gone.
|
// a silent refresh via the httpOnly cookie before any role checks fire.
|
||||||
router.beforeEach(async (to) => {
|
router.beforeEach(async (to) => {
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
|
// Step 1: ensure access token is present for non-public routes.
|
||||||
if (!to.meta.public && !authStore.accessToken) {
|
if (!to.meta.public && !authStore.accessToken) {
|
||||||
try {
|
try {
|
||||||
await authStore.refresh()
|
await authStore.refresh()
|
||||||
@@ -88,9 +105,18 @@ router.beforeEach(async (to) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (to.meta.requiresAdmin && authStore.user?.role !== 'admin') {
|
const isAdminRoute = to.matched.some(r => r.meta.requiresAdmin)
|
||||||
|
const isAdmin = authStore.user?.role === 'admin'
|
||||||
|
|
||||||
|
// D-10a: non-admin attempting an admin route → redirect to /.
|
||||||
|
if (isAdminRoute && !isAdmin) {
|
||||||
return { path: '/' }
|
return { path: '/' }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// D-09: admin attempting a non-admin, non-public route → redirect to /admin.
|
||||||
|
if (!isAdminRoute && !to.meta.public && isAdmin) {
|
||||||
|
return { path: '/admin' }
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="p-8 max-w-5xl mx-auto">
|
|
||||||
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Admin panel</h2>
|
|
||||||
|
|
||||||
<!-- Tab strip -->
|
|
||||||
<div class="flex border-b border-gray-200 mb-6">
|
|
||||||
<button
|
|
||||||
v-for="tab in tabs"
|
|
||||||
:key="tab.id"
|
|
||||||
@click="activeTab = tab.id"
|
|
||||||
class="px-4 py-2 text-sm font-semibold border-b-2 transition-colors"
|
|
||||||
:class="activeTab === tab.id
|
|
||||||
? 'text-indigo-600 border-indigo-600'
|
|
||||||
: 'text-gray-500 hover:text-gray-700 border-transparent'"
|
|
||||||
>
|
|
||||||
{{ tab.label }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tab content -->
|
|
||||||
<AdminUsersTab v-if="activeTab === 'users'" />
|
|
||||||
<AdminQuotasTab v-if="activeTab === 'quotas'" />
|
|
||||||
<AdminAiConfigTab v-if="activeTab === 'ai'" />
|
|
||||||
<AuditLogTab v-if="activeTab === 'audit'" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import AdminUsersTab from '../components/admin/AdminUsersTab.vue'
|
|
||||||
import AdminQuotasTab from '../components/admin/AdminQuotasTab.vue'
|
|
||||||
import AdminAiConfigTab from '../components/admin/AdminAiConfigTab.vue'
|
|
||||||
import AuditLogTab from '../components/admin/AuditLogTab.vue'
|
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
{ id: 'users', label: 'Users' },
|
|
||||||
{ id: 'quotas', label: 'Quotas' },
|
|
||||||
{ id: 'ai', label: 'AI Config' },
|
|
||||||
{ id: 'audit', label: 'Audit Log' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const activeTab = ref('users')
|
|
||||||
</script>
|
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab strip (copy AdminView pattern verbatim) -->
|
<!-- Tab strip -->
|
||||||
<div class="flex border-b border-gray-200 mb-6">
|
<div class="flex border-b border-gray-200 mb-6">
|
||||||
<button
|
<button
|
||||||
v-for="tab in tabs"
|
v-for="tab in tabs"
|
||||||
|
|||||||
@@ -216,8 +216,9 @@ function resetToPassword() {
|
|||||||
|
|
||||||
async function handleLoginResult(result) {
|
async function handleLoginResult(result) {
|
||||||
if (!result) {
|
if (!result) {
|
||||||
// Full success — tokens set in store
|
// Full success — tokens set in store; admin users land at /admin (D-08)
|
||||||
const redirect = route.query.redirect || '/'
|
const defaultRedirect = authStore.user?.role === 'admin' ? '/admin' : '/'
|
||||||
|
const redirect = route.query.redirect || defaultRedirect
|
||||||
await router.push(redirect)
|
await router.push(redirect)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,10 @@
|
|||||||
import forms from '@tailwindcss/forms'
|
import forms from '@tailwindcss/forms'
|
||||||
export default {
|
export default {
|
||||||
content: ['./index.html', './src/**/*.{vue,js}'],
|
content: ['./index.html', './src/**/*.{vue,js}'],
|
||||||
|
safelist: [
|
||||||
|
{ pattern: /bg-(blue|sky|green|purple|orange|amber|gray|indigo|red)-(50|100|500|600)/ },
|
||||||
|
{ pattern: /text-(blue|sky|green|purple|orange|amber|gray|indigo|red)-(400|500|600|700)/ },
|
||||||
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user