72 lines
2.4 KiB
Markdown
72 lines
2.4 KiB
Markdown
# Login Screen
|
|
|
|
User authentication screen with email and password inputs.
|
|
|
|
## Layout
|
|
|
|
```
|
|
╭──────────────────────────────────────────╮
|
|
│ │
|
|
│ {{title}} │
|
|
│ {{subtitle}} │
|
|
│ │
|
|
│ Email │
|
|
│ {{emailInput}} │
|
|
│ │
|
|
│ Password │
|
|
│ {{passwordInput}} │
|
|
│ │
|
|
│ {{errorMessage}} │
|
|
│ │
|
|
│ {{submitButton}} │
|
|
│ │
|
|
│ {{forgotPassword}} │ {{signupLink}} │
|
|
│ │
|
|
╰──────────────────────────────────────────╯
|
|
```
|
|
|
|
## Components Used
|
|
|
|
- **email-input**: Email address field with validation
|
|
- **password-input**: Password field with show/hide toggle (Note: using email-input as placeholder)
|
|
- **submit-button**: Form submission button (using primary-button)
|
|
- **error-alert**: Error message display (optional)
|
|
|
|
## States
|
|
|
|
### Idle State
|
|
User has not yet interacted with the form.
|
|
|
|
### Loading State
|
|
While authenticating user credentials.
|
|
|
|
### Error State
|
|
When authentication fails - shows error message above submit button.
|
|
|
|
## Variables
|
|
|
|
- `title` (string): Screen heading text
|
|
- `subtitle` (string): Subheading text
|
|
- `emailInput` (component): Email input component
|
|
- `passwordInput` (component): Password input component
|
|
- `submitButton` (component): Submit button component
|
|
- `errorMessage` (component): Error alert component
|
|
- `forgotPassword` (link): Forgot password link
|
|
- `signupLink` (link): Sign up link
|
|
|
|
## User Flows
|
|
|
|
1. User enters email address
|
|
2. User enters password
|
|
3. User clicks "Sign In" button
|
|
4. System validates credentials
|
|
5. If valid: Navigate to dashboard
|
|
6. If invalid: Show error message, allow retry
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: main
|
|
- **ARIA Label**: "Login form"
|
|
- **Keyboard**: Tab navigation between fields, Enter to submit
|
|
- **Screen Reader**: All fields properly labeled
|