ui: move auth switch links into authentication card #267
Conversation
📝 WalkthroughWalkthroughEnvironment variables removed from example config. Login and Signup page components refactored to relocate authentication mode toggle prompts from page headers to dedicated sections positioned below their respective primary authentication forms. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
Frontend/src/pages/Login.tsx (1)
221-233: Consider unnesting the auth switch section for consistency.The functionality and styling are correct, and the UX improvement aligns well with the PR objectives. However, this section is currently nested inside the social login container div (opened at line 180), whereas in
Signup.tsxthe equivalent section is a direct sibling of the social login block. For semantic clarity and structural consistency between both auth pages, consider moving this section outside the<div className="mt-8">that wraps the social login options.🔎 Suggested structural adjustment
Move the auth switch section to be a sibling of the social login container:
</div> + </div> + + {/* --- MOVED AUTH SWITCH LINK --- */} + <div className="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center"> + <p className="text-sm text-gray-600 dark:text-gray-300"> + Don't have an account?{" "} + <Link + to="/signup" + className="font-medium text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200" + > + Sign up + </Link> + </p> + </div> - - {/* --- MOVED AUTH SWITCH LINK --- */} - <div className="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center"> - <p className="text-sm text-gray-600 dark:text-gray-300"> - Don't have an account?{" "} - <Link - to="/signup" - className="font-medium text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200" - > - Sign up - </Link> - </p> - </div> - </div> </div> </div>
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
Frontend/env-exampleFrontend/src/pages/Login.tsxFrontend/src/pages/Signup.tsx
💤 Files with no reviewable changes (1)
- Frontend/env-example
🔇 Additional comments (3)
Frontend/src/pages/Login.tsx (1)
55-55: LGTM – Clear documentation of header simplification.The comment accurately describes the structural change.
Frontend/src/pages/Signup.tsx (2)
117-117: LGTM – Clear documentation of header simplification.The comment accurately describes the structural change.
209-221: LGTM – Well-structured auth switch section.The auth switch link is properly positioned as a sibling to the conditional social login section, maintaining good semantic structure. The styling is consistent with the Login page, includes proper dark mode support, and the border separator provides clear visual distinction. The placement improves UX by reducing the distance users need to travel to switch authentication modes.
|
Hi Maintainers, |
|
@chandansgowda looks good to me |
2 participants
Closes # 264
Description
This PR improves the authentication user experience (UX) by relocating the "Already have an account? / Don’t have an account?" navigation links. Previously, these links were located in the global header; they have now been moved directly into the authentication card on both the Login and Signup pages.
UX Rationale:
Changes Made
Screenshots or Visual Changes
Checklist
Summary by CodeRabbit
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.