{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "account-settings", "title": "Account Settings", "description": "Composable account-management sections for a Nexus ID consumer: profile and contact presentation, linked sign-in methods, passkeys, active sessions and organisation memberships. They accept data and callbacks only; consumers keep authentication, confirmation and policy decisions.", "dependencies": [ "@untitledui/icons@^0.0.22" ], "registryDependencies": [ "@nx-ui/alert-dialog", "@nx-ui/avatar", "@nx-ui/badge", "@nx-ui/button", "@nx-ui/card", "@nx-ui/settings", "@nx-ui/skeleton", "@nx-ui/utils" ], "files": [ { "path": "components/blocks/account-settings.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n CheckCircle,\n Fingerprint01,\n Link01,\n LogOut01,\n Mail01,\n Monitor01,\n Plus,\n ShieldTick,\n Trash01,\n Users01,\n} from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { SettingsRow, SettingsSection } from \"@/components/blocks/settings\"\n\n/** Data snapshots for a consumer-owned Nexus Account surface. No auth client or\n * product policy is embedded here: pass values from nx-id and wire callbacks at\n * the application boundary. */\nexport type AccountPerson = {\n name: string\n email: string\n image?: string | null\n emailVerified?: boolean\n}\n\nexport type LinkedIdentity = {\n id: string\n provider: string\n providerLabel?: string\n email?: string | null\n connectedAt?: string | Date | null\n /** Do not offer disconnect for the only recovery method. */\n canDisconnect?: boolean\n}\n\nexport type AccountPasskey = {\n id: string\n name: string\n createdAt?: string | Date | null\n lastUsedAt?: string | Date | null\n}\n\nexport type AccountSession = {\n id: string\n label: string\n detail?: string\n lastActiveAt?: string | Date | null\n current?: boolean\n}\n\nexport type AccountMembership = {\n id: string\n name: string\n slug?: string\n role: string\n image?: string | null\n active?: boolean\n /** Set false when the server has determined the user cannot leave. */\n canLeave?: boolean\n}\n\nexport type AccountActionState =\n | { tone: \"success\"; message: string }\n | { tone: \"error\"; message: string }\n | null\n\nfunction initials(name: string) {\n return name\n .split(\" \")\n .map((part) => part[0])\n .join(\"\")\n .slice(0, 2)\n .toUpperCase()\n}\n\nfunction date(value?: string | Date | null) {\n if (!value) return \"Never\"\n const parsed = typeof value === \"string\" ? new Date(value) : value\n if (Number.isNaN(parsed.getTime())) return \"Unknown\"\n return new Intl.DateTimeFormat(\"en-GB\", { dateStyle: \"medium\" }).format(parsed)\n}\n\n/** Inline success/error acknowledgement for async consumer callbacks. */\nfunction AccountActionNotice({\n state,\n className,\n}: {\n state?: AccountActionState\n className?: string\n}) {\n if (!state) return null\n return (\n \n {state.message}\n

\n )\n}\n\n/**\n * The notice band inside a section card. Renders nothing at all when there is\n * no state — an empty padded wrapper would leave a hole above the first row.\n */\nfunction AccountNoticeBand({ state }: { state?: AccountActionState }) {\n if (!state) return null\n return (\n
\n \n
\n )\n}\n\n/** The leading mark on a list row — keeps every row's text on one baseline. */\nfunction AccountRowIcon({\n icon: Icon,\n}: {\n icon: React.ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>\n}) {\n return (\n \n \n \n )\n}\n\n/**\n * One row in an account list: media + title (with an optional badge) and meta\n * on the left, actions pinned right. Every account section uses it, so the\n * rows line up across cards.\n */\nfunction AccountRow({\n media,\n title,\n badge,\n meta,\n actions,\n}: {\n media?: React.ReactNode\n title: React.ReactNode\n badge?: React.ReactNode\n meta?: React.ReactNode\n actions?: React.ReactNode\n}) {\n return (\n \n
\n {media}\n
\n
\n \n {title}\n \n {badge}\n
\n {meta ? (\n \n {meta}\n \n ) : null}\n
\n
\n {actions ? (\n
{actions}
\n ) : null}\n \n )\n}\n\nfunction AccountRowsSkeleton({ rows = 2 }: { rows?: number }) {\n return (\n
\n {Array.from({ length: rows }, (_, index) => (\n \n ))}\n
\n )\n}\n\n/** The destructive row action, styled the same in every account section. */\nfunction AccountRowAction({\n icon: Icon,\n label,\n disabled,\n onClick,\n}: {\n icon: React.ComponentType<{ className?: string }>\n label: string\n disabled?: boolean\n onClick: () => void\n}) {\n return (\n \n \n {label}\n \n )\n}\n\n/** Empty/error/confirmation-ready state for account sections without imposing\n * product wording or side effects on consumers. */\nfunction AccountState({\n icon: Icon = ShieldTick,\n title,\n description,\n action,\n className,\n}: {\n icon?: React.ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>\n title: string\n description: string\n action?: React.ReactNode\n className?: string\n}) {\n return (\n \n \n \n \n
\n

{title}

\n

\n {description}\n

\n
\n {action ?
{action}
: null}\n \n )\n}\n\n/** A reusable controlled destructive-action confirmation. The consumer owns\n * whether it opens and what the async confirmation does. */\nfunction AccountConfirmation({\n open,\n onOpenChange,\n title,\n description,\n confirmLabel = \"Confirm\",\n pending = false,\n onConfirm,\n}: {\n open: boolean\n onOpenChange: (open: boolean) => void\n title: string\n description: string\n confirmLabel?: string\n pending?: boolean\n onConfirm: () => void\n}) {\n return (\n \n \n \n {title}\n {description}\n \n \n Cancel\n {\n event.preventDefault()\n onConfirm()\n }}\n >\n {pending ? \"Working…\" : confirmLabel}\n \n \n \n \n )\n}\n\n/** Top-of-account summary: identity plus plain counts supplied by the consumer. */\nfunction AccountOverview({\n person,\n securityLabel,\n memberships,\n className,\n}: {\n person: AccountPerson\n /** e.g. \"Two-factor authentication is on\" — calculate policy server-side. */\n securityLabel: string\n memberships?: number | null\n className?: string\n}) {\n return (\n \n \n
\n \n {person.image ? : null}\n {initials(person.name)}\n \n
\n

{person.name}

\n

{person.email}

\n
\n
\n
\n \n \n {person.emailVerified ? \"Email verified\" : \"Email needs verification\"}\n \n {securityLabel}\n \n \n {memberships == null\n ? \"Loading organisations\"\n : `${memberships} ${memberships === 1 ? \"organisation\" : \"organisations\"}`}\n \n
\n \n \n )\n}\n\n/** Identity/profile settings. Consumers keep inputs, upload handling and save\n * mutations; this block simply provides the consistent account layout. */\nfunction AccountProfileSection({\n person,\n children,\n onEditProfile,\n className,\n}: {\n person: AccountPerson\n /** Optional consumer-controlled fields, upload control or contact rows. */\n children?: React.ReactNode\n onEditProfile?: () => void\n className?: string\n}) {\n return (\n \n Edit profile\n \n ) : null\n }\n >\n \n
\n \n {person.image ? (\n \n ) : null}\n {initials(person.name)}\n \n \n {person.name}\n \n
\n \n \n {person.email}\n \n {children}\n \n )\n}\n\nfunction LinkedAccountsSection({\n accounts,\n loading = false,\n state,\n onLink,\n onDisconnect,\n className,\n}: {\n accounts: LinkedIdentity[]\n loading?: boolean\n state?: AccountActionState\n onLink?: () => void\n /** Called only after the consumer's own confirmation gate, if required. */\n onDisconnect?: (account: LinkedIdentity) => void\n className?: string\n}) {\n const linkAction = onLink ? (\n \n ) : null\n\n return (\n \n \n {loading ? (\n \n ) : accounts.length === 0 ? (\n \n ) : (\n
\n {accounts.map((account) => (\n }\n title={account.providerLabel ?? account.provider}\n meta={account.email ?? `Linked ${date(account.connectedAt)}`}\n actions={\n onDisconnect ? (\n onDisconnect(account)}\n />\n ) : null\n }\n />\n ))}\n
\n )}\n \n )\n}\n\nfunction PasskeysSection({\n passkeys,\n loading = false,\n state,\n onCreate,\n onDelete,\n className,\n}: {\n passkeys: AccountPasskey[]\n loading?: boolean\n state?: AccountActionState\n onCreate?: () => void\n onDelete?: (passkey: AccountPasskey) => void\n className?: string\n}) {\n const createAction = onCreate ? (\n \n ) : null\n\n return (\n \n \n {loading ? (\n \n ) : passkeys.length === 0 ? (\n \n ) : (\n
\n {passkeys.map((passkey) => (\n }\n title={passkey.name}\n meta={`Added ${date(passkey.createdAt)} · Last used ${date(passkey.lastUsedAt)}`}\n actions={\n onDelete ? (\n onDelete(passkey)}\n />\n ) : null\n }\n />\n ))}\n
\n )}\n \n )\n}\n\nfunction SessionsSection({\n sessions,\n loading = false,\n state,\n onRevoke,\n onRevokeOtherSessions,\n className,\n}: {\n sessions: AccountSession[]\n loading?: boolean\n state?: AccountActionState\n onRevoke?: (session: AccountSession) => void\n onRevokeOtherSessions?: () => void\n className?: string\n}) {\n return (\n \n \n Sign out other sessions\n \n ) : null\n }\n >\n \n {loading ? (\n \n ) : sessions.length === 0 ? (\n \n ) : (\n
\n {sessions.map((session) => (\n }\n title={session.label}\n badge={\n session.current ? (\n This device\n ) : null\n }\n meta={`${session.detail ? `${session.detail} · ` : \"\"}Last active ${date(session.lastActiveAt)}`}\n actions={\n onRevoke && !session.current ? (\n onRevoke(session)}\n />\n ) : null\n }\n />\n ))}\n
\n )}\n \n )\n}\n\nfunction OrganisationMembershipsSection({\n memberships,\n loading = false,\n state,\n onSetActive,\n onLeave,\n className,\n}: {\n memberships: AccountMembership[]\n loading?: boolean\n state?: AccountActionState\n onSetActive?: (membership: AccountMembership) => void\n onLeave?: (membership: AccountMembership) => void\n className?: string\n}) {\n return (\n \n \n {loading ? (\n \n ) : memberships.length === 0 ? (\n \n ) : (\n
\n {memberships.map((membership) => {\n const canSetActive = !!onSetActive && !membership.active\n return (\n \n {membership.image ? (\n \n ) : null}\n {initials(membership.name)}\n \n }\n title={membership.name}\n badge={\n membership.active ? (\n \n \n Active\n \n ) : null\n }\n meta={`${membership.role}${membership.slug ? ` · ${membership.slug}` : \"\"}`}\n actions={\n canSetActive || onLeave ? (\n <>\n {canSetActive ? (\n onSetActive?.(membership)}\n >\n Set active\n \n ) : null}\n {onLeave ? (\n onLeave(membership)}\n />\n ) : null}\n \n ) : null\n }\n />\n )\n })}\n
\n )}\n \n )\n}\n\nexport {\n AccountActionNotice,\n AccountConfirmation,\n AccountOverview,\n AccountProfileSection,\n AccountState,\n LinkedAccountsSection,\n OrganisationMembershipsSection,\n PasskeysSection,\n SessionsSection,\n}\n", "type": "registry:component" } ], "type": "registry:block" }