# 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.