Login - Redesign

[DJJones66]

This issue implements a redesign of the login screen to improve user experience and provide better guidance during the authentication process.

Changes Implemented

1. Swapped Layout:

   • Login/Register form moved to the left side
   • Build/Control/Benefit information moved to the right side

2. Dynamic Contextual Help:

   • When a user focuses on a form field, the right panel displays field-specific information
   • This includes format requirements, validation rules, and security notes
   • When focus is lost, the panel returns to showing the Build/Control/Benefit information

3. Enhanced Error Handling:

   • Error messages are displayed in the contextual help area when a field is focused
   • This provides more space for detailed error explanations
   • When no field is focused, errors still appear in the form area as alerts

4. Local Storage Emphasis:

   • Each field's help text includes a note that "All data is stored locally on your device"
   • This builds user trust and addresses privacy concerns

Technical Implementation

• Added state to track which field is currently focused
• Created a FieldHelp component for displaying contextual information
• Added focus/blur handlers to all form fields
• Updated error handling to display errors in the contextual help area
• Maintained mobile responsiveness with appropriate layout adjustments

Benefits

• Provides immediate feedback and guidance to users
• Reduces form errors by providing clear instructions
• Improves user trust by emphasizing local data storage
• Creates a more intuitive and user-friendly authentication experience