Enhanced Authentication Form with Success Messages #95
Enhanced Authentication Form with Success Messages #95Amruthasg23 wants to merge 2 commits intoRamakrushnaBiswal:mainfrom
Conversation
|
@Amruthatech23 is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds inline success/error UI to SignIn and SignUp. SignIn integrates framer-motion’s AnimatePresence and refactors response handling. SignUp adds client-side validation (password mismatch/length), sets error/success states, and short-circuits on failures. Both retain existing flows and exports with minor formatting and header object inlining. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant SI as SignIn Component
participant API as Auth API
U->>SI: Submit credentials
SI->>API: POST /auth/signin (headers inlined)
alt Success
API-->>SI: 200 OK (token)
SI->>API: GET /auth/user
API-->>SI: 200 OK (user JSON)
note over SI: Update success state<br/>AnimatePresence shows success
else Error
API-->>SI: 4xx/5xx
note over SI: Update error state<br/>AnimatePresence shows error
end
sequenceDiagram
autonumber
participant U as User
participant SU as SignUp Component
participant API as Auth API
U->>SU: Submit signup form
alt Client-side validation fails
SU->>SU: Set error state + toast<br/>Stop loading and return
note over SU: Inline error panel visible
else Validation passes
SU->>API: POST /auth/signup
alt Success
API-->>SU: 200/201 OK
SU->>SU: Set success state<br/>Show inline success
else Error
API-->>SU: 4xx/5xx
SU->>SU: Set error state + toast
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@RamakrushnaBiswal Thanks, |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
Frontend/src/components/SignIn.jsx (3)
193-200: Fix: @react-oauth/google uses onError (not onFailure).The GoogleLogin component in @react-oauth/google exposes onSuccess and onError. onFailure won’t fire and will silently drop errors.
Apply this diff:
- <GoogleLogin - onSuccess={handleGoogleLoginSuccess} - onFailure={(err) => console.log("Google login failed:", err)} - theme="filled_blue" - size="large" - width={300} - /> + <GoogleLogin + onSuccess={handleGoogleLoginSuccess} + onError={(err) => console.error("Google login failed:", err)} + theme="filled_blue" + size="large" + width={300} + />
84-94: Await Google profile save to avoid losing the request on redirect/reload.You don’t await saveUserToDB before navigating and reloading; the in-flight request can be aborted, dropping the profile save. Make the handler async, await the call, and surface errors.
Apply this diff:
- const handleGoogleLoginSuccess = (response) => { - const decoded = jwtDecode(response.credential); - localStorage.setItem("user", JSON.stringify(decoded)); - saveUserToDB({ name: decoded.name, email: decoded.email, googleId: decoded.sub }); - toast.success("Signed in with Google successfully! Redirecting..."); - setSuccess("Signed in with Google successfully! Redirecting..."); - setTimeout(() => { - navigate("/"); - window.location.reload(); - }, 1500); - }; + const handleGoogleLoginSuccess = async (response) => { + try { + const decoded = jwtDecode(response.credential); + localStorage.setItem("user", JSON.stringify(decoded)); + await saveUserToDB({ name: decoded.name, email: decoded.email, googleId: decoded.sub }); + toast.success("Signed in with Google successfully! Redirecting..."); + setSuccess("Signed in with Google successfully! Redirecting..."); + setTimeout(() => { + navigate("/"); + window.location.reload(); + }, 1500); + } catch (e) { + console.error("Google login save failed:", e); + toast.error("Google login succeeded, but saving your profile failed. You can continue, or try again."); + setError("Google login succeeded, but saving your profile failed. You can continue, or try again."); + } + };
70-81: Harden saveUserToDB: check response.ok and return parsed payload.Currently the response body is parsed and discarded, and non-OK statuses aren’t handled. Align with SignUp’s version to reduce silent failures and enable callers to act on the result.
Apply this diff:
- const saveUserToDB = async (userData) => { - try { - const response = await fetch(`${BACKEND_URL}/auth/user`, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(userData), - }); - await response.json(); - } catch (error) { - console.error("Error saving user:", error); - } - }; + const saveUserToDB = async (userData) => { + const response = await fetch(`${BACKEND_URL}/auth/user`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(userData), + }); + const data = await response.json().catch(() => null); + if (!response.ok) { + throw new Error(data?.message || `Save user failed: ${response.status}`); + } + return data; + };
🧹 Nitpick comments (5)
Frontend/src/components/SignIn.jsx (2)
53-56: Consider avoiding full page reload after navigate.navigate("/") followed by window.location.reload() defeats SPA benefits and can abort in-flight requests. If the reload is used to refresh auth state, prefer a central auth context/store and react to token changes.
Example minimal change (optional):
- setTimeout(() => { - navigate("/"); - window.location.reload(); - }, 1500); + setTimeout(() => { + navigate("/"); + }, 1500);Also applies to: 91-93
39-57: Optional: guard JSON parsing for non-JSON error responses.await response.json() can throw on empty/non-JSON bodies, surfacing as “Network error”. Consider content-type checks or a text fallback to show accurate server errors.
Possible pattern:
- const data = await response.json(); + const isJson = response.headers.get("content-type")?.includes("application/json"); + const data = isJson ? await response.json() : { message: await response.text() };Frontend/src/components/SignUp.jsx (3)
36-41: Prevent loading flicker: start loading after client-side validations.You set loading before validations and then immediately clear it on validation failures, which can cause a brief flicker.
Apply this diff:
const handleSubmit = async (e) => { e.preventDefault(); - setLoading(true); setError(""); setSuccess(""); // Basic validation if (formData.password !== formData.confirmPassword) { toast.error("Passwords do not match"); setError("Passwords do not match"); setLoading(false); return; } if (formData.password.length < 6) { toast.error("Password must be at least 6 characters long"); setError("Password must be at least 6 characters long"); setLoading(false); return; } + setLoading(true); try { const response = await fetch(`${BACKEND_URL}/auth/signup`, {Also applies to: 57-58
74-76: Token in localStorage: consider HttpOnly cookies for session security.Storing JWTs in localStorage exposes them to XSS. If your backend can set SameSite/HttpOnly/Secure cookies (recommended), drop localStorage for tokens and rely on cookies + credentials: "include".
If you must keep localStorage, ensure strict CSP, audit any dangerouslySetInnerHTML, and sanitize 3P scripts.
79-81: Consider removing window.location.reload().Reloading after navigate resets app state and can degrade UX. Prefer updating global auth state and letting the router render accordingly.
Apply this diff:
- setTimeout(() => { - navigate("/"); - window.location.reload(); - }, 1500); + setTimeout(() => { + navigate("/"); + }, 1500);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
Frontend/src/components/SignIn.jsx(5 hunks)Frontend/src/components/SignUp.jsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-04T18:51:46.896Z
Learnt from: cherylpinto
PR: RamakrushnaBiswal/HonorBox#79
File: Frontend/src/components/Navbar.jsx:0-0
Timestamp: 2025-08-04T18:51:46.896Z
Learning: In the HonorBox project Frontend/src/components/Navbar.jsx, the password change functionality in confirmChangePassword() intentionally only logs to console as this was a UI-only enhancement PR, with backend integration planned for future implementation.
Applied to files:
Frontend/src/components/SignIn.jsxFrontend/src/components/SignUp.jsx
🧬 Code Graph Analysis (2)
Frontend/src/components/SignIn.jsx (2)
Frontend/src/components/DarkVeil.jsx (1)
DarkVeil(76-160)Frontend/src/components/SignUp.jsx (2)
success(23-23)error(22-22)
Frontend/src/components/SignUp.jsx (2)
Frontend/src/components/SignIn.jsx (8)
formData(13-16)error(19-19)success(20-20)navigate(22-22)BACKEND_URL(23-23)handleChange(25-31)handleSubmit(33-68)saveUserToDB(71-82)Frontend/src/components/Navbar.jsx (2)
navigate(39-39)saveUserToDB(73-83)
🔇 Additional comments (7)
Frontend/src/components/SignIn.jsx (3)
4-4: LGTM: AnimatePresence import is appropriate for the new feedback animations.Importing AnimatePresence alongside motion is correct for the animated inline messages you added.
159-183: LGTM: Animated inline success/error feedback is well-structured.Good use of AnimatePresence with enter/exit animations and clear visual delineation for success vs error.
97-101: LGTM: Layering for DarkVeil and content is correct.Absolute canvas under a relatively positioned content wrapper with z-index is clean and avoids pointer/scroll issues.
Frontend/src/components/SignUp.jsx (4)
25-26: Ensure VITE_BACKEND_URL is configured for all environments.Missing env will produce fetch to “undefined/auth/...”. Confirm VITE_BACKEND_URL is set in .env(.local)/CI and documented.
95-110: LGTM: saveUserToDB returns data and throws on failure.Clear contract and error propagation; this aligns well with its usage in Google flow.
249-261: LGTM: Clear inline error/success panels complement toasts.Good visibility; styling is consistent with the theme.
279-291: LGTM: GoogleLogin usage (onSuccess/onError, disabled when loading).This matches the current @react-oauth/google API and prevents duplicate submissions.
|
@RamakrushnaBiswal Please review the PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
resolve conflicts @Amruthasg23 |
2 participants
📝 Description
Added improvements to Sign In and Sign Up pages for better user experience.
Enhancements include success messages after login/signup, improved button UI, title and description content, and styling updates to match the overall theme of the website.
🔗 Linked Issues
Closes #89
🧪 Type of Change
[x] ✨ New feature (non-breaking change which adds functionality)
[x] 🎨 Style update (formatting, renaming)
[x] 🐛 Bug fix (non-breaking change which fixes an issue)
🔄 Changes Made
Added success message display below form (e.g., “Sign in successful!” / “Account created successfully!”).
Updated button styling with gradient, hover, and loading state.
Added page title and description for clarity and better user guidance.
Fixed UI alignment and spacing for input fields & icons.
Added toast notifications for errors and success.
Enhanced overall form design to match background & theme.
🧪 Testing
[x] I have tested the changes locally
[x] I have tested on multiple browsers (Chrome, Edge)
[ ] I have tested the API endpoints (backend required)
Test Cases
Entered valid credentials in Sign In → success message displayed + redirect works.
Created new account in Sign Up → success message displayed + redirect works.
Entered invalid credentials → error message shown below form + toast alert.
Tried submitting without required fields → prevented with error.
📋 Checklist
[x] My code follows the project's style guidelines
[x] I have performed a self-review of my code
[x] I have commented my code where necessary
[x] My changes generate no new warnings
[ ] I have added/updated tests (if applicable)
[x] All existing tests pass locally with my changes
🌟 GSSoC Participation
[x] I am participating in GSSoC 2025
📝 Additional Notes
These updates are part of the UI/UX improvement tasks.
Backend connectivity for authentication still needs to be verified separately.
🤝 Contribution Guidelines
[x] I have read and followed the project's contributing guidelines
[x] I have checked that my PR doesn't duplicate an existing one
[x] I have ensured my branch is up to date with the main branch
[x] I agree to follow the project's Code of Conduct
Summary by CodeRabbit