Designed Login modal component #230
Conversation
…avatar integration in main website
|
@Kirti-Pant is attempting to deploy a commit to the Tanmay Kalra's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@TanmayKalra09 I created this new PR kindly merge it so that I can delete te previous PR and it is showing no conflicts. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@Kirti-Pant Great work on the login modal appreciate the effort and the accessibility touches! However, it looks like the Home page UI has changed as part of this PR. Could you please revert those Home UI changes or align them with the existing design system/components? Let's keep this PR scoped to the login modal only. Thanks! |
|
I'm running the code currently I've the same UI as it was before and I've added only Login component might be someone else working on UI of it. |
|
@TanmayKalra09 I've done no changes in UI and might be someone else has change the UI of it. |
|
@TanmayKalra09 kindly merge my PR |
This change is part of your PR, so it was implemented by you only. |
How should we proceed to merge this PR since it currently doesn’t fulfill the expected requirements? |
|
@TanmayKalra09 now what requirements are left there's no conflicts ?? |
How am I supposed to merge your PR when you’ve gone ahead and changed the UI completely? Current Smart log UI: How UI will look if i merge your PR: |
|
@TanmayKalra09 I've not changed the UI I've cloned your repository earlier where the UI was original. |
2 participants
🚀 Pull Request
📋 Description
This PR adds a modern, accessible Login modal component to the project and integrates it into the main website.
It includes form validation, a show/hide password toggle, Gravatar avatar integration, post-login user greeting, animated SVG branding, and full accessibility support.
The modal redirects the user to the homepage upon successful login, enhancing the authentication UX across the site.
Key highlights:
Implements Login.tsx as a reusable modal with clean React hooks structure.
Includes Login.css for styling, animations, and responsive design.
Adds Layout.css for site-wide layout consistency (if used).
Integrates Gravatar avatars, toast notifications, and visual feedback.
Ensures accessible form fields, labels, ARIA roles, and screen-reader friendly content.
🔍 Type of Change
Bug fix 🐞
✅ New feature ✨
✅ Documentation update 📝
Refactoring or code improvement ♻️
Other (please describe):
🙋 Your Details
🧪 How Has This Been Tested?
Describe how you tested your changes.
Manually tested end-to-end by opening the Login modal, entering various email/passwords, checking password validation and show/hide toggle, submitting the form, and verifying:
The greeting and Gravatar avatar display on successful login.
Toast notifications correctly appear for success and errors.
The modal automatically closes and redirects to the homepage.
Checked accessibility with keyboard navigation and screen reader (labels, ARIA, focus management).
📸 Screenshots (if applicable)
Before:
No Login Page
After:
Login Component Added:
✅ Checklist