@better-auth-ui/heroui 1.6.0

package/src/components/settings/security/change-password.tsx

@@ -0,0 +1,335 @@
+import {
+  useAuth,
+  useChangePassword,
+  useListAccounts,
+  useRequestPasswordReset,
+  useSession
+} from "@better-auth-ui/react"
+import { Eye, EyeSlash } from "@gravity-ui/icons"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Fieldset,
+  Form,
+  Input,
+  InputGroup,
+  Label,
+  Skeleton,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+export type ChangePasswordProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card form for changing the authenticated user's password.
+ *
+ * When the user has a credential account, displays fields for current password,
+ * new password, and optionally confirm password. When the user only has social
+ * accounts, displays a prompt to set a password via the reset flow.
+ *
+ * @returns A JSX element containing the change-password or set-password card
+ */
+export function ChangePassword({
+  className,
+  variant,
+  ...props
+}: ChangePasswordProps & CardProps) {
+  const { emailAndPassword, localization } = useAuth()
+  const { data: session } = useSession()
+  const { data: accounts, isPending: isAccountsPending } = useListAccounts()
+
+  const hasCredentialAccount = accounts?.some(
+    (account) => account.providerId === "credential"
+  )
+
+  if (!isAccountsPending && !hasCredentialAccount) {
+    return <SetPassword className={className} variant={variant} {...props} />
+  }
+
+  return (
+    <ChangePasswordForm
+      className={className}
+      variant={variant}
+      emailAndPassword={emailAndPassword}
+      localization={localization}
+      session={isAccountsPending ? undefined : session}
+      {...props}
+    />
+  )
+}
+
+function SetPassword({ className, variant, ...props }: CardProps) {
+  const { localization } = useAuth()
+  const { data: session } = useSession()
+
+  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
+  })
+
+  const handleSetPassword = () => {
+    if (!session?.user.email) return
+    requestPasswordReset({ email: session.user.email })
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.changePassword}
+      </h2>
+
+      <Card className={cn(className)} variant={variant} {...props}>
+        <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p className="text-sm font-medium leading-tight">
+              {localization.settings.setPassword}
+            </p>
+
+            <p className="text-muted text-xs mt-0.5">
+              {localization.settings.setPasswordDescription}
+            </p>
+          </div>
+
+          <Button
+            size="sm"
+            isPending={isPending}
+            isDisabled={!session}
+            onPress={handleSetPassword}
+          >
+            {isPending && <Spinner color="current" size="sm" />}
+            {localization.auth.sendResetLink}
+          </Button>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}
+
+function ChangePasswordForm({
+  className,
+  variant,
+  emailAndPassword,
+  localization,
+  session,
+  ...props
+}: {
+  emailAndPassword: ReturnType<typeof useAuth>["emailAndPassword"]
+  localization: ReturnType<typeof useAuth>["localization"]
+  session: ReturnType<typeof useSession>["data"]
+} & CardProps) {
+  const [currentPassword, setCurrentPassword] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+
+  const { mutate: changePassword, isPending } = useChangePassword({
+    onError: (error) => {
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmPassword("")
+      toast.danger(error.error?.message || error.message)
+    },
+    onSuccess: () => {
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmPassword("")
+      toast.success(localization.settings.changePasswordSuccess)
+    }
+  })
+
+  const [isNewPasswordVisible, setIsNewPasswordVisible] = useState(false)
+  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
+    useState(false)
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (emailAndPassword?.confirmPassword && newPassword !== confirmPassword) {
+      setCurrentPassword("")
+      setNewPassword("")
+      setConfirmPassword("")
+      toast.danger(localization.auth.passwordsDoNotMatch)
+      return
+    }
+
+    changePassword({
+      currentPassword,
+      newPassword,
+      revokeOtherSessions: true
+    })
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.changePassword}
+      </h2>
+
+      <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
+        <Card.Content>
+          <Form onSubmit={handleSubmit}>
+            <Fieldset className="w-full gap-4">
+              <Fieldset.Group>
+                <TextField
+                  name="currentPassword"
+                  type="password"
+                  isDisabled={isPending || !session}
+                  defaultValue=""
+                  value={currentPassword}
+                  onChange={setCurrentPassword}
+                >
+                  <Label>{localization.settings.currentPassword}</Label>
+
+                  <Input
+                    className={cn(!session && "hidden")}
+                    autoComplete="current-password"
+                    placeholder={
+                      localization.settings.currentPasswordPlaceholder
+                    }
+                    required
+                    variant={
+                      variant === "transparent" ? "primary" : "secondary"
+                    }
+                  />
+
+                  {!session && (
+                    <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                  )}
+
+                  <FieldError />
+                </TextField>
+
+                <TextField
+                  minLength={emailAndPassword?.minPasswordLength}
+                  maxLength={emailAndPassword?.maxPasswordLength}
+                  isDisabled={isPending || !session}
+                  value={newPassword}
+                  onChange={setNewPassword}
+                >
+                  <Label>{localization.auth.newPassword}</Label>
+
+                  <InputGroup
+                    className={cn(!session && "hidden")}
+                    variant={
+                      variant === "transparent" ? "primary" : "secondary"
+                    }
+                  >
+                    <InputGroup.Input
+                      name="newPassword"
+                      type={isNewPasswordVisible ? "text" : "password"}
+                      autoComplete="new-password"
+                      placeholder={localization.auth.newPasswordPlaceholder}
+                      required
+                    />
+
+                    <InputGroup.Suffix className="px-0">
+                      <Button
+                        isIconOnly
+                        aria-label={
+                          isNewPasswordVisible
+                            ? localization.auth.hidePassword
+                            : localization.auth.showPassword
+                        }
+                        size="sm"
+                        variant="ghost"
+                        onPress={() =>
+                          setIsNewPasswordVisible(!isNewPasswordVisible)
+                        }
+                        isDisabled={isPending}
+                      >
+                        {isNewPasswordVisible ? <EyeSlash /> : <Eye />}
+                      </Button>
+                    </InputGroup.Suffix>
+                  </InputGroup>
+
+                  {!session && (
+                    <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                  )}
+
+                  <FieldError />
+                </TextField>
+
+                {emailAndPassword?.confirmPassword && (
+                  <TextField
+                    minLength={emailAndPassword?.minPasswordLength}
+                    maxLength={emailAndPassword?.maxPasswordLength}
+                    isDisabled={isPending || !session}
+                    isRequired
+                    value={confirmPassword}
+                    onChange={setConfirmPassword}
+                  >
+                    <Label>{localization.auth.confirmPassword}</Label>
+
+                    <InputGroup
+                      className={cn(!session && "hidden")}
+                      variant={
+                        variant === "transparent" ? "primary" : "secondary"
+                      }
+                    >
+                      <InputGroup.Input
+                        name="confirmPassword"
+                        type={isConfirmPasswordVisible ? "text" : "password"}
+                        autoComplete="new-password"
+                        placeholder={
+                          localization.auth.confirmPasswordPlaceholder
+                        }
+                        required
+                      />
+
+                      <InputGroup.Suffix className="px-0">
+                        <Button
+                          isIconOnly
+                          aria-label={
+                            isConfirmPasswordVisible
+                              ? localization.auth.hidePassword
+                              : localization.auth.showPassword
+                          }
+                          size="sm"
+                          variant="ghost"
+                          onPress={() =>
+                            setIsConfirmPasswordVisible(
+                              !isConfirmPasswordVisible
+                            )
+                          }
+                          isDisabled={isPending}
+                        >
+                          {isConfirmPasswordVisible ? <EyeSlash /> : <Eye />}
+                        </Button>
+                      </InputGroup.Suffix>
+                    </InputGroup>
+
+                    {!session && (
+                      <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                    )}
+
+                    <FieldError />
+                  </TextField>
+                )}
+              </Fieldset.Group>
+
+              <Fieldset.Actions>
+                <Button
+                  type="submit"
+                  isPending={isPending}
+                  isDisabled={!session}
+                  size="sm"
+                >
+                  {isPending && <Spinner color="current" size="sm" />}
+                  {localization.settings.updatePassword}
+                </Button>
+              </Fieldset.Actions>
+            </Fieldset>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/src/components/settings/security/danger-zone.tsx

@@ -0,0 +1,32 @@
+import { useAuth } from "@better-auth-ui/react"
+import { type CardProps, cn } from "@heroui/react"
+import type { ComponentProps } from "react"
+
+import { DeleteUser } from "./delete-user"
+
+export type DangerZoneProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Renders the danger zone heading and {@link DeleteUser}.
+ * Gate with `deleteUser.enabled` at the call site (e.g. {@link SecuritySettings}).
+ */
+export function DangerZone({
+  className,
+  variant,
+  ...props
+}: DangerZoneProps & ComponentProps<"div">) {
+  const { localization } = useAuth()
+
+  return (
+    <div className={cn("flex w-full flex-col", className)} {...props}>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.dangerZone}
+      </h2>
+
+      <DeleteUser variant={variant} />
+    </div>
+  )
+}

package/src/components/settings/security/delete-user.tsx

@@ -0,0 +1,187 @@
+import { useAuth, useDeleteUser, useListAccounts } from "@better-auth-ui/react"
+import { TriangleExclamation } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+export type DeleteUserProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
+ */
+export function DeleteUser({
+  className,
+  variant,
+  ...props
+}: DeleteUserProps & CardProps) {
+  const {
+    basePaths,
+    deleteUser: deleteUserConfig,
+    localization,
+    navigate,
+    viewPaths
+  } = useAuth()
+
+  const { data: accounts } = useListAccounts()
+
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [password, setPassword] = useState("")
+
+  const hasCredentialAccount = accounts?.some(
+    (account) => account.providerId === "credential"
+  )
+  const needsPassword =
+    !deleteUserConfig?.sendDeleteAccountVerification && hasCredentialAccount
+
+  const { mutate: deleteUser, isPending } = useDeleteUser()
+
+  const handleDialogOpenChange = (open: boolean) => {
+    setConfirmOpen(open)
+    setPassword("")
+  }
+
+  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const params = {
+      ...(needsPassword ? { password } : {})
+    }
+
+    deleteUser(params, {
+      onSuccess: () => {
+        setConfirmOpen(false)
+        setPassword("")
+
+        if (deleteUserConfig?.sendDeleteAccountVerification) {
+          toast.success(localization.settings.deleteUserVerificationSent)
+        } else {
+          toast.success(localization.settings.deleteUserSuccess)
+          navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+            replace: true
+          })
+        }
+      },
+      onError: (error) => {
+        toast.danger(error.error?.message || error.message)
+      }
+    })
+  }
+
+  return (
+    <Card
+      className={cn("border border-danger", className)}
+      variant={variant}
+      {...props}
+    >
+      <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm font-medium leading-tight">
+            {localization.settings.deleteUser}
+          </p>
+
+          <p className="text-muted text-xs mt-0.5">
+            {localization.settings.deleteUserDescription}
+          </p>
+        </div>
+
+        <AlertDialog>
+          <Button
+            isDisabled={!accounts}
+            size="sm"
+            variant="danger"
+            onPress={() => setConfirmOpen(true)}
+          >
+            {localization.settings.deleteUser}
+          </Button>
+
+          <AlertDialog.Backdrop
+            isOpen={confirmOpen}
+            onOpenChange={handleDialogOpenChange}
+          >
+            <AlertDialog.Container>
+              <AlertDialog.Dialog>
+                <Form onSubmit={handleSubmit}>
+                  <AlertDialog.CloseTrigger />
+
+                  <AlertDialog.Header>
+                    <AlertDialog.Icon status="danger">
+                      <TriangleExclamation />
+                    </AlertDialog.Icon>
+
+                    <AlertDialog.Heading>
+                      {localization.settings.deleteUser}
+                    </AlertDialog.Heading>
+                  </AlertDialog.Header>
+
+                  <AlertDialog.Body className="overflow-visible">
+                    <p className="text-muted text-sm">
+                      {localization.settings.deleteUserDescription}
+                    </p>
+
+                    {needsPassword && (
+                      <TextField
+                        className="mt-4"
+                        name="password"
+                        type="password"
+                        isDisabled={isPending}
+                        value={password}
+                        onChange={setPassword}
+                      >
+                        <Label>{localization.auth.password}</Label>
+
+                        <Input
+                          autoComplete="current-password"
+                          placeholder={localization.auth.passwordPlaceholder}
+                          required
+                          variant="secondary"
+                        />
+
+                        <FieldError />
+                      </TextField>
+                    )}
+                  </AlertDialog.Body>
+
+                  <AlertDialog.Footer>
+                    <Button
+                      slot="close"
+                      variant="tertiary"
+                      isDisabled={isPending}
+                    >
+                      {localization.settings.cancel}
+                    </Button>
+
+                    <Button
+                      type="submit"
+                      variant="danger"
+                      isPending={isPending}
+                    >
+                      {isPending && <Spinner color="current" size="sm" />}
+
+                      {localization.settings.deleteUser}
+                    </Button>
+                  </AlertDialog.Footer>
+                </Form>
+              </AlertDialog.Dialog>
+            </AlertDialog.Container>
+          </AlertDialog.Backdrop>
+        </AlertDialog>
+      </Card.Content>
+    </Card>
+  )
+}

package/src/components/settings/security/linked-account.tsx

@@ -0,0 +1,136 @@
+import { getProviderName } from "@better-auth-ui/core"
+import {
+  providerIcons,
+  useAccountInfo,
+  useAuth,
+  useLinkSocial,
+  useUnlinkAccount
+} from "@better-auth-ui/react"
+import { Link, LinkSlash, PlugConnection } from "@gravity-ui/icons"
+import { Button, cn, Skeleton, Spinner, toast } from "@heroui/react"
+import type { Account, SocialProvider } from "better-auth"
+
+export type LinkedAccountProps = {
+  account?: Account
+  provider: SocialProvider
+}
+
+/**
+ * Render a single linked social account row with provider info and link/unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and a link/unlink button.
+ *
+ * @param account - The account object containing id, accountId, and providerId
+ * @param provider - The provider id
+ * @returns A JSX element containing the linked account row
+ */
+export function LinkedAccount({ account, provider }: LinkedAccountProps) {
+  const { baseURL, localization } = useAuth()
+
+  const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo(
+    account?.accountId,
+    {
+      enabled: !!account,
+      throwOnError: (error) => {
+        if (error.error) toast.danger(error.error.message)
+        return false
+      }
+    }
+  )
+
+  const { mutate: linkSocial, isPending: isLinking } = useLinkSocial({
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => toast.success(localization.settings.accountUnlinked)
+  })
+
+  const ProviderIcon = providerIcons[provider]
+  const providerName = getProviderName(provider)
+
+  const displayName =
+    accountInfo?.data?.login ||
+    accountInfo?.data?.username ||
+    accountInfo?.user?.email ||
+    accountInfo?.user?.name ||
+    account?.accountId
+
+  return (
+    <div className="flex items-center gap-3">
+      <div
+        className={cn(
+          "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"
+        )}
+      >
+        {ProviderIcon ? (
+          <ProviderIcon className={cn("size-4.5", !account && "opacity-50")} />
+        ) : (
+          <PlugConnection
+            className={cn("size-4.5", !account && "opacity-50")}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium leading-tight">
+          {providerName}
+        </span>
+
+        {account && isLoadingInfo ? (
+          <Skeleton className="h-3 w-24 my-0.5 rounded-lg" />
+        ) : (
+          <span className="text-xs text-muted truncate">
+            {account
+              ? displayName
+              : localization.settings.linkProvider.replace(
+                  "{{provider}}",
+                  providerName
+                )}
+          </span>
+        )}
+      </div>
+
+      {account ? (
+        <Button
+          className="ml-auto shrink-0"
+          variant="outline"
+          size="sm"
+          onPress={() => unlinkAccount({ providerId: account.providerId })}
+          isPending={isUnlinking}
+          aria-label={localization.settings.unlinkProvider.replace(
+            "{{provider}}",
+            providerName
+          )}
+        >
+          {isUnlinking ? <Spinner color="current" size="sm" /> : <LinkSlash />}
+          {localization.settings.unlinkProvider
+            .replace("{{provider}}", "")
+            .trim()}
+        </Button>
+      ) : (
+        <Button
+          className="ml-auto shrink-0"
+          variant="outline"
+          size="sm"
+          onPress={() =>
+            linkSocial({
+              provider,
+              callbackURL: `${baseURL}${window.location.pathname}`
+            })
+          }
+          isPending={isLinking}
+          aria-label={localization.settings.linkProvider.replace(
+            "{{provider}}",
+            providerName
+          )}
+        >
+          {isLinking ? <Spinner color="current" size="sm" /> : <Link />}
+          {localization.settings.link}
+        </Button>
+      )}
+    </div>
+  )
+}