Skip to content

fix(auth): resolve UI inconsistencies, password strength bar, and browser reveal button across auth pages#1662

Merged
omroy07 merged 2 commits intoomroy07:mainfrom
nur-hasin:fix/auth-pages-ui-inconsistencies
Feb 26, 2026
Merged

fix(auth): resolve UI inconsistencies, password strength bar, and browser reveal button across auth pages#1662
omroy07 merged 2 commits intoomroy07:mainfrom
nur-hasin:fix/auth-pages-ui-inconsistencies

Conversation

@nur-hasin
Copy link
Copy Markdown
Contributor

@nur-hasin nur-hasin commented Feb 26, 2026 •
edited
Loading

Which issue does this PR close?

Rationale for this change

Several visual, layout, and interaction bugs were present across the authentication pages that created an inconsistent user experience. These fixes ensure the auth pages look and behave correctly across all screen sizes, theme modes, and browsers.

What changes are included in this PR?

  1. Forgot Password - Responsive Centering Fix: In login.css, the @media (max-width: 768px) block replaced align-items: flex-start and padding-top: 20px with display: flex, justify-content: center and align-items: center so the form stays vertically centered at all screen sizes.

  2. Border Radius Mismatch - All Auth Pages: overflow: hidden was applied to .form-container in both login.css and register.css so the top green decorative ::before bar is clipped correctly within the container's rounded corners on login, register and forgot-password pages.

  3. Login Button Text Color in Light Mode: A [data-theme="light"] rule targeting .form-container button[type="submit"] sets color: var(--text-primary) so the button text is dark in light mode, matching the register and forgot-password pages.

  4. Register Page Scrollbar - Back Button and Scrollbar: The .back-button block and its hover/icon styles were removed from register.css as the back button is no longer present in register.html. The back button element itself was also removed from the HTML. This eliminates unnecessary spacing that was contributing to the vertical scrollbar.

  5. Password Strength Bar - Width and Empty Field Reset: In register.js, the checkPasswordStrength function now sets strengthBar.style.width explicitly on every keystroke so the bar fills correctly. An early return resets the bar width to 0% and clears the label text when the field is empty, fixing the issue where "Weak" lingered after clearing. A password.length >= 16 bonus ensures sufficiently long passwords reach the "Strong" level. checkPasswordStrength is now wired directly to the password field's input event at the bottom of register.js.

  6. Native Browser Password Reveal Button: - All Auth Pages: In login.css and register.css, the native browser password eye icon is hidden using ::-ms-reveal, ::-ms-clear, ::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button and input::-webkit-reveal so it no longer conflicts with the custom green toggle on login, register and forgot-password pages.

  7. Background Image - Forgot Password and Register Pages: forgot-password.html and register.html now include the background image inline on <body> matching the login page, so all three auth pages share a consistent full-screen background in both light and dark mode.

Are these changes tested?

Manually tested across Chrome, Edge and Firefox:

  • Verified forgot-password form centers correctly at 768px, 480px and 360px widths by resizing the browser window
  • Verified green top border aligns flush with container corners on all three auth pages in both light and dark mode
  • Verified login button text is dark in light mode and white in dark mode, matching register and forgot-password pages
  • Verified register page no longer shows a vertical scrollbar after removing the back button spacing
  • Verified password strength bar fills and resets correctly on every keystroke, clears fully when field is emptied, and reaches "Strong" for passwords 16+ characters
  • Verified native browser password reveal button is no longer visible in the password field on all three auth pages across Chrome, Edge and Firefox
  • Verified forgot-password and register pages display the full-screen background image consistently with the login page in both light and dark mode

Are there any user-facing changes?

Yes:

  • Login button text is now dark in light mode across all auth pages for consistent readability
  • The green decorative top border now aligns seamlessly with the rounded container corners on login, register and forgot-password pages
  • Forgot-password form stays vertically centered on all screen sizes including mobile
  • Register page no longer requires scrolling to reach the submit button
  • Password strength bar now fills, updates and resets correctly as the user types or clears the password field, and correctly reaches "Strong" for long passwords
  • The duplicate eye icon conflict in the password field is resolved - only the custom green toggle is visible on all auth pages
  • Forgot-password and register pages now show the same full-screen background as the login page in both light and dark mode

Screenshots

Screenshot 2026-02-26 213111 Screenshot 2026-02-26 213252 Screenshot 2026-02-26 213401

@vercel
Copy link
Copy Markdown

vercel bot commented Feb 26, 2026

@nur-hasin is attempting to deploy a commit to the Om Roy's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 26, 2026

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

@nur-hasin
Copy link
Copy Markdown
Contributor Author

nur-hasin commented Feb 26, 2026 •
edited
Loading

Hi @omroy07, regarding my previous PR (#1661) that was merged, I had requested the addition of the SWoC26 label as I am participating in both ECWoC26 and SWoC26, but it has yet to be added.

This new PR is also for both programs. Kindly ensure both ECWoC26 and SWoC26 labels are added during review.

Thank you.

@omroy07 omroy07 merged commit c0db5ea into omroy07:main Feb 26, 2026
2 of 5 checks passed
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 26, 2026

🎉 Congrats @nur-hasin on getting your PR merged! 🙌
Thanks for the contribution — looking forward to more from you 🚀

@nur-hasin
Copy link
Copy Markdown
Contributor Author

nur-hasin commented Feb 26, 2026

Is it possible to add both ECWoC26 and SWoC26 labels to PR? I'd really appreciate it if you'd let me know. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@nur-hasin nur-hasin

Labels

ECWoC26-SPRINT-L1 ECWoC26

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: UI and layout inconsistencies across authentication pages

2 participants

@nur-hasin @omroy07