feat(password-update): hide fields behind Set/Change button#82
Merged
Conversation
Password inputs are hidden until the user clicks "Set/Change password". A Cancel button collapses the form and clears the fields; successful updates also auto-collapse. Reduces visual noise on the Settings page when the user isn't actively changing their password. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for fluffy-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe PasswordUpdate component has been modified to hide the password form by default, displaying only a "Set/Change password" toggle button. Clicking it reveals the form with a new cancel button that collapses the form and clears input fields. Tests have been updated to verify this behavior. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 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 docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
lib/supabase/PasswordUpdate.test.tsx (1)
53-72: Add one test for success-path collapse + success alert persistence.The PR objective includes “auto-collapse on successful update while success alert remains visible,” but this behavior is not asserted in the updated test set.
Suggested additional test
+ it("collapses the form after successful submit and keeps success alert visible", async () => { + const user = userEvent.setup(); + render( + <MockSupabaseProvider user={{ email: "test@example.com" }}> + <PasswordUpdate /> + </MockSupabaseProvider>, + ); + + await user.click(screen.getByRole("button", { name: /set\/change password/i })); + await user.type(screen.getByPlaceholderText("New password"), "newpass123"); + await user.type(screen.getByPlaceholderText("Confirm new password"), "newpass123"); + await user.click(screen.getByRole("button", { name: /^set password$/i })); + + expect(screen.queryByPlaceholderText("New password")).not.toBeInTheDocument(); + expect(screen.queryByPlaceholderText("Confirm new password")).not.toBeInTheDocument(); + expect(screen.getByText(/password updated successfully\./i)).toBeInTheDocument(); + });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/supabase/PasswordUpdate.test.tsx` around lines 53 - 72, Add a test that verifies the success-path: render <PasswordUpdate /> inside <MockSupabaseProvider /> with the Supabase password-update call mocked to succeed, fill and submit the form using userEvent (like in the existing "Cancel collapses..." test), then assert the form fields are no longer in the document (component collapsed) while a visible success alert/message from PasswordUpdate remains present; use the same helpers (userEvent.setup, screen.getByRole, screen.getByPlaceholderText, screen.queryByPlaceholderText) and mock the update call (or provider prop) to return a successful response so the test exercises auto-collapse on success and persistence of the success alert.lib/supabase/PasswordUpdate.tsx (1)
76-77: Consider clearing stale success when re-entering edit mode.On Line 76, re-opening the form can keep a prior success alert visible while editing. Clearing
successon edit-start avoids mixed states.Optional tweak
- <Button type="button" variant="secondary" onClick={() => setIsEditing(true)}> + <Button + type="button" + variant="secondary" + onClick={() => { + setSuccess(false); + setIsEditing(true); + }} + > Set/Change password </Button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/supabase/PasswordUpdate.tsx` around lines 76 - 77, The Set/Change password button currently only calls setIsEditing(true) which can leave a prior success message shown; update the Button onClick handler in PasswordUpdate.tsx to also clear the success state (call the component's setSuccess(...) with the empty/neutral value used in this file) when entering edit mode so stale success alerts are removed; reference the Button element and the state setters setIsEditing and setSuccess when making this change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@lib/supabase/PasswordUpdate.test.tsx`:
- Around line 53-72: Add a test that verifies the success-path: render
<PasswordUpdate /> inside <MockSupabaseProvider /> with the Supabase
password-update call mocked to succeed, fill and submit the form using userEvent
(like in the existing "Cancel collapses..." test), then assert the form fields
are no longer in the document (component collapsed) while a visible success
alert/message from PasswordUpdate remains present; use the same helpers
(userEvent.setup, screen.getByRole, screen.getByPlaceholderText,
screen.queryByPlaceholderText) and mock the update call (or provider prop) to
return a successful response so the test exercises auto-collapse on success and
persistence of the success alert.
In `@lib/supabase/PasswordUpdate.tsx`:
- Around line 76-77: The Set/Change password button currently only calls
setIsEditing(true) which can leave a prior success message shown; update the
Button onClick handler in PasswordUpdate.tsx to also clear the success state
(call the component's setSuccess(...) with the empty/neutral value used in this
file) when entering edit mode so stale success alerts are removed; reference the
Button element and the state setters setIsEditing and setSuccess when making
this change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 09d0fc11-b19b-47b2-b8c5-3a6e1f1d8994
📒 Files selected for processing (2)
lib/supabase/PasswordUpdate.test.tsxlib/supabase/PasswordUpdate.tsx
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.
Summary
PasswordUpdateare hidden initially; a Set/Change password button reveals the form.Test plan
npx vitest run lib/supabase/PasswordUpdate.test.tsx— 4/4 passingnpm run lint— cleannpx tsc --noEmit— clean🤖 Generated with Claude Code