Feature: Improved Sign Up Validation & UX#46
Feature: Improved Sign Up Validation & UX#46ziennaa wants to merge 2 commits intoChiragAgg5k:masterfrom
Conversation
|
@ziennaa is attempting to deploy a commit to the Chirag Aggarwal's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughImplements client-side state and validation for the sign-up form, adds a timeout-driven submission flow with toasts and navigation on success, and guards Google sign-up. Also updates icon prop typings from React.HTMLAttributes to React.SVGProps across UI icons. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant S as SignUpPage
participant Auth as Auth API/Service
participant T as Timeout (20s)
participant Toast as Toast UI
participant R as Router
U->>S: Submit name/email/password/confirm
S->>S: Validate password === confirm
alt mismatch
S->>Toast: Show error "Passwords do not match"
S-->>U: Abort submission
else valid
par delayed notice
S->>Toast: (after 8s) Show "Still working..." info
and race
S->>Auth: register(data)
S->>T: start 20s timer
alt Auth resolves first
Auth-->>S: success
S->>Toast: Dismiss notices
S->>R: navigate /dashboard
else Timeout fires first
T-->>S: timeout error
S->>Toast: Show timeout error
end
end
S->>S: Clear timers, unset loading
end
sequenceDiagram
autonumber
actor U as User
participant S as SignUpPage
participant G as loginWithGoogle
participant Toast as Toast UI
U->>S: Click "Continue with Google"
alt Google handler available
S->>G: Invoke Google sign-in
G-->>S: resolve/reject
alt success
S-->>U: Continue (navigation handled elsewhere)
else error
S->>Toast: Show error message
end
else missing handler
S->>Toast: Show "Unavailable" warning
S-->>U: No action
end
S->>S: Maintain/clear loading appropriately
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/app/(auth)/sign-up/page.tsx (2)
140-160: Consider extracting the disabled condition to reduce duplication.The submit button correctly disables when fields are empty or during loading. However, the disabled condition is duplicated in both the
disabledprop (lines 143-147) and theclassNamelogic (lines 149-151).Apply this refactor to improve maintainability:
+ const isFormIncomplete = !name || !email || !password || !confirmPassword; + <Button type="submit" disabled={ - loading || - !name || - !email || - !password || - !confirmPassword + loading || isFormIncomplete } className={`w-full mt-4 ${ - !name || !email || !password || !confirmPassword + isFormIncomplete ? "opacity-50 cursor-not-allowed" : "" }`}
52-58: Abort registration on timeout or enforce idempotent retriesThe
Promise.racetimeout doesn’t canceluser.register, so a slow response may succeed after the timeout and create an account while showing an error. Use anAbortControllerto cancel the request on timeout or make the registration endpoint idempotent (e.g., reuse a fixed user ID) and handle duplicate‐email errors gracefully.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
src/app/(auth)/sign-up/page.tsx(2 hunks)src/components/ui/icons.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/app/(auth)/sign-up/page.tsx (5)
src/components/ui/card.tsx (5)
Card(80-80)CardHeader(81-81)CardTitle(83-83)CardDescription(84-84)CardContent(85-85)src/components/ui/label.tsx (1)
Label(26-26)src/components/ui/input.tsx (1)
Input(25-25)src/components/ui/button.tsx (1)
Button(56-56)src/components/ui/icons.tsx (1)
Icons(3-148)
🔇 Additional comments (5)
src/components/ui/icons.tsx (1)
1-1: LGTM! Better type safety for SVG components.The change from
React.HTMLAttributes<SVGElement>toReact.SVGProps<SVGSVGElement>is an improvement. It provides more accurate typing for SVG-specific attributes and events while remaining compatible with existing usage.src/app/(auth)/sign-up/page.tsx (4)
27-30: LGTM! Appropriate state management for controlled form inputs.The state declarations follow React best practices for controlled components.
37-43: LGTM! Clear password validation with appropriate user feedback.The password match validation is implemented correctly with an early return to prevent submission and a descriptive toast notification.
45-49: LGTM! Good UX pattern for long-running requests.The timeout feedback mechanism provides helpful user feedback when the API response is delayed. The timeout is properly cleared in the finally block.
100-138: LGTM! Well-structured and accessible form inputs.The form inputs follow accessibility best practices with proper labels, IDs, and the controlled component pattern. Input types are appropriate for each field.
| onClick={() => { | ||
| setLoading(true); | ||
| user.loginWithGoogle(); | ||
| try { | ||
| setLoading(true); | ||
| if (user?.loginWithGoogle) { | ||
| user.loginWithGoogle(); | ||
| } else { | ||
| toast("Google Sign-Up coming soon!", { | ||
| description: | ||
| "The integration isn’t available yet.", | ||
| }); | ||
| setLoading(false); | ||
| } | ||
| } catch { | ||
| setLoading(false); | ||
| } | ||
| }} |
There was a problem hiding this comment.
Empty catch block may silently swallow errors.
The Google Sign-Up handler has an empty catch block that only resets the loading state. If loginWithGoogle() throws an error, it will be silently ignored without any user feedback or logging.
Consider adding error handling:
} catch {
+ toast("Sign-Up failed", {
+ description: "An error occurred during Google Sign-Up. Please try again.",
+ });
setLoading(false);
}Alternatively, if errors from loginWithGoogle are handled internally, you can add a comment explaining this:
- } catch {
+ } catch {
+ // loginWithGoogle handles its own errors
setLoading(false);
}📝 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.
| onClick={() => { | |
| setLoading(true); | |
| user.loginWithGoogle(); | |
| try { | |
| setLoading(true); | |
| if (user?.loginWithGoogle) { | |
| user.loginWithGoogle(); | |
| } else { | |
| toast("Google Sign-Up coming soon!", { | |
| description: | |
| "The integration isn’t available yet.", | |
| }); | |
| setLoading(false); | |
| } | |
| } catch { | |
| setLoading(false); | |
| } | |
| }} | |
| onClick={() => { | |
| try { | |
| setLoading(true); | |
| if (user?.loginWithGoogle) { | |
| user.loginWithGoogle(); | |
| } else { | |
| toast("Google Sign-Up coming soon!", { | |
| description: | |
| "The integration isn’t available yet.", | |
| }); | |
| setLoading(false); | |
| } | |
| } catch { | |
| toast("Sign-Up failed", { | |
| description: | |
| "An error occurred during Google Sign-Up. Please try again.", | |
| }); | |
| setLoading(false); | |
| } | |
| }} |
🤖 Prompt for AI Agents
In src/app/(auth)/sign-up/page.tsx around lines 170 to 185, the catch block for
the Google Sign-Up onClick handler is empty and will silently swallow errors;
change it to catch the error (e.g., catch (err)) and handle it by resetting
loading state, logging the error (console.error or app logger), and showing user
feedback (toast with an error message), or alternatively add a clear comment
stating that loginWithGoogle handles all errors internally if that is true;
ensure loading is always reset (use finally or setLoading(false) in both catch
and the non-error branch).
1 participant
Feature: Improved Sign Up Validation & UX
Description
Enhanced the Sign Up page by adding a Confirm Password field, improving form validation, and providing better feedback for users during registration.
This PR fixes that by adding instant validation, a password match check, and timeout feedback for smoother user experience.
Changes Made
Impact
Improves user experience, prevents invalid signups, and adds professional grade UX validation.
Summary by CodeRabbit