Page: Security Settings
Code: SSEC Route: /settings/security Access: Authenticated Priority: P1 Test Script: scripts/page-tests/test-SSEC.sh Components: src/components/settings/SecuritySettings.tsx
Purpose
Allow users to manage account security including password, active sessions, and account deletion.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
| SETT | "Security" menu item | From main settings page |
Outgoing (users navigate to)
| Target | Trigger | Notes |
| SETT | Breadcrumb navigation | Return to settings |
| PWRS | "Change password" link | Password reset flow |
| HOME | Logout button | After logout redirect |
Data Requirements
| Entity | Fields Used | Purpose |
| users | id, email, created_at | Display account info and enable deletion |
Sections
Header
- • Page title: "Security Settings"
- • Description of purpose
Password
- • Current password hint (last changed)
- • Change password link/button to PWRS
Active Sessions
- • Coming soon placeholder
- • Future: list of active sessions with device info
- • Future: revoke session buttons
Account Actions
- • Logout button
- • Logout all devices (future)
Danger Zone
- • Delete account section with warning
- • Confirmation dialog with typed email
- • Account deletion effects explanation
User Stories Fulfilled
- • US-S049
- • US-S050
- • US-S051
- • US-S052
States & Variations
| State | Description |
| Default | All sections displayed, actions available |
| Deleting | Delete confirmation modal open |
| Processing | Deletion in progress, modal buttons disabled |
| Logging Out | Logout in progress |
Mobile Considerations
- • Buttons full-width on small screens
- • Modal responsive to viewport
- • Touch-friendly button targets
Error Handling
| Error | Display |
| Logout failed | Toast with retry option |
| Delete failed | Error in modal, keep modal open |
| Email mismatch | Inline validation in delete modal |
Analytics Events
| Event | Trigger | Data |
page_view | Page load | security_settings |
logout | Logout clicked | source: security_settings |
account_delete_initiated | Delete modal opened | |
account_deleted | Account successfully deleted | |
Notes
- • Password change uses existing PWRS flow
- • Active sessions feature requires schema changes (future)
- • Account deletion is permanent and irreversible
- • Deletion requires email confirmation to prevent accidents
Features
Password Management
- ✓
Change password link to PWRS flow [US-S049]
Session Management
- ○
Active sessions list [US-S050]
Account Actions
- ✓
Logout with redirect to HOME [US-S051]
- ✓
Delete account with confirmation [US-S052]
Interactive Elements
Buttons: 5/5 active
Links: 1/1 active
Buttons
| Element | Component | Action | Status |
| Change Password | SecuritySettings | Navigate to /reset-password | active |
| Logout | SecuritySettings | POST /api/auth/logout | active |
| Delete Account | SecuritySettings | Open delete confirmation modal | active |
| Confirm Delete | SecuritySettings | DELETE /api/me/account | active |
| Cancel Delete | SecuritySettings | Close modal | active |
Links
Navigation
| Element | Target | Status |
| Settings breadcrumb | /settings | active |
Target Pages Status
| Target | Page Code | Status |
/settings | SETT | Implemented |
/reset-password | PWRS | Implemented |
/ | HOME | Implemented |
Test Coverage
Component ✓
Page ○
SSR ○
API 3/4
Script: scripts/page-tests/test-SSEC.sh
Page Test: tests/pages/settings/security.test.tsx ○
Component Test: tests/components/settings/SecuritySettings.test.tsx ✓
API Tests
| Endpoint | Test File | Status |
(covered by profile.test.ts) | tests/api/me/profile.test.ts | ✓ tested |
POST /api/auth/logout | tests/api/auth/logout.test.ts | ✓ tested |
DELETE /api/me/account | tests/api/me/account.test.ts | ✓ tested |
GET /api/me/profile (fetches user email) | — | ○ pending |