Manage Profile Component (manage-profile.tsx)

Types

ManageProfileProps

Props for the ManageProfile component:

• isOpen: boolean – Whether the modal is open.

• onClose: () => void – Callback to close the modal.

---

Component

ManageProfile({ isOpen, onClose }: ManageProfileProps)

A modal dialog for editing and updating user profile information.

State:

• displayName: The user's display name.

• email: The user's email address.

• password: The user's current password (required for email change).

• isLoading: Whether an update is in progress.

• error: Error message for update failures.

• success: Success message for updates.

• showResetForm: Whether to show the password reset form.

• verificationSent: Whether a verification email has been sent.

Features:

• Profile Update:

  • Allows updating display name and email.

  • Requires current password to change email (with re-authentication).

  • Sends a verification email on email change.

  • Updates the user's profile in Firebase and the backend KV store.

• Password Reset:

  • Option to open the password reset form in a modal.

• Feedback:

  • Displays error and success messages.

  • Shows a notice for account deletion (contact support).

• Accessibility:

  • Modal can be closed with the close button.

Rendering:

• Returns null if the modal is not open.

• Renders the PasswordReset modal if showResetForm is true.

• Otherwise, displays the profile management form.