Skip to content

Conversation

benedictfred
Copy link
Contributor

Description

This pull request refactors the user authentication form and input box components to use Material UI (MUI) for styling and layout, replacing custom CSS classes and HTML elements. The changes improve consistency with the design system, enhance accessibility, and simplify style management.

Changes Made

User Authentication Form UI Refactor:

  • Replaced custom HTML elements and CSS classes in client/src/modules/user-auth-form/index.tsx with MUI components (Button, Typography) and styled wrappers (StyledSection, StyledForm, StyledTitle, StyledFooter) for layout and typography.
  • Updated the form submission handler to use the standard React form event (onSubmit with React.FormEvent) instead of a mouse event, aligning with MUI form handling best practices.

Input Box Component Modernization:

  • Refactored client/src/shared/components/atoms/input-box/index.tsx to use MUI's TextField, InputAdornment, and IconButton for input fields, icons, and password visibility toggling, replacing custom markup and icon logic.
  • Introduced a styled MUI TextField (StyledTextField) for consistent input appearance, theming, and improved accessibility.

These updates make the authentication UI more maintainable and visually consistent with the rest of the application.

Linked Issue

This PR closes issue #1279

Video

Screencast.from.2025-10-07.00-25-14.webm

@Avdhesh-Varshney
Please review. If there are changes you want me to make, tell me. Thanks.

Copy link

vercel bot commented Oct 6, 2025

@benedictfred is attempting to deploy a commit to the avdheshvarshney's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

github-actions bot commented Oct 6, 2025

Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, join our discord server https://discord.gg/tSqtvHUJzE.

Copy link

vercel bot commented Oct 8, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
code-a2z Ready Ready Preview Comment Oct 8, 2025 5:07pm

@Avdhesh-Varshney
Copy link
Member

@benedictfred LGTM! Works fine!
Plz resolve the conflicts and properly connect your issue with PR.

@benedictfred
Copy link
Contributor Author

Hey @Avdhesh-Varshney

I have resolved all conflicts and the issue this PR is for was tagged correctly.

Copy link
Member

@Avdhesh-Varshney Avdhesh-Varshney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice Work 🎉
This migration really helps in the progress of this project.
Thanks for the contribution 👍

@Avdhesh-Varshney Avdhesh-Varshney merged commit a1b51c2 into Code-A2Z:main Oct 8, 2025
2 of 3 checks passed
@Avdhesh-Varshney Avdhesh-Varshney linked an issue Oct 8, 2025 that may be closed by this pull request
4 tasks
@Avdhesh-Varshney Avdhesh-Varshney added hacktoberfest-accepted onlydust-wave Contribute to awesome OSS repos during OnlyDust's open source week labels Oct 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

hacktoberfest-accepted onlydust-wave Contribute to awesome OSS repos during OnlyDust's open source week

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Migrate User Auth Form (Login/Signup) Page & components to MUI

2 participants