oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
shaw
2025-12-18 13:50:39 +08:00
parent 569f4882e5
commit 642842c29e
218 changed files with 86902 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
frontend/src/views/auth/VISUAL_GUIDE.md Normal file
View File

@@ -0,0 +1,591 @@
# 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.