Change Password

1"use client"
2 
3import { getViewURL } from "@better-auth-ui/core"
4import {
5  useAuth,
6  useChangePassword,
7  useFetchOptions,
8  useListAccounts,
9  useRequestPasswordReset,
10  useSession
11} from "@better-auth-ui/react"
12import { Eye, EyeOff } from "lucide-react"
13import { type SyntheticEvent, useState } from "react"
14import { toast } from "sonner"
15 
16import { Button } from "@/components/ui/button"
17import { Card, CardContent, CardFooter } from "@/components/ui/card"
18import { Field, FieldError, FieldLabel } from "@/components/ui/field"
19import { Input } from "@/components/ui/input"
20import {
21  InputGroup,
22  InputGroupAddon,
23  InputGroupButton,
24  InputGroupInput
25} from "@/components/ui/input-group"
26import { Skeleton } from "@/components/ui/skeleton"
27import { Spinner } from "@/components/ui/spinner"
28import { cn } from "@/lib/utils"
29import { OpenEmailButton } from "../../open-email-button"
30 
31export type ChangePasswordProps = {
32  className?: string
33}
34 
35/**
36 * Render a card form for changing the authenticated user's password.
37 *
38 * When the user has a credential account, displays fields for current password,
39 * new password, and optionally confirm password. When the user only has social
40 * accounts, displays a prompt to set a password via the reset flow.
41 *
42 * @returns A JSX element containing the change-password or set-password card
43 */
44export function ChangePassword({ className }: ChangePasswordProps) {
45  const { authClient, emailAndPassword, localization } = useAuth()
46  const { data: session } = useSession(authClient)
47  const { data: accounts, isPending: isAccountsPending } =
48    useListAccounts(authClient)
49 
50  const hasCredentialAccount = accounts?.some(
51    (account) => account.providerId === "credential"
52  )
53 
54  if (!isAccountsPending && !hasCredentialAccount) {
55    return <SetPassword className={className} />
56  }
57 
58  return (
59    <ChangePasswordForm
60      className={className}
61      emailAndPassword={emailAndPassword}
62      localization={localization}
63      session={isAccountsPending ? undefined : session}
64    />
65  )
66}
67 
68function SetPassword({ className }: { className?: string }) {
69  const { authClient, basePaths, baseURL, localization, plugins, viewPaths } =
70    useAuth()
71  const { data: session } = useSession(authClient)
72  const { fetchOptions, resetFetchOptions } = useFetchOptions()
73  const [sentEmail, setSentEmail] = useState("")
74 
75  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
76    authClient,
77    {
78      onError: () => {
79// … truncated