added back to home feature#402
Open
ArshiBansal wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThree authentication and contact pages were updated with consistent "Back to Home" navigation buttons and improved form handling. Contact and Login pages received UI layout refactoring with formatting adjustments. Signup page gained substantial validation enhancements with new error state management, per-field validation during input changes, pre-submission error checking, and simplified inline error display. ChangesAuthentication and contact page navigation enhancements
Sequence Diagram(s)(No sequence diagram generated: changes are isolated UI updates and form validation refactoring within individual page components without cross-component orchestration or external API flows that would benefit from sequence visualization.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
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)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 31-32: The password visibility toggle state is never toggled
because setShowPassword is not wired up; update the password and
confirm-password controls to include a toggle control (e.g., an icon/button)
that calls setShowPassword(prev => !prev) or a dedicated handler (e.g.,
handleToggleShowPassword) and ensure the input types use showPassword
(type={showPassword ? 'text' : 'password'}) for both Password and
ConfirmPassword fields (references: showPassword, setShowPassword, any Password
input/component in Signup.tsx).
- Around line 160-167: The Back button's icon animation is not triggering
because the ArrowLeft uses the group-hover utility but the parent element (the
button container in the JSX where className is set on the element wrapping
ArrowLeft and "Back to Home") doesn't include the "group" class; update the
parent element's className (the same element rendering ArrowLeft and the text in
Signup.tsx) to include "group" so the ArrowLeft's "group-hover:-translate-x-1"
can take effect, or alternatively remove the group-hover on ArrowLeft and use a
direct hover class on ArrowLeft if you prefer not to add "group" to the parent.
- Around line 74-104: In handleSubmit, clear any existing server-side
status/message state before running client-side validation so stale
success/error text is removed; specifically, call your status setter (e.g.,
setStatus('') or setServerMessage(null)) at the start of handleSubmit before
validating formData, and also clear it in the error-return branch where you call
setErrors and in the other submit-related branch around lines 120-123 so server
messages are reset whenever client-side validation fails or a new submit begins;
keep using the existing symbols handleSubmit, setErrors and your status setter
consistently.
🪄 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: 1b8d17bf-83d8-4f8d-bd39-89eb0c100bd7
📒 Files selected for processing (3)
src/pages/Contact/Contact.tsxsrc/pages/Login/Login.tsxsrc/pages/Signup/Signup.tsx
Comment on lines
31
to
32
| const [showPassword, setShowPassword] = useState(false); | ||
| const [isLoading, setIsLoading] = useState(false); |
Contributor
There was a problem hiding this comment.
Password visibility toggle is currently non-functional.
showPassword is read, but nothing updates it, so the field always stays masked. This regresses expected UX.
Suggested fix
- <div>
+ <div className="relative">
<input
type={showPassword ? "text" : "password"}
name="password"
placeholder="Enter your password"
value={formData.password}
onChange={handleChange}
- className="w-full px-4 py-4 rounded-2xl border"
+ className="w-full px-4 py-4 pr-12 rounded-2xl border"
/>
+ <button
+ type="button"
+ onClick={() => setShowPassword((prev) => !prev)}
+ className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
+ aria-label={showPassword ? "Hide password" : "Show password"}
+ >
+ {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+ </button>
{errors.password && (
<p className="text-red-500 text-sm mt-2">{errors.password}</p>
)}
</div>Also applies to: 248-261
🤖 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 31 - 32, The password visibility
toggle state is never toggled because setShowPassword is not wired up; update
the password and confirm-password controls to include a toggle control (e.g., an
icon/button) that calls setShowPassword(prev => !prev) or a dedicated handler
(e.g., handleToggleShowPassword) and ensure the input types use showPassword
(type={showPassword ? 'text' : 'password'}) for both Password and
ConfirmPassword fields (references: showPassword, setShowPassword, any Password
input/component in Signup.tsx).
Comment on lines
74
to
104
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
|
|
||
| const usernameError = !formData.username.trim() | ||
| ? "Username is required" | ||
| : !/^[A-Za-z\s]+$/.test(formData.username) | ||
| ? "Only letters are allowed" | ||
| : ""; | ||
| ? "Only letters are allowed" | ||
| : ""; | ||
|
|
||
| const emailError = !formData.email.trim() | ||
| ? "Email is required" | ||
| : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim()) | ||
| ? "Enter a valid email" | ||
| : ""; | ||
| ? "Enter a valid email" | ||
| : ""; | ||
|
|
||
| const passwordError = !formData.password.trim() | ||
| ? "Password is required" | ||
| : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password) | ||
| ? "Password must be 8+ characters with letters and numbers" | ||
| : ""; | ||
| : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test( | ||
| formData.password, | ||
| ) | ||
| ? "Password must be 8+ characters with letters and numbers" | ||
| : ""; | ||
|
|
||
| if (usernameError || emailError || passwordError) { | ||
| setErrors({ username: usernameError, email: emailError, password: passwordError }); | ||
| setErrors({ | ||
| username: usernameError, | ||
| email: emailError, | ||
| password: passwordError, | ||
| }); | ||
| return; | ||
| } |
Contributor
There was a problem hiding this comment.
Clear stale status message before client-side validation.
When validation fails, old server messages remain visible, which can show misleading success/error text.
Suggested fix
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
+ setMessage("");Also applies to: 120-123
🤖 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 74 - 104, In handleSubmit, clear
any existing server-side status/message state before running client-side
validation so stale success/error text is removed; specifically, call your
status setter (e.g., setStatus('') or setServerMessage(null)) at the start of
handleSubmit before validating formData, and also clear it in the error-return
branch where you call setErrors and in the other submit-related branch around
lines 120-123 so server messages are reset whenever client-side validation fails
or a new submit begins; keep using the existing symbols handleSubmit, setErrors
and your status setter consistently.
Comment on lines
+160
to
+167
| className={`mb-6 flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${ | ||
| mode === "dark" | ||
| ? "bg-white/10 text-white border-white/20 hover:bg-white/20" | ||
| : "bg-white/70 text-gray-800 border-gray-200 hover:bg-white" | ||
| }`} | ||
| > | ||
| <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" /> | ||
| Back to Home |
Contributor
There was a problem hiding this comment.
Back button hover animation class is wired incorrectly.
The icon uses group-hover:*, but the button is missing the group class, so the animation never triggers.
Suggested fix
- className={`mb-6 flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${
+ className={`group mb-6 flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| className={`mb-6 flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${ | |
| mode === "dark" | |
| ? "bg-white/10 text-white border-white/20 hover:bg-white/20" | |
| : "bg-white/70 text-gray-800 border-gray-200 hover:bg-white" | |
| }`} | |
| > | |
| <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" /> | |
| Back to Home | |
| className={`group mb-6 flex items-center gap-2 px-4 py-2 rounded-xl backdrop-blur-xl border transition-all duration-300 hover:scale-105 active:scale-95 ${ | |
| mode === "dark" | |
| ? "bg-white/10 text-white border-white/20 hover:bg-white/20" | |
| : "bg-white/70 text-gray-800 border-gray-200 hover:bg-white" | |
| }`} | |
| > | |
| <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" /> | |
| Back to Home |
🤖 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 160 - 167, The Back button's icon
animation is not triggering because the ArrowLeft uses the group-hover utility
but the parent element (the button container in the JSX where className is set
on the element wrapping ArrowLeft and "Back to Home") doesn't include the
"group" class; update the parent element's className (the same element rendering
ArrowLeft and the text in Signup.tsx) to include "group" so the ArrowLeft's
"group-hover:-translate-x-1" can take effect, or alternatively remove the
group-hover on ArrowLeft and use a direct hover class on ArrowLeft if you prefer
not to add "group" to the parent.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Description
This PR adds a consistent "Back to Home" navigation button across the Login, SignUp, and Contact pages.
The button improves user experience by allowing users to quickly return to the home page without using the browser back button.
Key changes:
useNavigate("/")for routingNo existing functionality or business logic was modified.
How Has This Been Tested?
Screenshots (if applicable)
(Add screenshots here showing the Back to Home button on each page)
Type of Change
Summary by CodeRabbit
New Features
Refactor