Uh oh!
There was an error while loading. Please reload this page.
Delete user account - #64
Conversation
WalkthroughThe changes introduce a new account deletion feature to the frontend. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AccountDialog
participant DeleteAccountDialog
participant OpenSecretAPI
participant BillingService
participant AuthService
User->>AccountDialog: Clicks "Delete Account"
AccountDialog->>DeleteAccountDialog: Opens modal
User->>DeleteAccountDialog: Types "DELETE" and submits
DeleteAccountDialog->>OpenSecretAPI: requestAccountDeletion(secret hash)
OpenSecretAPI-->>DeleteAccountDialog: Sends UUID via email
DeleteAccountDialog->>User: Prompts for UUID
User->>DeleteAccountDialog: Enters UUID and submits
DeleteAccountDialog->>OpenSecretAPI: confirmAccountDeletion(UUID, secret)
OpenSecretAPI-->>DeleteAccountDialog: Confirms deletion
DeleteAccountDialog->>BillingService: Clear billing tokens
BillingService-->>DeleteAccountDialog: Billing tokens cleared
DeleteAccountDialog->>AuthService: Sign out
AuthService-->>User: User is logged out and page reloads
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File ( |
Deploying maple with |
| Latest commit: | f24bce6 |
| Status: | ✅ Deploy successful! |
| Preview URL: | https://23f69b23.maple-ca8.pages.dev |
| Branch Preview URL: | https://delete-user-account.maple-ca8.pages.dev |
There was a problem hiding this comment.
PR Summary
Implemented a secure two-step account deletion process with email verification and token cleanup functionality.
- Added new
DeleteAccountDialogcomponent with two-step verification requiring "DELETE" confirmation and email code - Updated
AccountDialogwith delete account button and integration with@opensecret/reactv1.3.3 - Implemented secure secret generation and hashing for deletion request/confirmation flow
- Added comprehensive cleanup process that removes billing tokens and user session data upon deletion
- Added loading states and error handling with user feedback throughout deletion process
3 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/components/DeleteAccountDialog.tsx (1)
137-147: Consider adding UUID format guidance.The confirmation code input doesn't provide any guidance on the expected format of the UUID. Consider adding a helper text or placeholder with format information to help users enter the code correctly.
<div className="space-y-2"> <Label htmlFor="confirmation-code">Confirmation Code</Label> <Input id="confirmation-code" value={uuid} onChange={(e) => setUuid(e.target.value)} - placeholder="Enter code from email"+ placeholder="Enter confirmation code from email (e.g., 123e4567-e89b-12d3-a456-426614174000)" className="w-full" /> + <p className="text-xs text-muted-foreground">+ The confirmation code is a unique identifier sent to your email address.+ </p> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/bun.lockis excluded by!**/*.lock
📒 Files selected for processing (3)
frontend/package.json(1 hunks)frontend/src/components/AccountDialog.tsx(3 hunks)frontend/src/components/DeleteAccountDialog.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
frontend/src/components/AccountDialog.tsx (3)
frontend/src/components/ui/dialog.tsx (1)
DialogTrigger(96-96)frontend/src/components/ui/button.tsx (1)
Button(62-62)frontend/src/components/DeleteAccountDialog.tsx (1)
DeleteAccountDialog(24-189)
frontend/src/components/DeleteAccountDialog.tsx (6)
frontend/src/billing/billingService.ts (1)
getBillingService(114-119)frontend/src/components/ui/alert-dialog.tsx (7)
AlertDialog(104-104)AlertDialogContent(108-108)AlertDialogHeader(109-109)AlertDialogTitle(111-111)AlertDialogDescription(112-112)AlertDialogFooter(110-110)AlertDialogCancel(114-114)frontend/src/components/ui/label.tsx (1)
Label(19-19)frontend/src/components/ui/input.tsx (1)
Input(24-24)frontend/src/components/AlertDestructive.tsx (1)
AlertDestructive(5-15)frontend/src/components/ui/button.tsx (1)
Button(62-62)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-linux
- GitHub Check: build-ios
- GitHub Check: Cloudflare Pages
🔇 Additional comments (12)
frontend/package.json (1)
19-19: Package version update looks good.The version of
@opensecret/reacthas been updated from "1.3.1" to "1.3.3" to support the new account deletion feature.frontend/src/components/AccountDialog.tsx (5)
23-23: Appropriate icon import added.The
Trashicon import from lucide-react is appropriate for the new delete account button.
26-26: New component import looks good.Importing the new
DeleteAccountDialogcomponent that will handle the account deletion process.
31-31: Good state management for dialog visibility.Using a dedicated state variable for controlling the delete account dialog visibility follows the same pattern as the change password dialog.
110-136: Destructive action properly implemented with clear visual indicators.The "Delete Account" button implementation looks good:
- Uses a flex container for vertical button layout
- Applies appropriate destructive styling
- Includes a visual trash icon
- Prevents form submission correctly
- Has appropriate type designation
This implementation properly signals to users that this is a destructive action.
147-147:Details
❌ Incorrect review comment
Consider conditional rendering for DeleteAccountDialog.
Unlike the
ChangePasswordDialogwhich is conditionally rendered only for email users, theDeleteAccountDialogis always rendered. Should it also have the same conditional logic based onisEmailUser?🏁 Script executed:
#!/bin/bash# Check if the DeleteAccountDialog should be conditional based on account type# Check if deletion API is conditional in OpenSecret react package rg -A 3 "requestAccountDeletion|confirmAccountDeletion" --type tsx --type tsLength of output: 106
🏁 Script executed:
#!/bin/bash# Locate and display the DeleteAccountDialog component to verify its conditional logic file=$(fd --exact-name DeleteAccountDialog.tsx)echo"Found file: $file" sed -n '1,200p'"$file"Length of output: 360
🏁 Script executed:
#!/bin/bash# Find and display the DeleteAccountDialog component to check if it uses any conditional logic file=$(find . -type f -name 'DeleteAccountDialog.tsx'| head -n1)if [ -z"$file" ];thenecho"DeleteAccountDialog.tsx not found"exit 1 fiecho"Found file: $file" sed -n '1,200p'"$file"Length of output: 6492
🏁 Script executed:
#!/bin/bash# Locate AccountDialog.tsx and inspect conditional rendering logic file=$(find . -type f -name 'AccountDialog.tsx'| head -n1)if [ -z"$file" ];thenecho"AccountDialog.tsx not found"exit 1 fiecho"Found file: $file"echo"--- Checking ChangePasswordDialog usage ---" grep -n "ChangePasswordDialog""$file"echo"--- Checking DeleteAccountDialog usage ---" grep -n "DeleteAccountDialog""$file"echo"--- Checking isEmailUser usage ---" grep -n "isEmailUser""$file"echo"--- Displaying top of file for context ---" sed -n '1,200p'"$file"Length of output: 6656
DeleteAccountDialog is intentionally unconditional
The DeleteAccountDialog is meant to be available to all users, whereas changing a password only applies to email-authenticated accounts. In AccountDialog.tsx you can see:
- ChangePasswordDialog is wrapped in
{isEmailUser && …}- DeleteAccountDialog is always rendered
Since account deletion (via email confirmation) should work for every user regardless of login method, no additional
isEmailUserguard is needed here. You can safely ignore the original suggestion.Likely an incorrect or invalid review comment.
frontend/src/components/DeleteAccountDialog.tsx (6)
1-18: Imports are well-organized and comprehensive.All necessary components and utilities are properly imported, including specialized UI components for destructive actions and the required hooks and services.
19-32: Well-structured component with proper state management.The component has a clean interface with appropriate props and well-typed state variables to manage the two-step deletion process.
34-60: Good implementation of the initial deletion request step.The implementation includes:
- Appropriate validation for the "DELETE" confirmation
- Secure secret generation and hashing
- Proper loading and error state management
- Clear transition to the next step
This creates a good security barrier requiring explicit user confirmation.
93-99: Good reset functionality in cancel handler.The cancel handler properly resets all state variables and closes the dialog, providing a clean exit path for users who change their mind.
101-150: Clear and informative UI with proper warning messages.The dialog UI provides:
- Clear step-specific titles and descriptions
- Prominent warning about the permanent nature of deletion
- Good input validation and error display
- Appropriate visual styling for a destructive action
This ensures users are well-informed about the consequences of their action.
152-185: Good button states with loading indicators.The implementation includes:
- Proper button disabling based on input validation and loading state
- Clear loading indicators during async operations
- Destructive styling for the actions
- Consistent cancel option at each step
This provides good feedback to users during the deletion process.
Uh oh!
There was an error while loading. Please reload this page.
Summary by CodeRabbit
New Features
Bug Fixes
Chores