fix: signup toggle not switching modes#229
Conversation
The Signup page had hardcoded styles that did not respond to theme changes. This PR updates the styles using Tailwind dark mode utilities to ensure proper visual switching between light and dark themes.
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe signup page is refactored to integrate backend authentication via axios, replacing the previous submission flow. The component imports ChangesSignup Page Refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @TheBinaryAVA for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Signup/Signup.tsx (1)
87-106:⚠️ Potential issue | 🟠 Major | ⚡ Quick winMissing accessible labels for form inputs.
All three input fields rely solely on
placeholderattributes without corresponding<label>elements oraria-labelattributes. This makes the form difficult or impossible to use with screen readers, as the field purpose is not announced. Placeholders also disappear when users start typing.♿ Proposed fix using visually-hidden labels
For each input, add a
<label>element. If you want to keep the current visual design, use Tailwind'ssr-onlyclass to hide labels visually while keeping them accessible to screen readers:{/* Username */} <div className="relative"> + <label htmlFor="username" className="sr-only">Username</label> <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> <User className="h-5 w-5 text-purple-500 dark:text-purple-300" /> </div> <input + id="username" type="text" name="username"Apply the same pattern to email and password fields.
Also applies to: 108-127, 129-148
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Signup/Signup.tsx` around lines 87 - 106, Add accessible labels for the inputs that currently only use placeholders: add a visually-hidden <label> (use the project's Tailwind "sr-only" utility) for the username, email, and password inputs so screen readers announce the field purpose; ensure each label's htmlFor matches the input's name/id (e.g., the username input that binds to formData.username and handleChange), or alternatively add descriptive aria-label attributes if you prefer not to add label elements, and keep required and existing classes intact.
🧹 Nitpick comments (2)
src/pages/Signup/Signup.tsx (2)
42-44: ⚡ Quick winGeneric error message hides useful server feedback.
The catch block shows
"Something went wrong. Please try again."for all errors. Axios errors often include server-provided messages (e.g., "Email already exists", "Password too weak") inerror.response?.data?.message. Extracting and displaying these would improve UX.♻️ Proposed fix to surface server error messages
} catch (error) { - setMessage("Something went wrong. Please try again."); + if (axios.isAxiosError(error) && error.response?.data?.message) { + setMessage(error.response.data.message); + } else { + setMessage("Something went wrong. Please try again."); + } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Signup/Signup.tsx` around lines 42 - 44, The catch block in the Signup component currently sets a generic message via setMessage("Something went wrong. Please try again."); update the catch to detect Axios/server errors and extract a meaningful message (e.g. error.response?.data?.message or error.response?.data?.error) and pass that to setMessage, falling back to error.message and then the current generic text; ensure you reference the same catch block and setMessage call in Signup.tsx so the UI surfaces server-provided feedback like "Email already exists" or "Password too weak".
99-104: ⚡ Quick winConsider adding dark mode variant for focus ring.
The input focus ring uses
focus:ring-purple-400without a dark mode variant. While this may be visible in dark mode, consider testing the contrast and potentially using a lighter shade (e.g.,dark:focus:ring-purple-300) to ensure the focus indicator is clearly visible for keyboard navigation in dark mode.♻️ Proposed enhancement
- focus:outline-none focus:ring-2 focus:ring-purple-400 transition" + focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-300 transition"Also applies to: 120-125, 141-146
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Signup/Signup.tsx` around lines 99 - 104, The focus ring class on the Signup input elements (the className string in the Signup component for the input elements) only uses focus:ring-purple-400 and should include a dark-mode variant for better contrast; update each input's className (the same string around lines where the inputs are defined) to add dark:focus:ring-purple-300 (or an appropriate lighter shade) alongside focus:ring-purple-400 so the focus indicator is clearly visible in dark mode.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Signup/Signup.tsx`:
- Around line 39-41: Replace the brittle string check in the signup response
handling with a status or explicit success flag: inside the handler where you
currently have if (response.data.message === "User created successfully")
navigate("/login"); (in Signup.tsx), instead check response.status === 201 or
response.data.success === true before calling navigate("/login"); and keep a
sensible fallback/error branch that shows the backend message if present. Ensure
you update any tests or callers that relied on the exact message.
- Line 6: The code reads import.meta.env.VITE_BACKEND_URL into backendUrl
without guarding for undefined; update Signup.tsx to validate backendUrl (the
constant backendUrl) at module init or before use (e.g., in the signup request
path) and if missing either throw a clear error (e.g., "VITE_BACKEND_URL is not
set") or supply a safe dev fallback URL, then use the validated value for
building the axios request URL so you fail fast with a descriptive message
instead of making requests to undefined.
---
Outside diff comments:
In `@src/pages/Signup/Signup.tsx`:
- Around line 87-106: Add accessible labels for the inputs that currently only
use placeholders: add a visually-hidden <label> (use the project's Tailwind
"sr-only" utility) for the username, email, and password inputs so screen
readers announce the field purpose; ensure each label's htmlFor matches the
input's name/id (e.g., the username input that binds to formData.username and
handleChange), or alternatively add descriptive aria-label attributes if you
prefer not to add label elements, and keep required and existing classes intact.
---
Nitpick comments:
In `@src/pages/Signup/Signup.tsx`:
- Around line 42-44: The catch block in the Signup component currently sets a
generic message via setMessage("Something went wrong. Please try again.");
update the catch to detect Axios/server errors and extract a meaningful message
(e.g. error.response?.data?.message or error.response?.data?.error) and pass
that to setMessage, falling back to error.message and then the current generic
text; ensure you reference the same catch block and setMessage call in
Signup.tsx so the UI surfaces server-provided feedback like "Email already
exists" or "Password too weak".
- Around line 99-104: The focus ring class on the Signup input elements (the
className string in the Signup component for the input elements) only uses
focus:ring-purple-400 and should include a dark-mode variant for better
contrast; update each input's className (the same string around lines where the
inputs are defined) to add dark:focus:ring-purple-300 (or an appropriate lighter
shade) alongside focus:ring-purple-400 so the focus indicator is clearly visible
in dark mode.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ee25a82b-a350-44a2-91ff-03243cdd51e8
📒 Files selected for processing (1)
src/pages/Signup/Signup.tsx
TheBinaryAVA
changed the title
TheBinaryAVA
changed the title
TheBinaryAVA
changed the title
TheBinaryAVA
changed the title
1 participant
Description
The Signup page had hardcoded styles that did not respond to theme changes.
This PR updates the styles using Tailwind's dark mode utilities (
dark:) to ensure proper visual switching between light and dark themes. The UI now adapts correctly when the theme toggle is used.Fixes #228
Type of Change
How Has This Been Tested?
Summary by CodeRabbit
Release Notes
New Features
Style