130 lines
4.0 KiB
Markdown
130 lines
4.0 KiB
Markdown
# Login Page Design - shadcn-vue Login01 Style
|
|
|
|
This document describes the new login and registration page design based on the shadcn-vue Login01 block pattern.
|
|
|
|
## Design Overview
|
|
|
|
The new login and registration pages are **standalone pages** that appear without any sidebar or header layout. They feature a modern split-screen layout that provides both functionality and visual appeal:
|
|
|
|
### Layout Structure
|
|
|
|
1. **Left Side - Form Area**
|
|
- Clean, centered form with proper spacing
|
|
- Consistent with shadcn-vue design patterns
|
|
- Responsive design that stacks on mobile
|
|
|
|
2. **Right Side - Branding/Information Area**
|
|
- VFX Project Management branding
|
|
- Feature highlights with icons
|
|
- Hidden on mobile devices (lg:block)
|
|
|
|
## Key Features
|
|
|
|
### Login Page (`/login`)
|
|
|
|
- **Split Layout**: Form on left, branding on right
|
|
- **Google OAuth Ready**: Placeholder button for future Google integration
|
|
- **Forgot Password**: Link placeholder for future implementation
|
|
- **Responsive**: Mobile-first design that adapts to screen size
|
|
- **Accessibility**: Proper labels, focus states, and keyboard navigation
|
|
|
|
### Register Page (`/register`)
|
|
|
|
- **Consistent Design**: Matches login page layout
|
|
- **Form Validation**: Password confirmation and form validation
|
|
- **Success Messaging**: Clear feedback for successful registration
|
|
- **Admin Approval Notice**: Informs users about approval process
|
|
|
|
## Visual Elements
|
|
|
|
### Branding Section
|
|
|
|
- **Logo**: VFX-themed icon in primary color
|
|
- **Title**: "VFX Project Management"
|
|
- **Tagline**: Descriptive subtitle
|
|
- **Feature List**: Key benefits with icons
|
|
|
|
### Feature Icons
|
|
|
|
- **Project Management**: Checklist icon
|
|
- **Team Collaboration**: Users icon
|
|
- **Progress Tracking**: Bar chart icon
|
|
- **File Security**: Lock icon
|
|
- **Fast Workflow**: Lightning icon
|
|
- **Professional Tools**: Clipboard icon
|
|
- **Creative Community**: Heart icon
|
|
|
|
## Technical Implementation
|
|
|
|
### Layout Logic
|
|
|
|
The application uses conditional rendering in `App.vue` to determine when to show the main layout:
|
|
|
|
- **Authentication Pages**: Login and register pages are shown standalone without sidebar/header
|
|
- **Protected Pages**: Dashboard and other pages show the full layout with sidebar and header
|
|
- **Route Detection**: Uses `route.meta.requiresGuest` and route names to identify auth pages
|
|
|
|
### Components Used
|
|
|
|
- `Button` - Primary and outline variants
|
|
- `Input` - Email and password fields
|
|
- `Label` - Form field labels
|
|
- `Loader2` - Loading spinner from lucide-vue-next
|
|
|
|
### Responsive Breakpoints
|
|
|
|
- **Mobile**: Single column, form only, full screen height
|
|
- **Large (lg)**: Two-column grid layout, full screen height
|
|
- **Full Screen**: Uses `min-h-screen` for complete viewport coverage
|
|
|
|
### Color Scheme
|
|
|
|
- Uses CSS custom properties for theming
|
|
- `bg-muted` for right panel background
|
|
- `text-muted-foreground` for secondary text
|
|
- `text-primary` for accent elements
|
|
|
|
## Future Enhancements
|
|
|
|
### Planned Features
|
|
|
|
1. **Google OAuth Integration**
|
|
- Complete OAuth flow implementation
|
|
- Social login buttons functionality
|
|
|
|
2. **Forgot Password**
|
|
- Password reset email flow
|
|
- Reset password form
|
|
|
|
3. **Enhanced Validation**
|
|
- Real-time form validation
|
|
- Password strength indicator
|
|
|
|
4. **Animations**
|
|
- Smooth transitions
|
|
- Loading states
|
|
- Form submission feedback
|
|
|
|
### Accessibility Improvements
|
|
|
|
- Screen reader optimization
|
|
- High contrast mode support
|
|
- Keyboard navigation enhancements
|
|
- Focus management
|
|
|
|
## Usage
|
|
|
|
The new login pages are automatically used when users navigate to:
|
|
|
|
- `/login` - Main login page
|
|
- `/register` - User registration page
|
|
|
|
Both pages integrate seamlessly with the existing authentication system and maintain all current functionality while providing an improved user experience.
|
|
|
|
## Browser Support
|
|
|
|
- Modern browsers with CSS Grid support
|
|
- Responsive design for mobile devices
|
|
- Progressive enhancement for older browsers
|
|
|
|
The design follows modern web standards and provides a professional, trustworthy appearance that reflects the quality of the VFX Project Management System. |