Account Management Vault

Relevant source files

The following files were used as context for generating this wiki page:

• backend/server.py
• frontend/src/App.js
• backend_test.py
• frontend/src/App.css
• test_result.md

The Account Management Vault is a core module within the NEXUS system designed to centralize and secure digital credentials, subscription data, and platform-specific configurations. It provides a comprehensive CRUD (Create, Read, Update, Delete) interface that allows users to track platform URLs, login credentials, multi-factor authentication statuses, and billing cycles.

Integrated within a cyberpunk-inspired glassmorphic interface, the Vault serves as the primary repository for user accounts. It facilitates not only credential storage but also financial oversight by tracking monthly and annual costs, which feed into the global Dashboard Statistics. The system ensures data integrity through strict user isolation, where accounts are linked to unique user IDs and protected by JWT-based authentication.

Sources: backend/server.py:117-152, frontend/src/App.js:296-335, test_result.md:52-61

System Architecture and Data Flow

The Account Management Vault follows a standard client-server architecture. The React-based frontend communicates with a FastAPI backend via an asynchronous REST API. Data is persisted in a MongoDB database using the Motor driver.

Data Flow Diagram

The following diagram illustrates the lifecycle of an account creation request within the Vault.

The flow ensures that every transaction is validated against Pydantic models and scoped to the authenticated user's ID before reaching the database.
Sources: backend/server.py:30-34, backend/server.py:276-282, frontend/src/App.js:419-430

Data Models and Schemas

The system utilizes specialized data structures to handle the complexity of digital account metadata, including subscription types and security configurations.

The Account Object

The Account model defines the structure of stored credentials and associated metadata.

Field	Type	Description
id	UUID (string)	Unique identifier for the account entry.
platform_name	string	Name of the service (e.g., Netflix, GitHub).
email_used	string	Reference to the email address used for registration.
subscription_type	Enum	Classification: FREE, TRIAL, or PAID.
monthly_cost	float	Recurring monthly fee for the service.
two_fa_enabled	boolean	Indicates if two-factor authentication is active.
platform_category	Enum	Category such as ENTERTAINMENT, FINANCE, or SOCIAL.

Sources: backend/server.py:117-152, backend/server.py:53-84

Implementation Example (Python/Pydantic)

class Account(BaseModel):
    id: str = Field(default_factory=lambda: str(uuid.uuid4()))
    user_id: str
    platform_name: str
    username: str
    email_used: str
    password: str  # Note: To be encrypted in production
    subscription_type: SubscriptionType = SubscriptionType.FREE
    monthly_cost: Optional[float] = 0.0
    platform_category: PlatformCategory = PlatformCategory.OTHER

Sources: backend/server.py:117-142

Backend API Endpoints

The backend exposes a dedicated router with the /api prefix to handle all Vault operations. All endpoints (except registration/login) require a valid Authorization: Bearer <JWT_TOKEN> header.

Endpoint Summary

Method	Endpoint	Description
GET	/api/accounts	Retrieves all accounts belonging to the authenticated user.
POST	/api/accounts	Creates a new account entry.
GET	/api/accounts/{id}	Retrieves detailed information for a specific account.
PUT	/api/accounts/{id}	Updates an existing account's details.
DELETE	/api/accounts/{id}	Permanently removes an account from the vault.

Sources: backend/server.py:275-316, backend_test.py:168-245

Security and User Isolation

User isolation is enforced at the database query level. For every request, the user_id is extracted from the JWT token, ensuring users cannot access or modify accounts belonging to others.

@api_router.get("/accounts")
async def get_accounts(current_user: User = Depends(get_current_user)):
    accounts = await db.accounts.find({"user_id": current_user.id}).to_list(1000)
    return [Account(**account) for account in accounts]

Sources: backend/server.py:284-287

Frontend Interface

The Account Management interface is built using React and styled with a "Cyberpunk-meets-luxury" aesthetic. It utilizes glassmorphism effects defined in CSS via backdrop-filter: blur(20px).

Component Structure

• Accounts Component: Manages the overall state of the vault, including fetching accounts and handling deletions.
• AccountForm Component: A modal interface for creating and editing account records. It features dynamic validation and input handling for various account attributes.
• Account Cards: Individual glassmorphic cards that display platform names, status (Active/Inactive), and key details like monthly cost.

Sources: frontend/src/App.js:296-410, frontend/src/App.css:87-105

Visual Status Indicators

Accounts are visually tagged based on their status using CSS classes:

• .account-status.active: Neon Green border/text (#00FF88).
• .account-status.inactive: Cyber Orange border/text (#FF6B00).

Sources: frontend/src/App.css:487-505

Testing and Verification

The Vault's functionality is verified through a comprehensive Python testing suite that simulates real-world API interactions.

Sequence Diagram: CRUD Testing

The testing suite validates the full lifecycle of an account resource.

Summary

The Account Management Vault provides a robust, secure, and visually immersive environment for managing digital identities. By combining strict backend user isolation with a flexible Pydantic data model and a modern React frontend, it ensures that sensitive account information is both accessible to the user and protected from unauthorized access. The module's ability to track financial data directly informs the NEXUS dashboard, making it a critical component of the overall digital command center.