Skip to content

improvement(frontend): auth pages improvements#5756

Merged
scott-ray-wilson merged 13 commits intomainfrom
auth-page-improvements
Mar 19, 2026
Merged

improvement(frontend): auth pages improvements#5756
scott-ray-wilson merged 13 commits intomainfrom
auth-page-improvements

Conversation

@scott-ray-wilson
Copy link
Copy Markdown
Contributor

Context

This PR contains several UI/UX improvements for the login, sign up and account recovery pages

  • improve contrast and styling on all links (ie "Don't have an account? Sign up", "Already have an account? Log in", etc.)
  • Remove large infisical logo and add auth header with smaller logo and dynamic action button (Sign Up or Log In depending on page)
  • prevent auto-fill styling that made auto-filled inputs look ugly
  • improve sign-up flow to immediately expose email field and use icon social sign-ups buttons

Screenshots

CleanShot 2026-03-18 at 17 53 33@2x

Steps to verify the change

  • verify updated link work
  • verify new header action buttons work
  • verify social and email login work
  • verify auto-fill styling is overridden and no longer displays

Type

  • Fix
  • Feature
  • Improvement
  • Breaking
  • Docs
  • Chore

Checklist

  • Title follows the conventional commit format: type(scope): short description (scope is optional, e.g., fix: prevent crash on sync or fix(api): handle null response).
  • Tested locally
  • Updated docs (if needed)
  • Updated CLAUDE.md files (if needed)
  • Read the contributing guide

@maidul98
Copy link
Copy Markdown
Collaborator

maidul98 commented Mar 19, 2026

Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 19, 2026

Greptile Summary

This PR delivers a focused UI/UX refresh of the auth pages (login, sign-up, account recovery, LDAP login): it introduces a shared AuthPageHeader with a smaller logo and a contextual action button (Log In / Sign Up), merges the separate email-entry step directly into InitialSignupStep (removing the two-step split), converts social sign-up buttons to compact icon-only buttons with tooltips, and applies a global CSS override to prevent ugly browser-autofill backgrounds on dark-theme inputs.

Key findings:

  • CSS class typohover:text-foregrond in InitialSignupStep.tsx (line 197) should be hover:text-foreground; the Privacy Policy link will not receive its hover colour as intended.
  • Divider edge case — The "or" divider between email and social providers is conditioned on config.enabledLoginMethods.length > 1, but does not verify that any of the three social providers are actually enabled. An instance configured with email + LDAP (no social) would render a floating "or" separator above an empty container.
  • Dead codeEnterEmailStep.tsx is no longer imported anywhere now that its logic was merged into InitialSignupStep; it should be deleted.

Confidence Score: 4/5

  • This PR is safe to merge with minor fixes; no security or data-integrity concerns were found.
  • The changes are purely presentational / UX. Two real issues exist: a CSS class typo that silently breaks a hover style and a divider-visibility edge case for non-social login-method combinations. Neither is a runtime crash or security problem, but the typo is a visible regression for the Privacy Policy link. Dead-code cleanup would improve maintainability.
  • frontend/src/components/auth/InitialSignupStep.tsx (typo + divider logic), frontend/src/components/auth/EnterEmailStep.tsx (can be deleted)

Important Files Changed

Filename Overview
frontend/src/components/auth/InitialSignupStep.tsx Merged email input + social icon buttons into one step; contains a CSS class typo (hover:text-foregrond) on the Privacy Policy link and a divider-visibility edge case when non-social methods are enabled alongside email.
frontend/src/components/auth/EnterEmailStep.tsx Now dead code — no longer imported anywhere; its functionality was consolidated into InitialSignupStep and the file should be removed.
frontend/src/components/auth/AuthPageHeader.tsx New header component with Infisical logo and optional action slot; straightforward and correctly used across all auth pages.
frontend/src/index.css Global autofill override using the well-known background-color transition trick; correctly scoped and uses CSS custom properties for theming.
frontend/src/pages/auth/SignUpPage/SignUpPage.tsx Removed isSignupWithEmail state; now renders InitialSignupStep (with email input) directly for step 1. Clean simplification.
frontend/src/pages/auth/LoginPage/LoginPage.tsx Replaced large logo with AuthPageHeader; minor padding change from px-6 to px-4.
frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx Updated link text styles (text-muted → text-label, hover:text-label → hover:text-foreground) and added full-width captcha wrapper.
frontend/src/pages/auth/AccountRecoveryEmailPage/AccountRecoveryEmailPage.tsx Replaced large logo with AuthPageHeader (with Log In CTA); consistent styling updates throughout.
frontend/src/pages/auth/LoginLdapPage/LoginLDAPPage.tsx Replaced large logo with AuthPageHeader (with Sign Up CTA); consistent styling updates throughout.
frontend/src/components/auth/CodeInputStep.tsx Minor style updates only — text size and colour token changes for improved link contrast.

Comments Outside Diff (1)

  1. frontend/src/components/auth/EnterEmailStep.tsx, line 1-5 (link)

    P2 Dead code — component is no longer imported

    EnterEmailStep was previously the email-input screen rendered in SignUpPage when isSignupWithEmail was true. That state and the corresponding import have been removed in this PR; the email-input UI now lives directly inside InitialSignupStep. As a result, this file is no longer referenced anywhere in the codebase and can be deleted to avoid confusion for future contributors.

Last reviewed commit: "improvement: update ..."

scott-ray-wilson and others added 3 commits March 18, 2026 18:01
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
@scott-ray-wilson scott-ray-wilson merged commit 47226b5 into main Mar 19, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants