# Login

## Purpose
The Login page provides authentication for admin users to access the Pay-U Admin Panel. It supports email/password authentication with optional Google Authenticator 2FA verification and includes a captcha for bot protection.

## Components
- Background decorative elements (circles, shields, dots)
- Glassmorphism login card
- Logo with icon and tagline "Secure • Fast • Reliable"
- Language switcher dropdown
- Login form with multiple verification layers
- Demo credentials display

## Header
- **Logo**: PayGate shield icon with "PayGate" text
- **Tagline**: "Secure • Fast • Reliable"
- **Language Selector**: Dropdown with EN, 繁体中文, 简体中文 options

## Filters
None

## Search
None

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Sign In | Submits login form | Form footer |
| Password Toggle | Shows/hides password | Password field suffix |
| Captcha Refresh | Regenerates captcha code | Captcha field suffix |

## Forms

### Login Form
| Field | Type | Required | Placeholder | Validation |
|-------|------|----------|-------------|------------|
| Email | email | Yes | "Email address" | Valid email format |
| Password | password | Yes | "Password" | Min length |
| Verification Code | text | Yes | "Enter code" | Must match captcha |
| Google Verification | text | Yes | "Enter 2FA code" | 6-digit code |

### Language Selector
| Field | Type | Options |
|-------|------|---------|
| Language | select | EN, 繁体中文, 简体中文 |

## Tables
None

## Action Buttons
| Button | Function |
|--------|----------|
| Sign In | Authenticate user and redirect to dashboard |
| Password Toggle | Toggle password visibility |
| Captcha Refresh | Generate new random captcha |

## Workflow
1. User enters email address
2. User enters password
3. User solves captcha (visual code verification)
4. User enters Google Authenticator code (2FA)
5. User clicks "Sign In"
6. System validates credentials
7. On success, redirect to `dashboard.html`
8. On failure, display error message

### Demo Credentials
| Role | Email | Password |
|------|-------|----------|
| Super Admin | super@paygate.com | admin123 |
| Admin | admin@paygate.com | admin123 |
| Operations | ops@paygate.com | admin123 |

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `email` | Email | Form label |
| `password` | Password | Form label |
| `remember_me` | Remember me | Checkbox label |
| `sign_in` | Sign In | Submit button |
| `secure_fast_reliable` | Secure • Fast • Reliable | Tagline |
| `language` | Language | Selector label |
| `forgot_password` | Forgot Password? | Link text |
| `username_placeholder` | Enter your username | Placeholder |
| `password_placeholder` | Enter your password | Placeholder |
| `verification_code` | Verification Code | Field label |
| `verification_code_placeholder` | Enter verification code | Placeholder |
| `google_verification` | Google Verification | Field label |
| `google_verification_placeholder` | Enter 2FA code | Placeholder |

## Responsive Requirements

### Desktop (≥1024px)
- Centered login card with decorative background
- Full-width form fields
- Side-by-side captcha and refresh button

### Tablet (768px–1023px)
- Reduced card padding
- Maintained centered layout

### Mobile (<768px)
- Compact card with reduced padding
- Stacked form fields
- Smaller captcha display
- Adjusted font sizes

## API Dependency
- **Authentication API**: POST `/api/auth/login` — Validates credentials
- **Captcha API**: GET `/api/auth/captcha` — Generates captcha image/code
- **2FA Verification**: POST `/api/auth/verify-2fa` — Validates Google Authenticator code
- **Session Management**: Creates JWT token on successful login