@better-auth-ui/heroui 1.6.6 → 1.6.8

package/src/components/auth/api-key/delete-api-key-dialog.tsx

@@ -0,0 +1,92 @@
+import {
+  type ApiKeyAuthClient,
+  type ListedApiKey,
+  useAuth,
+  useAuthPlugin,
+  useDeleteApiKey
+} from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type DeleteApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  apiKey: ListedApiKey
+}
+
+export function DeleteApiKeyDialog({
+  isOpen,
+  onOpenChange,
+  apiKey
+}: DeleteApiKeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+  const preview = `${apiKey.start}${"*".repeat(16)}`
+  const { mutate: deleteApiKey, isPending: isDeleting } = useDeleteApiKey(
+    authClient as ApiKeyAuthClient,
+    {
+      onSuccess: () => onOpenChange(false)
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <Key />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {apiKeyLocalization.deleteApiKey}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {apiKeyLocalization.deleteApiKeyWarning}
+            </p>
+
+            <TextField
+              value={preview}
+              className="font-mono text-xs"
+              variant="secondary"
+            >
+              <Label>{apiKey.name || apiKeyLocalization.apiKey}</Label>
+
+              <Input readOnly className="font-mono text-xs" />
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isDeleting}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              onPress={() => deleteApiKey({ keyId: apiKey.id })}
+              isPending={isDeleting}
+            >
+              {isDeleting && <Spinner color="current" size="sm" />}
+
+              {apiKeyLocalization.deleteApiKey}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/api-key/new-api-key-dialog.tsx

@@ -0,0 +1,94 @@
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
+import { Check, Copy, Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  InputGroup,
+  Label,
+  TextField,
+  toast
+} from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type NewApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  name: string | null
+  secretKey: string | null
+}
+
+export function NewApiKeyDialog({
+  isOpen,
+  onOpenChange,
+  name,
+  secretKey
+}: NewApiKeyDialogProps) {
+  const { localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const [copied, setCopied] = useState(false)
+
+  const copySecretKey = async () => {
+    if (!secretKey) return
+
+    try {
+      await navigator.clipboard.writeText(secretKey)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch (error) {
+      toast.danger(error instanceof Error ? error.message : String(error))
+    }
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="warning">
+              <Key />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {apiKeyLocalization.newApiKey}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {apiKeyLocalization.newApiKeyWarning}
+            </p>
+
+            <TextField value={secretKey ?? ""} className="font-mono text-xs">
+              <Label>{name || apiKeyLocalization.apiKey}</Label>
+
+              <InputGroup variant="secondary">
+                <InputGroup.Input readOnly className="font-mono text-xs" />
+
+                <InputGroup.Suffix className="px-0">
+                  <Button
+                    isIconOnly
+                    aria-label={localization.settings.copyToClipboard}
+                    size="sm"
+                    variant="ghost"
+                    onPress={copySecretKey}
+                  >
+                    {copied ? <Check /> : <Copy />}
+                  </Button>
+                </InputGroup.Suffix>
+              </InputGroup>
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close">{apiKeyLocalization.dismissNewKey}</Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/multi-session/switch-account-submenu-content.tsx

@@ -6,7 +6,7 @@ import {
   useSession
 } from "@better-auth-ui/react"
 import { Check, CirclePlus } from "@gravity-ui/icons"
-import { Dropdown, Label, Separator } from "@heroui/react"
+import { Dropdown, Label } from "@heroui/react"
 
 import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
 import { UserView } from "../user/user-view"
@@ -50,8 +50,6 @@ export function SwitchAccountSubmenuContent() {
             />
           ))}
 
-        <Separator />
-
         <Dropdown.Item
           textValue={multiSessionLocalization.addAccount}
           href={`${basePaths.auth}/${viewPaths.auth.signIn}`}

package/src/components/auth/passkey/add-passkey-dialog.tsx

@@ -0,0 +1,109 @@
+import {
+  type PasskeyAuthClient,
+  useAddPasskey,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type AddPasskeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function AddPasskeyDialog({
+  isOpen,
+  onOpenChange
+}: AddPasskeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey(
+    authClient as PasskeyAuthClient
+  )
+
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange(open)
+  }
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const name = (formData.get("name") as string)?.trim()
+
+    addPasskey(name ? { name } : undefined, {
+      onSuccess: () => handleOpenChange(false)
+    })
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={handleOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <Form onSubmit={handleSubmit}>
+            <AlertDialog.CloseTrigger />
+
+            <AlertDialog.Header>
+              <AlertDialog.Icon status="default">
+                <Fingerprint />
+              </AlertDialog.Icon>
+
+              <AlertDialog.Heading>
+                {passkeyLocalization.addPasskey}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+
+            <AlertDialog.Body className="overflow-visible">
+              <p className="text-muted text-sm">
+                {passkeyLocalization.passkeysDescription}
+              </p>
+
+              <TextField
+                className="mt-4"
+                id="name"
+                name="name"
+                isDisabled={isAdding}
+              >
+                <Label>{passkeyLocalization.name}</Label>
+
+                <Input
+                  autoFocus
+                  placeholder={localization.settings.optional}
+                  variant="secondary"
+                />
+
+                <FieldError />
+              </TextField>
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer>
+              <Button slot="close" variant="tertiary" isDisabled={isAdding}>
+                {localization.settings.cancel}
+              </Button>
+
+              <Button type="submit" isPending={isAdding}>
+                {isAdding && <Spinner color="current" size="sm" />}
+
+                {passkeyLocalization.addPasskey}
+              </Button>
+            </AlertDialog.Footer>
+          </Form>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/passkey/delete-passkey-dialog.tsx

@@ -0,0 +1,95 @@
+import {
+  type PasskeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useDeletePasskey
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type ListedPasskey = {
+  id: string
+  name?: string | null
+  createdAt: Date
+}
+
+export type DeletePasskeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  passkey: ListedPasskey
+}
+
+export function DeletePasskeyDialog({
+  isOpen,
+  onOpenChange,
+  passkey
+}: DeletePasskeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const passkeyName = passkey.name || passkeyLocalization.passkey
+
+  const { mutate: deletePasskey, isPending: isDeleting } = useDeletePasskey(
+    authClient as PasskeyAuthClient,
+    {
+      onSuccess: () => onOpenChange(false)
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <Fingerprint />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {passkeyLocalization.deletePasskeyTitle}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {passkeyLocalization.deletePasskeyWarning}
+            </p>
+
+            <TextField value={passkeyName} variant="secondary">
+              <Label>{passkey.name || passkeyLocalization.passkey}</Label>
+
+              <Input readOnly />
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isDeleting}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              onPress={() => deletePasskey({ id: passkey.id })}
+              isPending={isDeleting}
+            >
+              {isDeleting && <Spinner color="current" size="sm" />}
+
+              {passkeyLocalization.deletePasskeyTitle}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/passkey/passkey-skeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@heroui/react"
+
+export function PasskeySkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-28 rounded-lg" />
+          <Skeleton className="h-3 w-32 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/auth/passkey/passkey.tsx

@@ -1,29 +1,22 @@
-import {
-  type PasskeyAuthClient,
-  useAuth,
-  useAuthPlugin,
-  useDeletePasskey
-} from "@better-auth-ui/react"
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
 import { Fingerprint, Xmark } from "@gravity-ui/icons"
-import { Button, Spinner } from "@heroui/react"
+import { Button } from "@heroui/react"
+import { useState } from "react"
 
 import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+import {
+  DeletePasskeyDialog,
+  type ListedPasskey
+} from "./delete-passkey-dialog"
 
 export type PasskeyProps = {
-  passkey: {
-    id: string
-    name?: string | null
-    createdAt: Date
-  }
+  passkey: ListedPasskey
 }
 
 export function Passkey({ passkey }: PasskeyProps) {
-  const { authClient, localization } = useAuth()
+  const { localization } = useAuth()
   const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
-
-  const { mutate: deletePasskey, isPending } = useDeletePasskey(
-    authClient as PasskeyAuthClient
-  )
+  const [deleteOpen, setDeleteOpen] = useState(false)
 
   const passkeyName = passkey.name || passkeyLocalization.passkey
 
@@ -33,8 +26,10 @@ export function Passkey({ passkey }: PasskeyProps) {
         <Fingerprint className="size-4.5" />
       </div>
 
-      <div className="flex flex-col min-w-0">
-        <span className="text-sm font-medium leading-tight">{passkeyName}</span>
+      <div className="flex min-w-0 flex-col">
+        <span className="truncate text-sm font-medium leading-tight">
+          {passkeyName}
+        </span>
 
         <span className="text-xs text-muted">
           {new Date(passkey.createdAt).toLocaleString(undefined, {
@@ -48,16 +43,22 @@ export function Passkey({ passkey }: PasskeyProps) {
         className="ml-auto shrink-0"
         variant="outline"
         size="sm"
-        isPending={isPending}
-        onPress={() => deletePasskey({ id: passkey.id })}
+        onPress={() => setDeleteOpen(true)}
         aria-label={passkeyLocalization.deletePasskey.replace(
           "{{name}}",
           passkeyName
         )}
       >
-        {isPending ? <Spinner color="current" size="sm" /> : <Xmark />}
+        <Xmark />
+
         {localization.settings.delete}
       </Button>
+
+      <DeletePasskeyDialog
+        isOpen={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        passkey={passkey}
+      />
     </div>
   )
 }

package/src/components/auth/passkey/passkeys-empty.tsx

@@ -0,0 +1,35 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type PasskeysEmptyProps = {
+  onAddPress: () => void
+}
+
+export function PasskeysEmpty({ onAddPress }: PasskeysEmptyProps) {
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex size-10 items-center justify-center rounded-xl bg-surface-secondary">
+        <Fingerprint className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-1 text-center">
+        <p className="text-sm font-semibold">
+          {passkeyLocalization.noPasskeys}
+        </p>
+
+        <p className="text-muted text-xs">
+          {passkeyLocalization.passkeysDescription}
+        </p>
+      </div>
+
+      <Button size="sm" onPress={onAddPress}>
+        {passkeyLocalization.addPasskey}
+      </Button>
+    </div>
+  )
+}