[EPIC] Secret Management Frontend (Password Vault UI) #191
Description
🎯 Epic Overview
Build a comprehensive Secret Management UI for SecPal with encrypted field storage, file attachments, sharing, and full offline PWA support. Backend API (SecPal/api#173) is complete ✅
📦 Phases
✅ Phase 1: Secret List & Detail View - MERGED 22.11.2025
Core UI for viewing secrets in list and detail views with search, filtering, and read-only display.
Deliverables:
- ✅
SecretList.tsx- Grid/list view with search/filter - ✅
SecretDetail.tsx- Full detail view with encrypted fields - ✅
SecretCard.tsx- Reusable card component - ✅ API integration:
getSecrets(),getSecretById()
PR: #197 (merged 22.11.2025)
Tests: 31 new tests (450 total passing)
Coverage: 87.95%
Status: ✅ Complete
Effort: M (3-4 days) - Actual: 3 days
✅ Phase 2: Secret Create/Edit Forms - MERGED 22.11.2025
Forms for creating and editing secrets with field-level encryption validation.
Deliverables:
- ✅
SecretForm.tsx- Create/edit form with validation - ✅
SecretCreate.tsx- Create page - ✅
SecretEdit.tsx- Edit page - ✅ API integration:
createSecret(),updateSecret(),deleteSecret()
PR: #198 (merged 22.11.2025)
Tests: 28 new tests (all passing)
Routes: /secrets/new, /secrets/:id/edit
Status: ✅ Complete
Effort: M (3-4 days) - Actual: 3 days
✅ Phase 3: File Attachments UI Integration - MERGED 22.11.2025
Integrate existing encrypted file attachment system into secret detail view.
Deliverables:
- ✅
AttachmentUpload.tsx- Drag-and-drop with validation - ✅
AttachmentPreview.tsx- Image/PDF preview modal - ✅
AttachmentListintegration inSecretDetail.tsx - ✅ Upload/download encrypted files
- ✅ Attachment metadata display
PR: #200 (merged 22.11.2025)
Tests: 21 new tests (547 total passing)
Coverage: 87.95%
Status: ✅ Complete
Effort: S (1-2 days) - Actual: 2 days
🔜 Phase 4: Secret Sharing UI
UI for sharing secrets with other users (view/edit permissions, expiration).
Deliverables:
SecretShareDialog.tsx- Share modal with user searchShareList.tsx- Display active shares- API integration:
shareApi.ts(share, revoke, list shares)
Status: 🟡 Ready to start (Phase 3 complete)
Effort: M-L (4-5 days)
🔜 Phase 5: Offline Support & PWA Integration
IndexedDB caching, offline sync queue, background sync, conflict resolution.
Deliverables:
stores/secretStore.ts- Dexie.js schema for secrets- Offline sync queue integration
- Service Worker caching strategies
ConflictResolutionDialog.tsx- Resolve sync conflicts- Offline badges and sync status UI
Status: ⏸️ Blocked by Phase 4
Effort: L (5-6 days)
📊 Epic Summary
Total Effort: ~16-20 days
Progress: 3/5 phases complete (60%)
Completed Issues: #192, #193, #194
Remaining Issues: #195, #196
Dependencies:
- Backend API ([EPIC] Secret Management System (Password Vault) api#173) ✅ Complete
- Backend Sharing API (Phase 3: Secret Sharing & Access Control (RBAC Integration) api#182) ✅ Complete
- PWA infrastructure (Epic: Progressive Web App Infrastructure #64) ✅ Phases 1-3 complete
- File Encryption (feat(crypto): Phase 1 - AES-GCM-256 Encryption Utilities #177-docs: Security Audit & Documentation (Phase 5/5) #190) ✅ Complete
Tech Stack:
- React 18 + TypeScript
- Catalyst UI Kit (Tailwind Labs)
- React Router v7
- Dexie.js (IndexedDB)
- Workbox (Service Worker)
- Zero-knowledge encryption (AES-GCM-256)
✅ Definition of Done (Epic)
- Phase 1: Secret List & Detail Views (PR feat: Secret Management UI Phase 1 (List & Detail Views) #197, merged)
- Phase 2: Secret Create/Edit Forms (PR Phase 2: Secret Create/Edit Forms (Implements #193) #198, merged)
- Phase 3: File Attachments UI (PR feat(frontend): Phase 3 - File Attachments UI Integration #200, merged)
- Phase 4: Secret Sharing UI (Phase 4: Secret Sharing UI #195)
- Phase 5: Offline Support & PWA Integration (Phase 5: Offline Support & PWA Integration #196)
- Full CRUD operations for secrets
- Encrypted field storage (client-side)
- File attachments (encrypted)
- Secret sharing with permissions
- Works fully offline after first load
- Background sync for offline operations
- Conflict resolution for concurrent edits
- All tests pass (≥80% coverage) - Current: 87.95%
- All CI checks green (ESLint, TypeScript, Vitest, REUSE)
- Documentation updated (CHANGELOG.md, README.md)
Labels: Epic, Priority: High
Estimated Completion: ~4 weeks (sequential phases)
Current Progress: 60% complete (8/20 days)