| # Authentication Views Visual Guide |
|
|
| This document describes the visual design and layout of the authentication views. |
|
|
| ## Layout Structure |
|
|
| Both LoginView and RegisterView use the AuthLayout component, which provides: |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ │ |
| │ ┌─────────────────────────────────────┐ │ |
| │ │ │ │ |
| │ │ Sub2API Logo │ │ |
| │ │ "Subscription to API Conversion" │ │ |
| │ │ │ │ |
| │ └─────────────────────────────────────┘ │ |
| │ │ |
| │ ┌─────────────────────────────────────┐ │ |
| │ │ │ │ |
| │ │ [Form Content - White Card] │ │ |
| │ │ │ │ |
| │ └─────────────────────────────────────┘ │ |
| │ │ |
| │ [Footer Links] │ |
| │ │ |
| └─────────────────────────────────────────────┘ |
| |
| Background: Gradient (Indigo → White → Purple) |
| Card: White with rounded corners and shadow |
| Max Width: 28rem (448px) |
| Centered: Both horizontally and vertically |
| ``` |
|
|
| ## LoginView Visual Design |
|
|
| ### Default State |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ │ |
| │ 🔷 Sub2API │ |
| │ Subscription to API Conversion Platform │ |
| │ │ |
| │ ┌─────────────────────────────────────┐ │ |
| │ │ │ │ |
| │ │ Welcome Back │ │ |
| │ │ Sign in to your account to continue│ │ |
| │ │ │ │ |
| │ │ Username │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ Enter your username │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ Password │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ •••••••••••••• │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ ☐ Remember me │ │ |
| │ │ │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ Sign In │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ └─────────────────────────────────────┘ │ |
| │ │ |
| │ Don't have an account? Sign up │ |
| │ │ |
| └─────────────────────────────────────────────┘ |
| ``` |
|
|
| ### Loading State |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ ┌────────────────────────────────┐ │ |
| │ │ Username │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ john_doe │ │ │ |
| │ │ └──────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ Password │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ •••••••••••• │ │ │ |
| │ │ └──────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ ☑ Remember me │ │ |
| │ │ │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ ⟳ Signing in... │ │ ← Spinner |
| │ │ └──────────────────────────┘ │ │ |
| │ │ (Button disabled) │ │ |
| │ └────────────────────────────────┘ │ |
| └─────────────────────────────────────────────┘ |
| ``` |
|
|
| ### Error State |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ ┌────────────────────────────────┐ │ |
| │ │ Username │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ jo │ │ ← Red border |
| │ │ └──────────────────────────┘ │ │ |
| │ │ ⚠ Username must be at least 3 │ ← Red text |
| │ │ characters │ │ |
| │ │ │ │ |
| │ │ Password │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ │ │ ← Red border |
| │ │ └──────────────────────────┘ │ │ |
| │ │ ⚠ Password is required │ ← Red text |
| │ │ │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ ⚠ Invalid username or │ │ ← Error banner |
| │ │ │ password. Please try │ │ |
| │ │ │ again. │ │ |
| │ │ └──────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ Sign In │ │ │ |
| │ │ └──────────────────────────┘ │ │ |
| │ └────────────────────────────────┘ │ |
| └─────────────────────────────────────────────┘ |
| ``` |
|
|
| ## RegisterView Visual Design |
|
|
| ### Default State |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ │ |
| │ 🔷 Sub2API │ |
| │ Subscription to API Conversion Platform │ |
| │ │ |
| │ ┌─────────────────────────────────────┐ │ |
| │ │ │ │ |
| │ │ Create Account │ │ |
| │ │ Sign up to start using Sub2API │ │ |
| │ │ │ │ |
| │ │ Username │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ Choose a username │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ Email │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ your.email@example.com │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ Password │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ Create a strong password │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ At least 8 characters with letters │ │ |
| │ │ and numbers │ │ |
| │ │ │ │ |
| │ │ Confirm Password │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ Confirm your password │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ ┌────────────────────────────────┐ │ │ |
| │ │ │ Create Account │ │ │ |
| │ │ └────────────────────────────────┘ │ │ |
| │ │ │ │ |
| │ │ By signing up, you agree to our │ │ |
| │ │ Terms of Service and Privacy Policy│ │ |
| │ │ │ │ |
| │ └─────────────────────────────────────┘ │ |
| │ │ |
| │ Already have an account? Sign in │ |
| │ │ |
| └─────────────────────────────────────────────┘ |
| ``` |
|
|
| ### Validation Errors |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ ┌────────────────────────────────┐ │ |
| │ │ Username │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ jane@smith │ │ ← Red border |
| │ │ └──────────────────────────┘ │ │ |
| │ │ ⚠ Username can only contain │ ← Red text |
| │ │ letters, numbers, _, and - │ │ |
| │ │ │ │ |
| │ │ Email │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ invalid-email │ │ ← Red border |
| │ │ └──────────────────────────┘ │ │ |
| │ │ ⚠ Please enter a valid email │ ← Red text |
| │ │ address │ │ |
| │ │ │ │ |
| │ │ Password │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ short │ │ ← Red border |
| │ │ └──────────────────────────┘ │ │ |
| │ │ ⚠ Password must be at least 8 │ ← Red text |
| │ │ characters with letters │ │ |
| │ │ and numbers │ │ |
| │ │ │ │ |
| │ │ Confirm Password │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ different │ │ ← Red border |
| │ │ └──────────────────────────┘ │ │ |
| │ │ ⚠ Passwords do not match │ ← Red text |
| │ │ │ │ |
| │ └────────────────────────────────┘ │ |
| └─────────────────────────────────────────────┘ |
| ``` |
|
|
| ### Loading State |
|
|
| ``` |
| ┌─────────────────────────────────────────────┐ |
| │ ┌────────────────────────────────┐ │ |
| │ │ Username: jane_smith │ │ |
| │ │ Email: jane@example.com │ │ |
| │ │ Password: •••••••••••• │ │ |
| │ │ Confirm: •••••••••••• │ │ |
| │ │ │ │ |
| │ │ ┌──────────────────────────┐ │ │ |
| │ │ │ ⟳ Creating account... │ │ ← Spinner |
| │ │ └──────────────────────────┘ │ │ |
| │ │ (All inputs disabled) │ │ |
| │ └────────────────────────────────┘ │ |
| └─────────────────────────────────────────────┘ |
| ``` |
|
|
| ## Color Palette |
|
|
| ### Primary Colors |
|
|
| - **Indigo-600**: `#4F46E5` - Primary buttons, links, brand color |
| - **Indigo-700**: `#4338CA` - Button hover state |
| - **Indigo-500**: `#6366F1` - Focus ring |
|
|
| ### Neutral Colors |
|
|
| - **Gray-900**: `#111827` - Headings |
| - **Gray-700**: `#374151` - Labels |
| - **Gray-600**: `#4B5563` - Body text |
| - **Gray-500**: `#6B7280` - Helper text |
| - **Gray-300**: `#D1D5DB` - Borders |
| - **Gray-100**: `#F3F4F6` - Disabled backgrounds |
| - **White**: `#FFFFFF` - Card backgrounds |
|
|
| ### Error Colors |
|
|
| - **Red-600**: `#DC2626` - Error text |
| - **Red-500**: `#EF4444` - Error border, focus ring |
| - **Red-50**: `#FEF2F2` - Error banner background |
| - **Red-200**: `#FECACA` - Error banner border |
|
|
| ### Success Colors |
|
|
| - **Green-600**: `#16A34A` - Success text |
| - **Green-50**: `#F0FDF4` - Success banner background |
|
|
| ### Background Gradient |
|
|
| - **From**: Indigo-100 (`#E0E7FF`) |
| - **Via**: White (`#FFFFFF`) |
| - **To**: Purple-100 (`#F3E8FF`) |
|
|
| ## Typography |
|
|
| ### Font Family |
|
|
| - **Default**: System font stack (`ui-sans-serif, system-ui, -apple-system, ...`) |
|
|
| ### Font Sizes |
|
|
| - **Headings (h2)**: `1.5rem` (24px), `font-bold` |
| - **Body**: `0.875rem` (14px), `font-normal` |
| - **Labels**: `0.875rem` (14px), `font-medium` |
| - **Helper text**: `0.75rem` (12px), `font-normal` |
| - **Error text**: `0.875rem` (14px), `font-normal` |
|
|
| ### Line Heights |
|
|
| - **Headings**: `1.5` |
| - **Body**: `1.5` |
| - **Helper text**: `1.25` |
|
|
| ## Spacing |
|
|
| ### Card Spacing |
|
|
| - **Padding**: `2rem` (32px) all sides |
| - **Gap between sections**: `1.5rem` (24px) |
| - **Gap between fields**: `1rem` (16px) |
|
|
| ### Input Spacing |
|
|
| - **Padding**: `0.5rem 1rem` (8px 16px) |
| - **Label margin-bottom**: `0.25rem` (4px) |
| - **Error text margin-top**: `0.25rem` (4px) |
|
|
| ### Button Spacing |
|
|
| - **Padding**: `0.5rem 1rem` (8px 16px) |
| - **Margin-top**: `1rem` (16px) |
|
|
| ## Interactive States |
|
|
| ### Input States |
|
|
| **Default:** |
|
|
| ```css |
| border: 1px solid #D1D5DB (gray-300) |
| focus: 2px ring #6366F1 (indigo-500) |
| ``` |
|
|
| **Error:** |
|
|
| ```css |
| border: 1px solid #EF4444 (red-500) |
| focus: 2px ring #EF4444 (red-500) |
| ``` |
|
|
| **Disabled:** |
|
|
| ```css |
| background: #F3F4F6 (gray-100) |
| cursor: not-allowed |
| opacity: 0.6 |
| ``` |
|
|
| ### Button States |
|
|
| **Default:** |
|
|
| ```css |
| background: #4F46E5 (indigo-600) |
| text: #FFFFFF (white) |
| shadow: shadow-sm |
| ``` |
|
|
| **Hover:** |
|
|
| ```css |
| background: #4338CA (indigo-700) |
| transition: colors 150ms |
| ``` |
|
|
| **Focus:** |
|
|
| ```css |
| outline: none |
| ring: 2px offset-2 #6366F1 (indigo-500) |
| ``` |
|
|
| **Disabled:** |
|
|
| ```css |
| opacity: 0.5 |
| cursor: not-allowed |
| ``` |
|
|
| **Loading:** |
|
|
| ```css |
| opacity: 0.5 |
| cursor: not-allowed |
| + spinning icon |
| ``` |
|
|
| ### Link States |
|
|
| **Default:** |
|
|
| ```css |
| color: #4F46E5 (indigo-600) |
| font-weight: 500 (medium) |
| ``` |
|
|
| **Hover:** |
|
|
| ```css |
| color: #6366F1 (indigo-500) |
| transition: colors 150ms |
| ``` |
|
|
| ## Responsive Design |
|
|
| ### Breakpoints |
|
|
| **Mobile (< 640px):** |
|
|
| ``` |
| - Full width container |
| - Padding: 1rem (16px) |
| - Smaller text sizes |
| ``` |
|
|
| **Tablet (640px - 768px):** |
|
|
| ``` |
| - Max width: 28rem (448px) |
| - Centered layout |
| - Standard spacing |
| ``` |
|
|
| **Desktop (> 768px):** |
|
|
| ``` |
| - Max width: 28rem (448px) |
| - Centered layout |
| - Standard spacing |
| ``` |
|
|
| ### Mobile Optimizations |
|
|
| 1. Touch-friendly tap targets (44px minimum) |
| 2. Proper keyboard handling on mobile |
| 3. Prevent zoom on input focus |
| 4. Responsive font sizes |
| 5. Full-width inputs |
| 6. Adequate spacing for thumbs |
|
|
| ## Animations |
|
|
| ### Transitions |
|
|
| - Color changes: `150ms ease-in-out` |
| - Opacity changes: `150ms ease-in-out` |
| - Transform: `150ms ease-in-out` |
|
|
| ### Loading Spinner |
|
|
| ```css |
| @keyframes spin { |
| from { |
| transform: rotate(0deg); |
| } |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| animation: spin 1s linear infinite; |
| ``` |
|
|
| ### Toast Animations |
|
|
| - Enter: Slide in from right + fade in |
| - Exit: Slide out to right + fade out |
| - Duration: 300ms |
|
|
| ## Accessibility Features |
|
|
| ### Visual Indicators |
|
|
| - Clear focus states (2px ring) |
| - Error states (red border + red text) |
| - Loading states (spinner + text) |
| - Success states (green toast) |
|
|
| ### Color Contrast |
|
|
| - Text on white: > 7:1 (AAA) |
| - Labels on white: > 4.5:1 (AA) |
| - Buttons: > 4.5:1 (AA) |
| - Error text: > 4.5:1 (AA) |
|
|
| ### Interactive Elements |
|
|
| - Minimum size: 44x44px (mobile) |
| - Clear hover states |
| - Distinct disabled states |
| - Keyboard accessible |
|
|
| ### Screen Reader Support |
|
|
| - Proper labels on all inputs |
| - ARIA attributes where needed |
| - Error announcements |
| - Loading state announcements |
|
|
| ## Icons |
|
|
| ### Loading Spinner |
|
|
| ```svg |
| <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"> |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/> |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/> |
| </svg> |
| ``` |
|
|
| ### Error Icon |
|
|
| ```svg |
| <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20"> |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/> |
| </svg> |
| ``` |
|
|
| ## Browser Compatibility |
|
|
| ### Supported Browsers |
|
|
| - Chrome/Edge: Latest 2 versions |
| - Firefox: Latest 2 versions |
| - Safari: Latest 2 versions |
| - Mobile Safari: iOS 14+ |
| - Chrome Mobile: Latest 2 versions |
|
|
| ### CSS Features Used |
|
|
| - Flexbox (full support) |
| - CSS Grid (full support) |
| - CSS Transitions (full support) |
| - CSS Custom Properties (full support) |
| - Gradient backgrounds (full support) |
|
|
| ### JavaScript Features Used |
|
|
| - ES2015+ syntax |
| - Async/await |
| - Optional chaining |
| - Nullish coalescing |
| - Modules |
|
|
| ## Print Styles |
|
|
| (Not applicable for authentication pages - users shouldn't print login forms) |
|
|
| ## Dark Mode Considerations |
|
|
| **Future Enhancement:** |
|
|
| - Dark mode toggle in user preferences |
| - System preference detection |
| - Persistent dark mode setting |
| - Adjusted color palette for dark backgrounds |
|
|
| ```css |
| /* Example dark mode colors (not implemented yet) */ |
| dark:bg-gray-900 |
| dark:text-white |
| dark:border-gray-700 |
| ``` |
|
|
| ## Performance Metrics |
|
|
| ### Target Metrics |
|
|
| - First Contentful Paint (FCP): < 1s |
| - Largest Contentful Paint (LCP): < 2.5s |
| - Time to Interactive (TTI): < 3s |
| - Cumulative Layout Shift (CLS): < 0.1 |
| - First Input Delay (FID): < 100ms |
|
|
| ### Optimization Strategies |
|
|
| - Lazy load non-critical resources |
| - Minimize initial bundle size |
| - Use efficient animations (transform, opacity) |
| - Optimize images (logo, icons) |
| - Preconnect to API domain |
| - Cache static assets |
|
|
| ## Component Size |
|
|
| ### Bundle Impact |
|
|
| - LoginView.vue: ~4 KB (minified) |
| - RegisterView.vue: ~6 KB (minified) |
| - AuthLayout.vue: ~1 KB (minified) |
| - Total: ~11 KB (excluding dependencies) |
|
|
| ### Dependencies |
|
|
| - Vue 3: ~40 KB (runtime) |
| - Vue Router: ~15 KB |
| - Pinia: ~10 KB |
| - Total framework overhead: ~65 KB (gzipped) |
|
|
| ## Testing Checklist |
|
|
| ### Visual Regression Tests |
|
|
| - [ ] Default state (login) |
| - [ ] Default state (register) |
| - [ ] Loading state |
| - [ ] Error state (validation) |
| - [ ] Error state (API) |
| - [ ] Success state |
| - [ ] Mobile view |
| - [ ] Tablet view |
| - [ ] Desktop view |
| - [ ] Focus states |
| - [ ] Hover states |
|
|
| ### Cross-browser Tests |
|
|
| - [ ] Chrome (Windows, Mac, Linux) |
| - [ ] Firefox (Windows, Mac, Linux) |
| - [ ] Safari (Mac, iOS) |
| - [ ] Edge (Windows) |
| - [ ] Chrome Mobile (Android) |
| - [ ] Safari Mobile (iOS) |
|
|
| ### Accessibility Tests |
|
|
| - [ ] Keyboard navigation |
| - [ ] Screen reader (NVDA) |
| - [ ] Screen reader (JAWS) |
| - [ ] Screen reader (VoiceOver) |
| - [ ] Color contrast |
| - [ ] Focus indicators |
| - [ ] Error announcements |
|
|
| ## Design Assets |
|
|
| ### Figma/Sketch Files |
|
|
| (Not applicable - designed directly in code with Tailwind) |
|
|
| ### Design Tokens |
|
|
| - Defined in Tailwind config |
| - Consistent with design system |
| - Reusable across all components |
|
|
| ### Iconography |
|
|
| - SVG icons inline |
| - Heroicons (outline and solid) |
| - Consistent stroke width |
| - Accessible with proper ARIA labels |
|
|
| --- |
|
|
| **Note:** This visual guide is for reference and documentation purposes. The actual implementation is in the Vue components using TailwindCSS classes. |
|
|
