UI/UX Improvement for Authentication Pages

[yasirakhlaque]

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:

• Better visual hierarchy and spacing to guide the user's eye and reduce cognitive load.
• Improved form styling for input fields, including better focus states (e.g., a subtle border change on focus).
• Added icons for better user experience (UX), such as the email icon in the login field and the visibility toggle for the password.
• Enhanced card design with a more refined look and a subtle gradient effect for the backdrop of the forms.

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

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Enhancement (improvement to an existing feature)
• Breaking change (fix or feature that would cause existing functionality to change)
• Test (adds or updates tests only)
• Documentation (non-code change)

How Has This Been Tested?

The changes were primarily tested via local development by:

• Visual inspection across standard desktop screen sizes to ensure consistent styling and responsiveness.
• Interactive checks for all form elements, confirming that focus states, click states, and icons (like the password visibility toggle) function correctly.
• Form submission checks to ensure the new styling did not break the underlying logic for registration and login.

Screenshots (if applicable):

Login Page	Register Page

Checklist

• My code follows the code style of this project
• My change requires a change to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for paisable ready!

Name	Link
🔨 Latest commit	ef3bd2b
🔍 Latest deploy log	https://app.netlify.com/projects/paisable/deploys/68f5c8d517dca70008489050
😎 Deploy Preview	https://deploy-preview-136--paisable.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 94 Accessibility: 100 Best Practices: 100 SEO: 91 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

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.}

[archa8]

Hi @yasirakhlaque, it looks very nice and works as intended. However, there are some suggestions by Copilot in your code, which I think you should take a look at.

[archa8]

Take a look at the Copilot suggestions

[yasirakhlaque]

@archa8 Yes I have taken a look at the copilot reviews and they are really good so I have merged them into my code

[Copilot]

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[archa8]

LGTM!