feat(account): implement Accounts view with CRUD, import/export, validation

Merged
MP
6mo ago
+2048-28

Summary

Replace AccountsView placeholder with complete Accounts management UI. Implements multi-account CRUD across three categories (Debrid/Premium/Free), real-time validation with status tracking, AES-256 encrypted import/export with passphrase protection, and traffic monitoring. Integrates with backend Accounts repository (task 20), command handlers (task 21), and query handlers (task 22).

Why

Accounts are critical for Debrid/Premium services and file hosters. Users need intuitive multi-account management: add credentials, validate access, toggle enable/disable per account, track traffic consumption, and backup encrypted bundles. Phase 1 (v0.3 beta) target feature.

Changes

Backend (Rust)

  • 9 IPC commands in tauri_ipc.rs: account_add, account_update, account_delete, account_validate, account_list, account_get, account_traffic_get, account_export, account_import
  • Helper DTOs and validation: AccountPatchDto, ValidationOutcomeView, ExportAccountsView, ImportAccountsView
  • Wired CommandBus/QueryBus handlers to Tauri app state in lib.rs

Frontend (React/TypeScript)

  • New types: AccountView, AccountTraffic, AddAccountInput, ValidationOutcome in src/types/account.ts
  • Query hooks: useAccountsQuery() with TanStack Query cache + staleTime
  • Main orchestrator AccountsView.tsx: filter tabs (All/Debrid/Premium/Free), add/edit/delete/validate flows, import/export dialogs, real-time validation feedback
  • Sub-components: AccountList (table), AccountRow (row with status badge + traffic bar), AddAccountDialog (form), EditAccountDialog (patch form), DeleteAccountDialog (confirm), ImportExportDialog (two-part: export passphrase prompt + file save, import file picker + passphrase)
  • Utility: statusUtils.ts derives account status (active/expired/disabled/unverified) from account state + valid_until + enabled flag

i18n

  • 40+ new translation keys in en.json / fr.json under accounts namespace: titles, labels, filter tabs, dialog copy, success/error toasts, empty state
  • French translations for account types (Débrid, Premium, Gratuit)

Tests

  • AccountsView.test.tsx: 18 Vitest cases covering render, tabs, add/delete/import/export flows, passphrase input
  • statusUtils.test.ts: 5 unit tests for status derivation (all combinations of enabled/valid_until/error)
  • ≥80% coverage (currently 261 lines test code)
  • Updated French i18n test to exclude AccountsView from placeholder loop, added dedicated French heading test

Documentation

  • Updated CHANGELOG.md with detailed feature breakdown

Testing

All tests passing locally:

# Frontend
npx vitest run src/views/AccountsView/
npx vitest run src/i18n/__tests__/

# Rust (IPC commands)
cargo test --package vortex account_

# Full suite
npm run test:all
cargo test --workspace

Manual flows verified:

  • Add account → validate → displays with status badge and traffic bar ✓
  • Delete with confirmation (respects confirmBeforeDelete setting) ✓
  • Import encrypted file → passphrase prompt → list refreshed ✓
  • Export accounts → passphrase prompt → file save dialog ✓
  • Filter tabs switch between All/Debrid/Premium/Free ✓
  • Edit account (patch non-empty fields only) ✓
  • French translations rendered correctly in all dialogs ✓

Related Issues

  • Refs task #23 (Phase 1 — v0.3 beta sprint)

Notes for Reviewer

Large diff (2029 insertions, 21 files): review strategy recommended.

  • Backend first (src-tauri/src/adapters/driving/tauri_ipc.rs, lib.rs): 9 new IPC commands, 278 lines
  • Frontend components (src/views/AccountsView/*): 800 lines across 8 files, organized by responsibility
  • i18n (en.json, fr.json): 100+ lines per file, follow existing namespace pattern
  • Tests: Vitest comprehensive, includes import/export edge cases
  • No breaking changes: pure feature addition, placeholder fully replaced

Deferred from acceptance criteria: "Stats: volume downloaded via this account" — requires history.account_id column (separate schema migration task).

Checklist

  • Tests added/updated and passing (18 Vitest + 5 utils + French i18n)
  • Docs updated (CHANGELOG.md, inline component docs)
  • No secrets, debug prints, or commented-out code
  • Self-reviewed diff (cargo fmt, oxlint --fix, full linter pass)
  • CI green (cargo test, cargo clippy, npx vitest, oxlint, TypeScript)

Summary by cubic

Replaces the Accounts placeholder with a full management UI (CRUD, validate, traffic) plus AES-256 encrypted import/export. Adds nine Tauri IPC commands and wires SQLite repo, OS keyring, and passphrase codec to meet task #23.

  • New Features

    • UI: Tabs (All/Debrid/Premium/Free), table with status badges and traffic bar, enable switch, Validate button; dialogs for add/edit/delete/import/export; @tanstack/react-query caching via useAccountsQuery.
    • Security: Import/export uses AES-GCM with PBKDF2 passphrase; credentials live in the OS keyring; no plaintext.
    • IPC/Backend: 9 commands (account_add/update/delete/validate/export/import/list/get/traffic_get) with runtime wiring of SqliteAccountRepo, KeyringAccountStore, AesGcmPbkdf2Codec.
    • i18n: New accounts.* keys in English and French.
    • Tests: Vitest coverage for render, tabs, add/delete/import/export flows; status derivation unit tests; updated French UI test.

  • Bug Fixes

    • Validation: Invalidate accounts query after account_validate; support concurrent validations with a Set of IDs.
    • UI: Clamp negative used bytes in traffic; localize account type via t('accounts.filter.${type}').
    • Import/Export UX: Grant dialog:allow-open capability for the import file picker; remove misleading “missing file” toast on canceled save; add aria-label to import path; reset Add dialog on open (keeps default type).
    • IPC: Trim and ignore empty service_name in account_list filter.
    • Docs: Changelog corrected to list nine commands.

Summary by CodeRabbit

  • New Features

    • Full Accounts UI: add/edit/delete/validate, per-row actions, filtering by service/type/enabled, status badges, traffic usage/progress, validation history, import/export (encrypted bundles), dialogs and per-row validate progress.

  • Internationalization

    • English and French translations for the Accounts UI, dialogs, filters, labels and toast messages (including pluralization).

  • Tests

    • Component-level tests covering Accounts flows and unit tests for status logic.

  • Documentation

    • CHANGELOG updated with detailed Accounts entries.