Implement reset password - #63
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughThis PR adds a Card UI component, implements a client-side password reset flow (forgot + reset pages), refactors account and register pages to use Card components, exposes password-reset wrappers in the data layer, and bumps two Spree-related package versions. Changes
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant ForgotPage as "ForgotPassword Page"
participant ResetPage as "ResetPassword Page"
participant SDK as "@spree/next SDK"
participant Backend
User->>Browser: Open forgot-password
Browser->>ForgotPage: render
User->>ForgotPage: submit email
ForgotPage->>SDK: requestPasswordReset(email, redirectUrl)
SDK->>Backend: send reset request
Backend-->>SDK: success
SDK-->>ForgotPage: success
ForgotPage->>Browser: show confirmation
User->>Browser: click email link (token)
Browser->>ResetPage: load with token
ResetPage->>ResetPage: validate token present
User->>ResetPage: submit new password
ResetPage->>SDK: resetPassword(token, password, confirmation)
SDK->>Backend: perform reset
Backend-->>SDK: success
SDK-->>ResetPage: success
ResetPage->>Browser: show success / sign-in link
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/`[country]/[locale]/(storefront)/account/forgot-password/page.tsx:
- Around line 39-40: The call to requestPasswordReset currently sets
setSubmitted(true) unconditionally; instead, capture the returned result (from
requestPasswordReset(email, redirectUrl)), check result.success and only call
setSubmitted(true) on success, otherwise call setError(result.error ||
"Something went wrong. Please try again."); mirror the resetPassword handling so
failures surface to the user rather than showing the success confirmation.
In `@src/app/`[country]/[locale]/(storefront)/account/layout.tsx:
- Around line 152-155: The current isAuthPage uses substring checks
(pathname.includes) which can false-match; change it to exact-route matching by
normalizing pathname (strip query string and trailing slashes) and then compare
against an explicit list of auth routes (e.g., "/register", "/forgot-password",
"/reset-password") using exact equality (or matching the final path segment)
instead of includes; update the isAuthPage assignment to call this normalization
and equality check (replace uses of pathname.includes in isAuthPage) so only
exact auth routes are considered.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 348e02d2-420e-4b81-8f8d-5e575b59daa5
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
package.jsonsrc/app/[country]/[locale]/(storefront)/account/forgot-password/page.tsxsrc/app/[country]/[locale]/(storefront)/account/layout.tsxsrc/app/[country]/[locale]/(storefront)/account/page.tsxsrc/app/[country]/[locale]/(storefront)/account/register/page.tsxsrc/app/[country]/[locale]/(storefront)/account/reset-password/page.tsxsrc/components/ui/card.tsxsrc/lib/data/customer.ts
| await requestPasswordReset(email, redirectUrl); | ||
| setSubmitted(true); |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For @spree/next v0.10.5, what is the exact failure behavior of requestPasswordReset(email, redirectUrl): does it throw, or return an object like { success: false, error }?
💡 Result:
I couldn’t verify the exact v0.10.5 behavior from public docs/source via web search (the Spree docs page for @spree/next doesn’t document requestPasswordReset, and I couldn’t retrieve the v0.10.5 package source itself from an authoritative public location in this environment). (spreecommerce.org)
What I can say confidently is:
- The older Spree JS SDK (
@spree/storefront-api-v2-sdk) explicitly does not throw and instead returns a “result object” you must inspect (isSuccess()/isFail(),fail()), but that statement is about that SDK, not@spree/next. (app.unpkg.com)
So for @spree/next@0.10.5 specifically, you’ll need to confirm by checking the installed package’s typings/implementation locally:
node_modules/@spree/next/dist/**/*.d.ts(or equivalent) — see whetherrequestPasswordReset(...)returnsPromise<void>/Promise<...>and whether it documents throwing.node_modules/@spree/next/dist/**/*.js— search forfunction requestPasswordResetand see if it doesif (!res.ok) throw ...vsreturn { success: false, error }.
If you paste the requestPasswordReset function (or its .d.ts signature) from @spree/next@0.10.5, I can tell you precisely whether it throws or returns a { success: false, error }-style object.
Citations:
- 1: https://spreecommerce.org/docs/developer/storefront/nextjs/spree-next-package?utm_source=openai
- 2: https://app.unpkg.com/%40spree/storefront-api-v2-sdk%404.4.4/files/README.md?utm_source=openai
🏁 Script executed:
find . -type f -name "page.tsx" | grep "forgot-password" | head -5Repository: spree/storefront
Length of output: 134
🏁 Script executed:
cat -n src/app/[country]/[locale]/\(storefront\)/account/forgot-password/page.tsx 2>/dev/null || find . -type f -path "*forgot-password/page.tsx" -exec cat -n {} \;Repository: spree/storefront
Length of output: 5935
🏁 Script executed:
rg "requestPasswordReset" -t ts -t tsx -A 3 -B 3Repository: spree/storefront
Length of output: 87
🏁 Script executed:
find . -path "*/node_modules/@spree/next*" -name "*.d.ts" -o -path "*/node_modules/@spree/next*" -name "package.json" | head -10Repository: spree/storefront
Length of output: 42
🏁 Script executed:
find . -path "*/lib/data/customer*" -type fRepository: spree/storefront
Length of output: 86
🏁 Script executed:
cat -n src/lib/data/customer.ts 2>/dev/null || cat -n src/lib/data/customer.js 2>/dev/null || find . -path "*/lib/data/customer*" -type f -exec cat -n {} \;Repository: spree/storefront
Length of output: 1767
🏁 Script executed:
find . -type d -name "@spree" | head -5Repository: spree/storefront
Length of output: 42
🏁 Script executed:
find . -path "*/node_modules/@spree/next*" -type f \( -name "*.d.ts" -o -name "index.js" -o -name "index.ts" \) | head -20Repository: spree/storefront
Length of output: 42
🏁 Script executed:
grep -r "requestPasswordReset" node_modules/@spree/next --include="*.d.ts" --include="*.ts" --include="*.js" 2>/dev/null | head -20Repository: spree/storefront
Length of output: 42
🏁 Script executed:
cat package.json | grep -A 2 -B 2 "@spree/next"Repository: spree/storefront
Length of output: 231
🏁 Script executed:
find . -type f \( -name "package.json" -o -name "package-lock.json" -o -name "pnpm-lock.yaml" \) -exec grep -l "@spree/next" {} \;Repository: spree/storefront
Length of output: 94
🏁 Script executed:
grep -r "requestPasswordReset" src/ --include="*.ts" --include="*.tsx" -B 5 -A 10Repository: spree/storefront
Length of output: 5109
🏁 Script executed:
find . -type f -name "*.ts" -o -name "*.tsx" | xargs grep -l "login\|register" | grep -E "(page|component)" | head -5Repository: spree/storefront
Length of output: 186
🏁 Script executed:
grep -A 10 "handleSubmit\|await _login\|await _register" src/app/**/*.tsx 2>/dev/null | head -40Repository: spree/storefront
Length of output: 42
🏁 Script executed:
find . -type f -name "*.tsx" -path "*/account/*" -exec grep -l "login\|register" {} \; | head -5Repository: spree/storefront
Length of output: 247
🏁 Script executed:
cat -n src/app/[country]/[locale]/\(storefront\)/account/page.tsx | head -100Repository: spree/storefront
Length of output: 3823
🏁 Script executed:
cat -n src/app/[country]/[locale]/\(storefront\)/account/register/page.tsx | head -100Repository: spree/storefront
Length of output: 3937
🏁 Script executed:
cat -n src/contexts/AuthContext.tsx | head -150Repository: spree/storefront
Length of output: 4239
🏁 Script executed:
cat -n src/lib/data/customer.tsRepository: spree/storefront
Length of output: 1767
🏁 Script executed:
grep -r "login as _login" src/ --include="*.ts" --include="*.tsx" -A 5 -B 5 | head -50Repository: spree/storefront
Length of output: 550
🏁 Script executed:
cat -n src/lib/data/utils.ts 2>/dev/null || find . -path "*/lib/data/utils*" -type f -exec cat -n {} \;Repository: spree/storefront
Length of output: 1142
🏁 Script executed:
find . -type f \( -name "*.ts" -o -name "*.tsx" \) -exec grep -l "resetPassword\|requestPasswordReset" {} \;Repository: spree/storefront
Length of output: 235
🏁 Script executed:
cat -n src/app/[country]/[locale]/\(storefront\)/account/reset-password/page.tsx 2>/dev/null | head -100Repository: spree/storefront
Length of output: 3764
Check the requestPasswordReset result for success before showing confirmation.
At lines 39-40, setSubmitted(true) is called unconditionally after await requestPasswordReset(...). The reset-password page (lines 80-88) treats resetPassword as returning a result object with { success, error } and checks if (result.success). Since requestPasswordReset is wrapped identically to resetPassword in the customer module, it likely returns the same result object. If requestPasswordReset returns { success: false }, the try-catch will not catch it, and users will see a false "Check your email" success message.
Align the error handling with the reset-password page pattern:
const result = await requestPasswordReset(email, redirectUrl);
if (result.success) {
setSubmitted(true);
} else {
setError(result.error || "Something went wrong. Please try again.");
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/`[country]/[locale]/(storefront)/account/forgot-password/page.tsx
around lines 39 - 40, The call to requestPasswordReset currently sets
setSubmitted(true) unconditionally; instead, capture the returned result (from
requestPasswordReset(email, redirectUrl)), check result.success and only call
setSubmitted(true) on success, otherwise call setError(result.error ||
"Something went wrong. Please try again."); mirror the resetPassword handling so
failures surface to the user rather than showing the success confirmation.
1 participant
Summary by CodeRabbit
New Features
Style
Chores