LinkDesk/frontend/docs/login-design.md

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.