# Authentication Pages - Wireframes

> **UX Wireframe Documentation**
>
> Low và Mid-fidelity wireframes cho 3 trang xác thực

## 📋 Overview

**Pages**: Login, Register, Forgot Password
**Purpose**: Visual structure trước khi design chi tiết
**Tools**: Figma, Sketch, or hand-drawn
**Last Updated**: 2026-01-04

---

## 🎯 Wireframe Levels

### Low-Fidelity (Lo-Fi)
**Purpose**: Validate layout và information hierarchy
**Details**: Boxes, lines, placeholder text
**Colors**: Grayscale only (no brand colors)
**Time**: Quick sketches (15-30 mins per page)

### Mid-Fidelity (Mid-Fi)
**Purpose**: Define spacing, sizing, content
**Details**: Actual text, proper sizing, grid system
**Colors**: Still grayscale, but more refined
**Time**: Detailed mockups (1-2 hours per page)

---

## 📄 Page 1: Login

### Low-Fidelity Wireframe

```
┌─────────────────────────────────────┐
│                                     │ Theme/Lang
│         [App Icon/Logo]             │ ◐ EN▼
│                                     │
│         Sign In                     │
│         Subtitle text here          │
│                                     │
│    Email address                    │
│    ┌─────────────────────────────┐ │
│    │ your@email.com              │ │
│    └─────────────────────────────┘ │
│                                     │
│    Password                         │
│    ┌─────────────────────────────┐ │
│    │ ••••••••                👁  │ │
│    └─────────────────────────────┘ │
│                                     │
│    ☐ Remember me    Forgot password│
│                                     │
│    ┌─────────────────────────────┐ │
│    │        Sign In              │ │
│    └─────────────────────────────┘ │
│                                     │
│    Don't have an account? Sign up  │
│                                     │
└─────────────────────────────────────┘

Annotations:
- Container: 448px max-width, centered
- Vertical spacing: 24px between sections
- Input height: 44px
- Button height: 48px
```

**Figma Link**: [Add lo-fi wireframe link]

**Screenshot**:
![Login Lo-Fi](../../../public/design/wireframes/login-lofi.png)
*TODO: Add wireframe screenshot*

---

### Mid-Fidelity Wireframe

```
┌────────────────────────────────────────────┐
│                                            │ [Theme] [Lang]
│              ┌────────┐                    │
│              │  [★]   │  App Icon          │
│              └────────┘  56x56px           │
│                                            │
│        Sign in to your account             │  36px, Bold
│        Enter your credentials to access... │  14px, Gray
│                                            │
│                                            │
│    Email address                           │  14px label
│    ┌──────────────────────────────────┐   │
│    │ you@example.com                  │   │  16px text
│    └──────────────────────────────────┘   │  44px height
│                                            │
│                                            │  16px gap
│    Password                                │  14px label
│    ┌──────────────────────────────────┐   │
│    │ ••••••••                    👁   │   │  16px text
│    └──────────────────────────────────┘   │  44px height
│                                            │
│                                            │  12px gap
│    ☐ Remember me          Forgot password?│  14px
│                                            │
│                                            │  24px gap
│    ┌──────────────────────────────────┐   │
│    │          Sign in                 │   │  16px, 600 weight
│    └──────────────────────────────────┘   │  48px height
│                                            │
│                                            │  16px gap
│    Don't have an account? Sign up          │  14px
│    ────────────────────     ───────        │  Blue underline
│                                            │
└────────────────────────────────────────────┘

Measurements:
- Container: max-width 448px, padding 32px
- Form to edges: 32px padding
- Label to input: 8px
- Input to input: 16px
- Checkbox to link: space-between
- Button margin-top: 24px

Grid:
- 8-point grid system
- Vertical rhythm: 8px base

Typography:
- H1: 36px, extrabold
- Subtitle: 14px, regular
- Labels: 14px, medium
- Inputs: 16px, regular
- Button: 16px, semibold
- Links: 14px, medium
```

**Figma Link**: [Add mid-fi wireframe link]

**Screenshot**:
![Login Mid-Fi](../../../public/design/wireframes/login-midfi.png)
*TODO: Add wireframe screenshot*

---

## 📄 Page 2: Register

### Low-Fidelity Wireframe

```
┌─────────────────────────────────────┐
│                                     │ Theme/Lang
│         [App Icon/Logo]             │ ◐ EN▼
│                                     │
│         Create Account              │
│         Subtitle text here          │
│                                     │
│    Email address                    │
│    ┌─────────────────────────────┐ │
│    │ your@email.com              │ │
│    └─────────────────────────────┘ │
│                                     │
│    Password                         │
│    ┌─────────────────────────────┐ │
│    │ ••••••••                👁  │ │
│    └─────────────────────────────┘ │
│    Strength: [▓▓▓▓░] Strong        │
│                                     │
│    Confirm Password                 │
│    ┌─────────────────────────────┐ │
│    │ ••••••••                👁  │ │
│    └─────────────────────────────┘ │
│                                     │
│    ☐ I agree to Terms & Conditions │
│                                     │
│    ┌─────────────────────────────┐ │
│    │        Sign Up              │ │
│    └─────────────────────────────┘ │
│                                     │
│    Already have an account? Sign in│
│                                     │
└─────────────────────────────────────┘

Annotations:
- Password strength: 4-bar indicator
- Confirm password: validates match
- Terms checkbox: required
- Same spacing as login
```

**Figma Link**: [Add lo-fi wireframe link]

**Screenshot**:
![Register Lo-Fi](../../../public/design/wireframes/register-lofi.png)
*TODO: Add wireframe screenshot*

---

### Mid-Fidelity Wireframe

```
┌────────────────────────────────────────────┐
│                                            │ [Theme] [Lang]
│              ┌────────┐                    │
│              │  [★]   │  App Icon          │
│              └────────┘  56x56px           │
│                                            │
│        Create your account                 │  36px, Bold
│        Get started with your free account  │  14px, Gray
│                                            │
│                                            │
│    Email address                           │  14px label
│    ┌──────────────────────────────────┐   │
│    │ you@example.com                  │   │  16px text
│    └──────────────────────────────────┘   │  44px height
│                                            │
│                                            │  16px gap
│    Password                                │  14px label
│    ┌──────────────────────────────────┐   │
│    │ ••••••••                    👁   │   │  16px text
│    └──────────────────────────────────┘   │  44px height
│                                            │
│    Password strength                       │  12px gray
│    ┌──┬──┬──┬──┐                          │  4px height bars
│    │▓▓│▓▓│▓▓│░░│ Strong                   │  Green text
│    └──┴──┴──┴──┘                          │
│                                            │  12px gap
│    Confirm Password                        │  14px label
│    ┌──────────────────────────────────┐   │
│    │ ••••••••                    👁   │   │  16px text
│    └──────────────────────────────────┘   │  44px height
│                                            │
│                                            │  16px gap
│    ☐ I agree to Terms of Service and      │  14px
│      Privacy Policy                        │  Blue links
│                                            │
│                                            │  24px gap
│    ┌──────────────────────────────────┐   │
│    │         Create Account           │   │  16px, 600 weight
│    └──────────────────────────────────┘   │  48px height
│                                            │
│                                            │  16px gap
│    Already have an account? Sign in        │  14px
│    ──────────────────────────  ───────     │  Blue underline
│                                            │
└────────────────────────────────────────────┘

Password Strength States:
- Weak: 1 bar (Red)
- Fair: 2 bars (Orange)
- Good: 3 bars (Amber)
- Strong: 4 bars (Green)

Validation:
- Email: valid format
- Password: min 8 chars, 1 uppercase, 1 number
- Confirm: matches password
- Terms: must be checked
```

**Figma Link**: [Add mid-fi wireframe link]

**Screenshot**:
![Register Mid-Fi](../../../public/design/wireframes/register-midfi.png)
*TODO: Add wireframe screenshot*

---

## 📄 Page 3: Forgot Password

### Low-Fidelity Wireframe

```
┌─────────────────────────────────────┐
│                                     │ Theme/Lang
│         [App Icon/Logo]             │ ◐ EN▼
│                                     │
│         Reset Password              │
│         Subtitle text here          │
│                                     │
│    Email address                    │
│    ┌─────────────────────────────┐ │
│    │ your@email.com              │ │
│    └─────────────────────────────┘ │
│                                     │
│    ┌─────────────────────────────┐ │
│    │     Send Reset Link         │ │
│    └─────────────────────────────┘ │
│                                     │
│    ← Back to Sign in                │
│                                     │
└─────────────────────────────────────┘

Success State:
┌─────────────────────────────────────┐
│         [✓ Icon]                    │
│                                     │
│         Check your email            │
│         We sent reset link to...    │
│                                     │
│    [Open Email App]                 │
│                                     │
│    Send to another email            │
│    ← Back to Sign in                │
└─────────────────────────────────────┘
```

**Figma Link**: [Add lo-fi wireframe link]

**Screenshot**:
![Forgot Password Lo-Fi](../../../public/design/wireframes/forgot-password-lofi.png)
*TODO: Add wireframe screenshot*

---

### Mid-Fidelity Wireframe

**Initial State**:
```
┌────────────────────────────────────────────┐
│                                            │ [Theme] [Lang]
│              ┌────────┐                    │
│              │  [★]   │  App Icon          │
│              └────────┘  56x56px           │
│                                            │
│        Reset your password                 │  36px, Bold
│        Enter your email to receive a...    │  14px, Gray
│                                            │
│                                            │
│    Email address                           │  14px label
│    ┌──────────────────────────────────┐   │
│    │ you@example.com                  │   │  16px text
│    └──────────────────────────────────┘   │  44px height
│                                            │
│                                            │  24px gap
│    ┌──────────────────────────────────┐   │
│    │       Send Reset Link            │   │  16px, 600 weight
│    └──────────────────────────────────┘   │  48px height
│                                            │
│                                            │  16px gap
│    ← Back to Sign in                       │  14px, blue
│                                            │
└────────────────────────────────────────────┘
```

**Success State**:
```
┌────────────────────────────────────────────┐
│                                            │ [Theme] [Lang]
│                                            │
│              ┌────────┐                    │
│              │  [✓]   │  Success Icon      │
│              └────────┘  56x56px, Green    │
│                                            │
│        Check your email                    │  36px, Bold
│        We've sent a password reset link    │  14px, Gray
│        to your@example.com                 │
│                                            │
│                                            │  24px gap
│    ┌──────────────────────────────────┐   │
│    │       Open Email App             │   │  16px, Blue button
│    └──────────────────────────────────┘   │  48px height
│                                            │
│                                            │  12px gap
│    Didn't receive email? Resend            │  14px
│                                            │
│                                            │  16px gap
│    ← Back to Sign in                       │  14px, blue
│                                            │
└────────────────────────────────────────────┘

Notes:
- Success icon: Green checkmark circle
- Email shown: User's entered email
- Open Email App: Deep link to mail client
- Resend link: Available after 60 seconds
```

**Figma Link**: [Add mid-fi wireframe link]

**Screenshot**:
![Forgot Password Mid-Fi](../../../public/design/wireframes/forgot-password-midfi.png)
*TODO: Add wireframe screenshot*

---

## 📐 Design Grid & Spacing

### 8-Point Grid System

**Base Unit**: 8px

**Vertical Rhythm**:
- Extra small: 4px (0.5 unit)
- Small: 8px (1 unit)
- Medium: 16px (2 units)
- Large: 24px (3 units)
- Extra large: 32px (4 units)
- Section: 48px (6 units)

**Horizontal Spacing**:
- Container padding: 32px (4 units)
- Mobile padding: 16px (2 units)
- Element spacing: 8px, 12px, 16px, 24px

### Layout Grid

**Desktop (> 1024px)**:
- Max-width: 448px
- Centered in viewport
- Padding: 32px

**Tablet (640-1024px)**:
- Max-width: 448px
- Centered
- Padding: 24px

**Mobile (< 640px)**:
- Full width
- Padding: 16px
- Adjust spacing (reduce by 25%)

---

## 🎨 Wireframe Conventions

### Visual Elements

**Boxes**:
- Rectangle: Input field, button, container
- Rounded rectangle: Button (8px radius)
- Circle: Icon, avatar
- Line: Separator

**Text**:
- UPPERCASE: Labels, headings
- Mixed case: Body text, placeholder
- Lorem ipsum: Placeholder content
- Actual copy: Mid-fi onwards

**Icons**:
- [X]: Close/remove
- [?]: Help/info
- [⚙]: Settings
- [★]: App icon placeholder
- [👁]: Show/hide password
- [✓]: Success, checkmark
- [⚠]: Warning
- [ⓘ]: Information

**Interaction States**:
- Dotted line: Focus state
- Gray background: Disabled state
- Bold outline: Active/selected state

---

## 📱 Responsive Wireframe Variants

### Mobile Wireframe (< 640px)

**Changes from Desktop**:
- Full-width layout
- Reduced padding (16px)
- Smaller heading (28px)
- Adjusted spacing (reduce 25%)
- Stack all elements vertically
- Theme/Lang controls: Smaller (36px)

**Screenshot**:
![Mobile Wireframe](../../../public/design/wireframes/auth-mobile-wireframe.png)
*TODO: Add mobile wireframe*

---

### Tablet Wireframe (640-1024px)

**Changes from Desktop**:
- Same max-width (448px)
- Centered layout
- Slightly adjusted padding (24px)

---

## 🔄 User Flow Integration

### Wireframe Flow Diagram

```
┌──────────┐
│  Login   │────────────┐
│   Page   │            │
└────┬─────┘            │
     │                  ▼
     │            ┌───────────┐
     │            │  Forgot   │
     │            │ Password  │
     │            └───────────┘
     │
     ▼
┌──────────┐
│ Register │
│   Page   │
└──────────┘

Transitions:
- Login → Forgot: "Forgot password?" link
- Login → Register: "Sign up" link
- Forgot → Login: "Back to sign in" link
- Register → Login: "Sign in" link
```

### Page States

**Login**:
1. Default (empty form)
2. Typing (with values)
3. Error (validation failed)
4. Loading (submitting)
5. Success (redirect)

**Register**:
1. Default (empty form)
2. Typing (with password strength)
3. Error (validation failed)
4. Loading (submitting)
5. Success (redirect or confirm email)

**Forgot Password**:
1. Default (empty form)
2. Typing (email entered)
3. Loading (sending)
4. Success (email sent confirmation)
5. Error (email not found)

---

## ✅ Wireframe Review Checklist

### Content
- [ ] All necessary fields included
- [ ] Labels clear and descriptive
- [ ] CTAs (Call-to-Actions) obvious
- [ ] Error states considered
- [ ] Success states designed
- [ ] Loading states indicated

### Layout
- [ ] Visual hierarchy clear
- [ ] Important elements prominent
- [ ] Spacing consistent
- [ ] Alignment proper
- [ ] Grid system applied
- [ ] Responsive variants created

### Interaction
- [ ] Touch targets adequate (44px+)
- [ ] Links distinguishable
- [ ] Form flow logical
- [ ] Error messages positioned well
- [ ] Focus states indicated

### Accessibility
- [ ] Heading hierarchy correct (H1, H2, H3)
- [ ] Form labels associated with inputs
- [ ] Focus order logical
- [ ] Color not sole indicator
- [ ] Alt text for images/icons (noted)

---

## 🔗 Next Steps

After wireframes approved:

1. **Create High-Fidelity Mockups**:
   - Apply X.ai color palette
   - Add glassmorphism effects
   - Finalize typography
   - Design all states
   - See: [Auth Mockups](../mockups/auth-login-states.md)

2. **Build Interactive Prototype**:
   - Link pages in Figma
   - Add transitions
   - Test user flow
   - Get stakeholder feedback

3. **Handoff to Development**:
   - Export assets
   - Create specs
   - Write implementation guide
   - See: [Implementation Guide](../../implementation/auth-pages-implementation.md)

---

## 📚 Related Documentation

- [Login User Flow](../flows/auth-login.md)
- [Sitemap](../sitemap.md)
- [High-Fi Mockups](../../ui/mockups/auth-login-states.md)
- [Mobile Specs](../../ui/responsive/mobile-specs.md)
- [Design System](../../DESIGN_SYSTEM.md)

---

**Created by**: UX Team
**Last Updated**: 2026-01-04
**Version**: 2.0 (X.ai Minimal Redesign)
**Status**: Ready for High-Fi Design
