jesus/prvng_platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
prvng_platform/crates/control-center-ui/UI_MOCKUPS.md
Jesús Pérez 09a97ac8f5
chore: update platform submodule to monorepo crates structure 
Platform restructured into crates/, added AI service and detector,
       migrated control-center-ui to Leptos 0.8
2026-01-08 21:32:59 +00:00

407 lines
26 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Security UI Mockups and Screenshots
## 1. Login Page with MFA
### Initial Login Screen
```plaintext
┌────────────────────────────────────────────────────────┐
│ │
│ Control Center Logo │
│ │
│ Sign in to Control Center │
│ Enter your credentials to continue │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ Username or Email │ │
│ │ [_____________________________________] │ │
│ │ │ │
│ │ Password │ │
│ │ [_____________________________________] │ │
│ │ │ │
│ │ ☐ Remember me Forgot password? │ │
│ │ │ │
│ │ [ Sign In ] │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ Need help? Contact support │
│ │
└────────────────────────────────────────────────────────┘
```plaintext
### MFA Verification Screen
```plaintext
┌────────────────────────────────────────────────────────┐
│ │
│ 🔒 │
│ │
│ Two-Factor Authentication │
│ Enter the verification code from your authenticator │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ Verification Code │ │
│ │ │ │
│ │ [ 0 0 0 0 0 0 ] │ │
│ │ │ │
│ │ Enter the 6-digit code from your app │ │
│ │ │ │
│ │ [ Verify ] │ │
│ │ [ Back to login ] │ │
│ │ │ │
│ │ OR │ │
│ │ │ │
│ │ Lost access to your device? │ │
│ │ [ Use backup code ] │ │
│ └──────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────┘
```plaintext
## 2. Security Settings - MFA Devices
```plaintext
┌─────────────────────────────────────────────────────────────────┐
│ Security Settings [ + Add MFA Method ] │
│ Manage your two-factor authentication methods │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 📱 Google Authenticator [TOTP] │ │
│ │ Added: 2025-09-15 │ │
│ │ Last used: 2025-10-08 [ ⋮ ] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 🔑 YubiKey 5C [WebAuthn] │ │
│ │ Added: 2025-09-20 │ │
│ │ Last used: 2025-10-07 [ ⋮ ] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```plaintext
## 3. TOTP Setup Wizard
### Step 1: Introduction
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Setup Authenticator App │
│ │
│ ℹ️ You'll need an authenticator app like │
│ Google Authenticator, Authy, or 1Password. │
│ │
│ How it works: │
│ 1. Scan a QR code with your authenticator app │
│ 2. Enter a verification code to confirm │
│ 3. Save backup codes for account recovery │
│ 4. Use codes from your app to log in │
│ │
│ [ Get Started ] │
└─────────────────────────────────────────────────────────┘
```plaintext
### Step 2: Scan QR Code
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Scan QR Code │
│ │
│ Scan this QR code with your authenticator app │
│ │
│ ┌─────────────────────┐ │
│ │ ▓▓ ▓▓▓ ▓ ▓▓▓ │ │
│ │ ▓ ▓▓ ▓▓ ▓▓ ▓ │ │
│ │ ▓▓▓ ▓ ▓▓▓ ▓▓▓ │ │
│ │ ▓ ▓▓▓ ▓ ▓ ▓▓ │ │
│ └─────────────────────┘ │
│ │
│ OR │
│ │
│ Enter this code manually: │
│ [ JBSWY3DPEHPK3PXP ] [ 📋 Copy ] │
│ │
│ [ Continue ] │
└─────────────────────────────────────────────────────────┘
```plaintext
### Step 3: Verify
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Verify Setup │
│ │
│ Enter the 6-digit code from your authenticator app │
│ to confirm the setup: │
│ │
│ [ 0 0 0 0 0 0 ] │
│ │
│ [ Back ] [ Verify & Continue ] │
└─────────────────────────────────────────────────────────┘
```plaintext
### Step 4: Backup Codes
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Save Backup Codes │
│ │
│ ⚠️ Save these codes in a secure location. You can │
│ use them to access your account if you lose │
│ your device. │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ A1B2-C3D4 │ E5F6-G7H8 │ │
│ │ I9J0-K1L2 │ M3N4-O5P6 │ │
│ │ Q7R8-S9T0 │ U1V2-W3X4 │ │
│ │ Y5Z6-A7B8 │ C9D0-E1F2 │ │
│ │ G3H4-I5J6 │ K7L8-M9N0 │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ [ Download Codes ] [ Copy to Clipboard ] │
│ │
│ ☐ I have saved these codes in a secure location │
│ │
│ [ Complete Setup ] │
└─────────────────────────────────────────────────────────┘
```plaintext
## 4. API Tokens Management
```plaintext
┌─────────────────────────────────────────────────────────────────┐
│ API Tokens [ + Create Token ] │
│ Manage personal access tokens for API access │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ CI/CD Pipeline [Expired] │ │
│ │ prvng_...xyz │ │
│ │ Created: 2025-01-15 │ │
│ │ Last used: 2025-03-10 │ │
│ │ Expires: 2025-04-15 [ 🗑️ ] │ │
│ │ [read:servers] [write:servers] [read:taskservs] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Development Token │ │
│ │ prvng_...abc │ │
│ │ Created: 2025-09-01 │ │
│ │ Last used: 2025-10-08 │ │
│ │ Expires: 2025-12-01 [ 🗑️ ] │ │
│ │ [read:servers] [read:clusters] [read:audit] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```plaintext
### Create Token Dialog
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Create API Token [ ✕ ] │
│ │
│ Token Name │
│ [ e.g., CI/CD Pipeline ] │
│ A descriptive name to identify this token │
│ │
│ Expiration (days) │
│ [ 30 days ▼ ] │
│ │
│ Scopes │
│ ☑ read:servers │
│ ☑ write:servers │
│ ☑ read:taskservs │
│ ☐ write:taskservs │
│ ☑ read:clusters │
│ ☐ write:clusters │
│ ☐ read:audit │
│ │
│ [ Cancel ] [ Create Token ] │
└─────────────────────────────────────────────────────────┘
```plaintext
### Token Created Success
```plaintext
┌─────────────────────────────────────────────────────────┐
│ ✅ Token Created Successfully │
│ │
│ Make sure to copy your token now. You won't be │
│ able to see it again! │
│ │
│ [ prvng_1234567890abcdef... ] [ Copy ] │
│ │
└─────────────────────────────────────────────────────────┘
```plaintext
## 5. Audit Logs Viewer
```plaintext
┌─────────────────────────────────────────────────────────────────────────┐
│ Audit Logs [ Export ▼ ] │
│ View and search security audit logs │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Filters │ │
│ │ User Action Resource │ │
│ │ [________] [________] [________] │ │
│ │ │ │
│ │ Workspace Status Date From Date To │ │
│ │ [________] [All ▼] [📅 ____] [📅 ____] │ │
│ │ │ │
│ │ [ Clear Filters ] [ Search ] │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ Results Showing 50 of 1,234 events │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Timestamp User Action Resource Status │ │
│ ├─────────────────────────────────────────────────────────────────┤ │
│ │ 2025-10-08 10:30 alice@ex.com create server-01 ✓ success│ │
│ │ 192.168.1.100 45ms │ │
│ ├─────────────────────────────────────────────────────────────────┤ │
│ │ 2025-10-08 10:28 bob@ex.com delete cluster-02 ✓ success│ │
│ │ 10.0.0.50 230ms │ │
│ ├─────────────────────────────────────────────────────────────────┤ │
│ │ 2025-10-08 10:25 carol@ex.com login - ✕ failure│ │
│ │ 203.0.113.42 15ms │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ [ « ] [ Page 1 ] [ » ] │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```plaintext
## 6. WebAuthn Setup
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Setup Security Key (WebAuthn) │
│ │
│ ℹ️ Use a physical security key like YubiKey or │
│ your device's built-in biometric authentication │
│ (Touch ID, Face ID, Windows Hello). │
│ │
│ How it works: │
│ 1. Insert your security key or prepare biometric │
│ 2. Click the registration button │
│ 3. Follow your browser's prompts to register │
│ 4. Tap your key or use biometric when prompted │
│ │
│ Device Name (Optional) │
│ [ e.g., YubiKey 5C, MacBook Touch ID ] │
│ Give your security key a name to identify it later │
│ │
│ 🔑 │
│ Have your security key ready │
│ │
│ [ Register Security Key ] │
└─────────────────────────────────────────────────────────┘
```plaintext
### WebAuthn Registration in Progress
```plaintext
┌─────────────────────────────────────────────────────────┐
│ Setup Security Key (WebAuthn) │
│ │
│ [ 🔄 Waiting for device... ] │
│ │
│ ⚠️ Follow your browser's prompts │
│ │
│ You may need to tap your security key or use │
│ biometric authentication │
│ │
└─────────────────────────────────────────────────────────┘
```plaintext
### WebAuthn Success
```plaintext
┌─────────────────────────────────────────────────────────┐
│ ✅ │
│ │
│ Security Key Registered! │
│ │
│ Your security key has been successfully registered. │
│ You can now use it to log in. │
│ │
│ [ Done ] │
│ │
└─────────────────────────────────────────────────────────┘
```plaintext
## Color Scheme
### Primary Colors
- **Primary (Blue)**: `#3B82F6` - Actions, links, active states
- **Success (Green)**: `#10B981` - Successful operations
- **Warning (Yellow)**: `#F59E0B` - Warnings, cautions
- **Error (Red)**: `#EF4444` - Errors, failures
- **Info (Cyan)**: `#06B6D4` - Informational messages
### Neutral Colors
- **Base 100**: `#FFFFFF` - Card backgrounds
- **Base 200**: `#F3F4F6` - Page backgrounds
- **Base 300**: `#E5E7EB` - Borders, dividers
- **Base Content**: `#1F2937` - Text color
### Status Badges
- **TOTP Badge**: Primary blue
- **WebAuthn Badge**: Secondary purple
- **Success Badge**: Green with checkmark
- **Failure Badge**: Yellow with warning icon
- **Error Badge**: Red with X icon
- **Expired Badge**: Gray with red text
## Typography
### Headings
- **H1**: 2.25rem (36px), Bold - Page titles
- **H2**: 1.875rem (30px), Bold - Section titles
- **H3**: 1.5rem (24px), Bold - Card titles
- **H4**: 1.25rem (20px), Semi-bold - Subsection titles
### Body Text
- **Regular**: 1rem (16px), Normal - Body text
- **Small**: 0.875rem (14px), Normal - Labels, hints
- **Tiny**: 0.75rem (12px), Normal - Timestamps, metadata
### Monospace
- **Code**: 0.875rem (14px), Mono - Tokens, codes, IDs
## Icons
### Navigation Icons
- 🔒 Lock - MFA, security
- 🔑 Key - API tokens, access
- 📋 Clipboard - Audit logs
- ⚙️ Settings - Configuration
- 📱 Mobile - Authenticator app
### Status Icons
- ✓ Checkmark - Success
- ✕ X mark - Error
- ⚠️ Warning - Caution
- ℹ️ Info - Information
- 🔄 Refresh - Loading
### Action Icons
- ➕ Plus - Add/Create
- 🗑️ Trash - Delete/Remove
- 📥 Download - Export
- 📋 Copy - Clipboard
- ⋮ Vertical dots - More options
---
**Note**: All mockups use DaisyUI components with TailwindCSS styling. Actual implementation includes smooth transitions, hover states, focus indicators, and responsive layouts.
Reference in New Issue View Git Blame Copy Permalink