UI/UX Improvement for Authentication Pages #136
Conversation
✅ Deploy Preview for paisable ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
Enhances the authentication UI/UX for Login and Register pages with modern styling, better visual hierarchy, and interactive elements like icons and loading states.
- Adds loading states and improved error presentation on Login and Register forms
- Introduces password strength indicators and requirement checklist on Register page
- Refactors PasswordInput to accept custom className and adds accessibility improvements for the visibility toggle
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| frontend/src/pages/RegisterPage.jsx | Adds new layout, email icon, password strength meter, and loading/disabled submit handling |
| frontend/src/pages/LoginPage.jsx | Adds new layout, email icon, loading/disabled submit handling, and improved error presentation |
| frontend/src/components/PasswordInput.jsx | Extends API to accept className, tweaks styling composition, and improves accessibility for the eye toggle |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| // Default classes if no className is provided | ||
| const defaultClasses = "w-full px-4 py-2 pr-10 mt-2 border rounded-md focus:outline-none focus:ring-1"; | ||
| const errorClasses = error ? 'border-red-500 focus:ring-red-500' : 'focus:ring-blue-600 dark:border-gray-600'; | ||
| const inputClasses = className || `${defaultClasses} ${errorClasses}`; |
There was a problem hiding this comment.
When a custom className is provided, the component drops its own error styling (errorClasses). This makes the error prop ineffective in those cases. Consider merging classes instead so consumers can extend styles without losing built‑in error visuals: const inputClasses = ${defaultClasses} ${errorClasses} ${className ?? ''}.
| const inputClasses = className || `${defaultClasses} ${errorClasses}`; | |
| const inputClasses = `${defaultClasses} ${errorClasses} ${className ?? ''}`; |
Copilot uses AI. Check for mistakes.
| }; | ||
|
|
||
| // Default classes if no className is provided | ||
| const defaultClasses = "w-full px-4 py-2 pr-10 mt-2 border rounded-md focus:outline-none focus:ring-1"; |
There was a problem hiding this comment.
pr-10 is specified here and also appended on the input, leading to duplicate padding classes. Remove it from defaultClasses and keep the single pr-10 appended at render to avoid duplication and ensure a single source of truth.
| const defaultClasses = "w-full px-4 py-2 pr-10 mt-2 border rounded-md focus:outline-none focus:ring-1"; | |
| const defaultClasses = "w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1"; |
Copilot uses AI. Check for mistakes.
| type={isPasswordVisible ? 'text' : 'password'} | ||
| placeholder={placeholder} | ||
| className={`w-full px-4 py-2 pr-10 mt-2 border rounded-md focus:outline-none focus:ring-1 ${error ? 'border-red-500 focus:ring-red-500' : 'focus:ring-blue-600 dark:border-gray-600'}`} | ||
| className={`${inputClasses} pr-10`} |
There was a problem hiding this comment.
This adds pr-10 even though pr-10 is already included in defaultClasses. After removing pr-10 from defaultClasses (as suggested), keeping it here ensures the icon spacing remains consistent without duplication.
Copilot uses AI. Check for mistakes.
| </label> | ||
| <div className="relative"> | ||
| <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | ||
| <HiMail className="h-5 w-5 text-gray-400 dark:text-gray-500" /> |
There was a problem hiding this comment.
The mail icon is decorative; add aria-hidden="true" to prevent it from being announced by screen readers: <HiMail aria-hidden="true" className="..." />.
| <HiMail className="h-5 w-5 text-gray-400 dark:text-gray-500" /> | |
| <HiMail aria-hidden="true" className="h-5 w-5 text-gray-400 dark:text-gray-500" /> |
Copilot uses AI. Check for mistakes.
| </label> | ||
| <div className="relative"> | ||
| <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | ||
| <HiMail className="h-5 w-5 text-gray-400 dark:text-gray-500" /> |
There was a problem hiding this comment.
The mail icon is decorative; add aria-hidden="true" so it isn't read by screen readers: <HiMail aria-hidden="true" className="..." />.
| <HiMail className="h-5 w-5 text-gray-400 dark:text-gray-500" /> | |
| <HiMail aria-hidden="true" className="h-5 w-5 text-gray-400 dark:text-gray-500" /> |
Copilot uses AI. Check for mistakes.
1 participant
Description
This Pull Request introduces significant user interface and user experience enhancements to the Login and Register pages, as shown in the attached screenshots. The goal was to create a more modern, intuitive, and visually appealing authentication flow for users of Paisable.
Key visual changes include:
Related Issue
Fixes #130
Motivation and Context
This change is required to modernize the look and feel of the application's most visible entry points. The improvements solve problems related to visual appeal, clarity, and overall professionalism, ensuring a positive first impression for new and returning users.
Types of Changes
How Has This Been Tested?
The changes were primarily tested via local development by:
Screenshots (if applicable):
Checklist