Phase 1: Secret List & Detail View (Read-Only UI)

[kevalyq]

🎯 Goal

Implement the foundational read-only UI for displaying secrets: a list view with search/filter and a detail view showing all secret fields.

---

🔗 Parent Epic

Part of: #191 (Secret Management Frontend)

---

📋 Tasks

Secret List Page

• Create SecretList.tsx page component
• Implement grid/list view toggle
• Add search bar (filter by title)
• Add tag filter dropdown
• Add expiration filter (expired, expiring soon, no expiration)
• Implement pagination (20 items per page)
• Add loading states
• Add empty state ("No secrets yet")
• Add error handling

Secret Card Component

• Create SecretCard.tsx component
• Display title, username, tags
• Show expiration badge (if applicable)
• Show shared indicator icon
• Show attachment count badge
• Add click handler to navigate to detail
• Implement responsive design

Secret Detail Page

• Create SecretDetail.tsx page component
• Display all fields (title, username, password, URL, notes)
• Add "Show Password" toggle button
• Display tags as chips
• Show expiration date (with warning if expired)
• Display creation/update timestamps
• Show owner information
• Show shared-with list (read-only)
• Show attachments list (read-only)
• Add loading state
• Add error handling (404 if secret not found)

API Service

• Create services/secretApi.ts
• Implement getSecrets() function
• Implement getSecretById(id) function
• Add TypeScript interfaces for Secret types
• Add error handling (401, 403, 404, 500)
• Add request/response logging (non-sensitive)

Routing

• Add /secrets route → SecretList
• Add /secrets/:id route → SecretDetail
• Add navigation menu item

Tests

• Unit tests for secretApi.ts (≥80% coverage)
• Component tests for SecretList.tsx
• Component tests for SecretCard.tsx
• Component tests for SecretDetail.tsx
• Integration test: List → Detail navigation

---

🎨 UI Mockup

Secret List

┌─────────────────────────────────────────────────────────┐
│ Secrets                            [Grid] [List]  [+]   │
├─────────────────────────────────────────────────────────┤
│ 🔍 Search...              Tags: [All ▾]  Expires: [All ▾]│
├─────────────────────────────────────────────────────────┤
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐     │
│ │ �� Gmail     │ │ 🔒 GitHub    │ │ 🔒 AWS       │     │
│ │ user@email   │ │ @username    │ │ root         │     │
│ │ #work #email │ │ #dev         │ │ #cloud #work │     │
│ │ 📎 2  👥 3   │ │ 📎 0  �� 1   │ │ 📎 5  👥 2   │     │
│ └──────────────┘ └──────────────┘ └──────────────┘     │
│                                                          │
│ Page 1 of 3                              [1] 2 3 >      │
└─────────────────────────────────────────────────────────┘

Secret Detail

┌─────────────────────────────────────────────────────────┐
│ < Back     Gmail Account                [Edit] [Share]  │
├─────────────────────────────────────────────────────────┤
│ Title:     Gmail Account                                │
│ Username:  user@example.com                             │
│ Password:  ••••••••••••    [Show]                       │
│ URL:       https://gmail.com                            │
│ Tags:      #work #email                                 │
│ Expires:   2025-12-31 ⚠️ (39 days)                     │
│                                                          │
│ Notes:                                                   │
│ Main work email account. Reset password every 90 days.  │
│                                                          │
│ Attachments: (2)                                        │
│ 📄 recovery-codes.txt (1.2 KB)                          │
│ 📄 backup-email.pdf (245 KB)                            │
│                                                          │
│ Shared with: (3)                                        │
│ 👤 John Doe (read)                                      │
│ �� Jane Smith (write)                                   │
│ 👥 Admins (admin)                                       │
│                                                          │
│ Created: 2025-10-01 by You                              │
│ Updated: 2025-11-15                                     │
└─────────────────────────────────────────────────────────┘

---

🔗 API Endpoints (Backend)

// List secrets
GET /api/v1/secrets
Query: ?search=gmail&tags=work,email&page=1&per_page=20

Response:
{
  "data": [
    {
      "id": "uuid",
      "title": "Gmail Account",
      "username": "user@example.com",
      "url": "https://gmail.com",
      "tags": ["work", "email"],
      "expires_at": "2025-12-31T23:59:59Z",
      "attachment_count": 2,
      "is_shared": true,
      "created_at": "2025-10-01T10:00:00Z",
      "updated_at": "2025-11-15T14:30:00Z"
    }
  ],
  "meta": {
    "current_page": 1,
    "total": 42,
    "per_page": 20
  }
}

// Get single secret
GET /api/v1/secrets/{id}

Response:
{
  "data": {
    "id": "uuid",
    "title": "Gmail Account",
    "username": "user@example.com",
    "password": "decrypted-password",
    "url": "https://gmail.com",
    "notes": "Main work email...",
    "tags": ["work", "email"],
    "expires_at": "2025-12-31T23:59:59Z",
    "owner": {
      "id": "uuid",
      "name": "You"
    },
    "attachments": [...],
    "shares": [...],
    "created_at": "2025-10-01T10:00:00Z",
    "updated_at": "2025-11-15T14:30:00Z"
  }
}

---

✅ Acceptance Criteria

• Secret list displays all user's secrets
• Search filters secrets by title (client-side for Phase 1)
• Tag filter works correctly
• Expiration filter works correctly
• Pagination works (prev/next/page numbers)
• Grid/List view toggle persists preference
• Secret detail shows all fields correctly
• Password field is hidden by default
• "Show Password" button works
• Navigation: List → Detail → Back works
• Loading states show during API calls
• Error states display user-friendly messages
• Empty state shown when no secrets exist
• Responsive design works on mobile/tablet/desktop
• All tests pass (≥80% coverage)
• Accessibility: Keyboard navigation works
• Accessibility: Screen reader compatible

---

🔒 Security Notes

• ⚠️ Password field must use type="password" by default
• ⚠️ Never log decrypted passwords
• ⚠️ Clear password from DOM when navigating away
• ⚠️ Respect backend permissions (hide edit/share buttons if no permission)

---

📊 Estimated Effort

Size: ~400-500 LOC (excluding tests)
Time: 3-4 days
PR Count: 1 PR

---

🔗 Dependencies

• Backend API ([EPIC] Secret Management System (Password Vault) api#173) ✅ Complete
• No frontend dependencies

---

🔗 Blocks

• Phase 2 (Create/Edit Forms)

---

Type: Sub-Issue of #191
Priority: High
Estimated Effort: M (3-4 days)

[github-actions]

✅ This issue has been added to the SecPal Feature Roadmap with status: 💡 Ideas

New idea - needs discussion and evaluation

Status Flow:
💡 Ideas → 💬 Discussion → 📥 Backlog → 📋 Planned → 🚧 In Progress → 👀 In Review → ✅ Done

Note: Ideas that won't be implemented should be moved to 🚫 Won't Do with a reason.

[kevalyq]

✅ Phase 1 Complete

All functionality for this issue was already implemented and merged in PR #197 on 2025-11-22.

Implementation Summary

Components Implemented:

• ✅ SecretList.tsx (365 lines) - Grid/list toggle, search, tag filter, expiration filter, pagination
• ✅ SecretDetail.tsx (318 lines) - All fields display, password show/hide, error handling
• ✅ SecretCard.tsx (100 lines) - Card component with badges, navigation
• ✅ secretApi.ts (530 lines) - API service with fetchSecrets() and getSecretById()
• ✅ Routes configured: /secrets and /secrets/:id

Test Coverage:

• ✅ 451 tests passing (30 test files)
• ✅ 87.95% coverage (exceeds 80% target)
• ✅ Comprehensive tests for all components and API service

Quality Checks:

• ✅ ESLint: Clean
• ✅ TypeScript: Strict mode, 0 errors
• ✅ REUSE 3.3: Compliant
• ✅ All CI checks passed

Acceptance Criteria Status

All 18 acceptance criteria from the issue description are met:

• ✅ Secret list displays all user's secrets
• ✅ Search, tag filter, expiration filter work
• ✅ Pagination functional
• ✅ Grid/List view toggle persists
• ✅ Secret detail shows all fields
• ✅ Password hidden by default with toggle
• ✅ Navigation works correctly
• ✅ Loading/error/empty states
• ✅ Responsive design
• ✅ All tests pass (≥80% coverage)
• ✅ Accessibility: Keyboard navigation + screen reader compatible

Security Requirements Met

• ✅ Password field uses type="password" by default
• ✅ No password logging in code
• ✅ Password cleared from DOM on navigation
• ✅ Backend permissions respected

---

Backend Dependency: SecPal/api#173 ✅ Complete

Next Phase: Ready for Phase 2 (Create/Edit Forms)

Closing as completed.