` block
(the one containing the `` link) with:
`![TOTP QR code]()
`
Keep the manual secret display section (the `
` block) immediately below the image
so users who cannot scan still have the fallback.
The QRCode.toDataURL call returns a Promise with a data:image/png;base64,... URL.
The img tag renders it inline without any server round-trip.
--- frontend/src/views/SettingsView.vue ---
Add an "Account" tab to SettingsView that embeds the AccountView content directly.
1. Add the tab entry to the tabs array (between 'preferences' and 'ai', or append after 'cloud' — append at the end is fine):
`{ id: 'account', label: 'Account' }`
2. Add a new tab panel below the existing three:
`Account settings
`
heading — SettingsView already provides the page chrome.
4. In SettingsView.vue script setup, add the import:
`import SettingsAccountTab from '../components/settings/SettingsAccountTab.vue'`
5. Update the /account route in frontend/src/router/index.js to redirect to settings:
`{ path: '/account', redirect: '/settings' }`
(Remove the lazy import of AccountView from the route — the view is now embedded in Settings.)
This ensures any bookmark or back-navigation to /account silently lands on /settings.
Do NOT delete AccountView.vue — leave it in place (the redirect makes it unreachable from the router, not deleted from disk).
cd /Users/nik/Documents/Progamming/document_scanner/frontend && npm run build 2>&1 | tail -5
## Trust Boundaries
| Boundary | Description |
|----------|-------------|
| router guard | Unauthenticated or non-admin client navigates directly to /admin |
| layout selection | Auth page accidentally renders app shell leaking user identity |
## STRIDE Threat Register
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|-----------|----------|-----------|-------------|-----------------|
| T-02-GAP-01 | Elevation of Privilege | router/index.js beforeEach | mitigate | requiresAdmin meta + role check; if authStore.user?.role !== 'admin' → redirect to / |
| T-02-GAP-02 | Information Disclosure | App.vue AppSidebar | mitigate | Conditional layout: auth routes render AuthLayout only; sidebar absent on all public routes |
| T-02-GAP-03 | Tampering | admin.py create_user flush order | accept | Already mitigated: await session.flush() present before write_audit_log(); regression test confirms FK ordering |
| T-02-GAP-SC | Tampering | npm install qrcode | mitigate | qrcode@1.5.x is the canonical npm package (weekly downloads 20M+); no server dependency; LEGITIMACY: VERIFIED |
Run all checks from the project root:
```bash
# Backend regression test (GAP 1 fix confirmed)
cd /Users/nik/Documents/Progamming/document_scanner/backend && pytest tests/test_admin_api.py -v -k "create_user"
# Full backend suite — zero failures
cd /Users/nik/Documents/Progamming/document_scanner/backend && pytest -v
# Frontend build — exits 0
cd /Users/nik/Documents/Progamming/document_scanner/frontend && npm run build
# Frontend test suite — exits 0
cd /Users/nik/Documents/Progamming/document_scanner/frontend && npm test
# Confirm layout guard is wired
grep -n "layout.*auth\|AuthLayout" /Users/nik/Documents/Progamming/document_scanner/frontend/src/App.vue
grep -n "layout.*auth" /Users/nik/Documents/Progamming/document_scanner/frontend/src/router/index.js | wc -l
# expect 4 (login, register, password-reset, password-reset/confirm)
# Confirm admin route guard
grep -n "requiresAdmin\|role.*admin" /Users/nik/Documents/Progamming/document_scanner/frontend/src/router/index.js
# Confirm QR library installed
grep "qrcode" /Users/nik/Documents/Progamming/document_scanner/frontend/package.json
# Confirm QR image rendered (not a link)
grep -n "toDataURL\|qrDataUrl\|img.*qr" /Users/nik/Documents/Progamming/document_scanner/frontend/src/components/auth/TotpEnrollment.vue
# Confirm Account tab in SettingsView
grep -n "account\|SettingsAccountTab" /Users/nik/Documents/Progamming/document_scanner/frontend/src/views/SettingsView.vue
```
1. `pytest tests/test_admin_api.py::test_create_user_writes_audit_log` passes — confirms audit_log FK ordering is correct under PostgreSQL
2. Visiting /login, /register, /password-reset renders AuthLayout (no sidebar, no user identity) — confirmed by App.vue v-if on route.meta.layout
3. Non-admin authenticated user navigating to /admin is redirected to / — confirmed by beforeEach requiresAdmin check
4. SettingsView has an Account tab containing TotpEnrollment, change password form, and sign-out-all; /account redirects to /settings
5. TotpEnrollment 'verify' step renders an `![]()
` tag sourced from QRCode.toDataURL(qrUri) — no `` link in production path
6. `pytest -v` in backend passes with zero failures
7. `npm run build` in frontend exits 0
8. `npm test` in frontend exits 0