186 lines
8.3 KiB
Markdown
186 lines
8.3 KiB
Markdown
# Login Screen - Rendered Example
|
|
|
|
This shows the actual login screen with realistic example data.
|
|
|
|
## Default State (Idle)
|
|
|
|
```
|
|
╭──────────────────────────────────────────╮
|
|
│ │
|
|
│ Welcome Back │
|
|
│ Sign in to continue │
|
|
│ │
|
|
│ Email │
|
|
│ ┌────────────────────────────────────┐ │
|
|
│ │ sarah.johnson@example.com │ │
|
|
│ └────────────────────────────────────┘ │
|
|
│ │
|
|
│ Password │
|
|
│ ┌────────────────────────────────────┐ │
|
|
│ │ •••••••• │👁│
|
|
│ └────────────────────────────────────┘ │
|
|
│ │
|
|
│ │
|
|
│ ╭──────────────────────────────────╮ │
|
|
│ │ Sign In │ │
|
|
│ ╰──────────────────────────────────╯ │
|
|
│ │
|
|
│ Forgot password? │ Create account │
|
|
│ │
|
|
╰──────────────────────────────────────────╯
|
|
```
|
|
|
|
## Loading State
|
|
|
|
```
|
|
╭──────────────────────────────────────────╮
|
|
│ │
|
|
│ Welcome Back │
|
|
│ Sign in to continue │
|
|
│ │
|
|
│ Email │
|
|
│ ┌────────────────────────────────────┐ │
|
|
│ │ sarah.johnson@example.com │ │
|
|
│ └────────────────────────────────────┘ │
|
|
│ │
|
|
│ Password │
|
|
│ ┌────────────────────────────────────┐ │
|
|
│ │ •••••••• │👁│
|
|
│ └────────────────────────────────────┘ │
|
|
│ │
|
|
│ │
|
|
│ ╭──────────────────────────────────╮ │
|
|
│ │ ⠋ Signing in... │ │
|
|
│ ╰──────────────────────────────────╯ │
|
|
│ │
|
|
│ Forgot password? │ Create account │
|
|
│ │
|
|
╰──────────────────────────────────────────╯
|
|
```
|
|
|
|
## Error State
|
|
|
|
```
|
|
╭──────────────────────────────────────────╮
|
|
│ │
|
|
│ Welcome Back │
|
|
│ Sign in to continue │
|
|
│ │
|
|
│ Email │
|
|
│ ┌────────────────────────────────────┐ │
|
|
│ │ sarah.johnson@example.com │ │
|
|
│ └────────────────────────────────────┘ │
|
|
│ │
|
|
│ Password │
|
|
│ ┌────────────────────────────────────┐ │
|
|
│ │ •••••••• │👁│
|
|
│ └────────────────────────────────────┘ │
|
|
│ │
|
|
│ ╭────────────────────────────────────╮ │
|
|
│ │ ❌ Invalid email or password │ │
|
|
│ ╰────────────────────────────────────╯ │
|
|
│ │
|
|
│ ╭──────────────────────────────────╮ │
|
|
│ │ Sign In │ │
|
|
│ ╰──────────────────────────────────╯ │
|
|
│ │
|
|
│ Forgot password? │ Create account │
|
|
│ │
|
|
╰──────────────────────────────────────────╯
|
|
```
|
|
|
|
## Data Context
|
|
|
|
This example demonstrates:
|
|
|
|
### User Input
|
|
- **Email**: sarah.johnson@example.com (valid format)
|
|
- **Password**: ******** (8 characters, masked for security)
|
|
|
|
### Screen Elements
|
|
- **Title**: "Welcome Back"
|
|
- **Subtitle**: "Sign in to continue"
|
|
- **Submit Button**: "Sign In" (primary action)
|
|
- **Password Toggle**: 👁 icon to show/hide password
|
|
- **Footer Links**: "Forgot password?" and "Create account"
|
|
|
|
### States Shown
|
|
1. **Idle**: Clean form ready for input
|
|
2. **Loading**: Spinner animation while authenticating
|
|
3. **Error**: Red error message showing failed authentication
|
|
|
|
## User Flow Demonstration
|
|
|
|
### Step 1: Initial State
|
|
User sees empty form with placeholder text
|
|
|
|
### Step 2: Input Data
|
|
User enters:
|
|
- Email: sarah.johnson@example.com
|
|
- Password: ••••••••
|
|
|
|
### Step 3: Submit
|
|
User clicks "Sign In" button
|
|
→ Form enters loading state
|
|
→ Shows spinner: "⠋ Signing in..."
|
|
|
|
### Step 4a: Success Path
|
|
✓ Credentials valid
|
|
→ Navigate to dashboard
|
|
|
|
### Step 4b: Error Path
|
|
✗ Credentials invalid
|
|
→ Show error: "❌ Invalid email or password"
|
|
→ Keep form populated for retry
|
|
→ Focus returns to password field
|
|
|
|
## Components Breakdown
|
|
|
|
This screen composition includes:
|
|
|
|
1. **Container** (outer box)
|
|
- Rounded corners for friendly feel
|
|
- Centered layout with padding
|
|
|
|
2. **Email Input** (component: email-input)
|
|
- Text field with email validation
|
|
- Shows user input: sarah.johnson@example.com
|
|
|
|
3. **Password Input** (adapted from email-input)
|
|
- Masked text field
|
|
- Show/hide toggle (👁 icon)
|
|
- Input: ••••••••
|
|
|
|
4. **Submit Button** (component: primary-button)
|
|
- Primary action styling
|
|
- Text: "Sign In"
|
|
- Loading state with spinner
|
|
|
|
5. **Error Alert** (conditional)
|
|
- Only visible in error state
|
|
- Red styling with ❌ icon
|
|
- Message: "Invalid email or password"
|
|
|
|
6. **Footer Links** (text elements)
|
|
- "Forgot password?" (clickable)
|
|
- "Create account" (clickable)
|
|
|
|
## Design Notes
|
|
|
|
- Clean, minimal design reduces cognitive load
|
|
- Clear visual hierarchy (title → inputs → action)
|
|
- Helpful error messaging guides user to fix issues
|
|
- Password masking with optional reveal improves security
|
|
- Footer links provide escape hatches for common scenarios
|
|
|
|
## Accessibility Features
|
|
|
|
- Proper heading hierarchy (h1 for title)
|
|
- Form labels associated with inputs
|
|
- Error messages announced to screen readers
|
|
- Keyboard navigation: Tab between fields, Enter to submit
|
|
- Focus indicators visible on all interactive elements
|
|
- High contrast text for readability
|
|
|
|
This rendered example shows exactly how the login screen appears and behaves in practice!
|