better-auth-ui 3.2.5

package/src/components/organization/update-member-role-dialog.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import type { User } from "better-auth"
+import type { Member } from "better-auth/plugins/organization"
+import { Loader2 } from "lucide-react"
+import { type ComponentProps, useContext, useMemo, useState } from "react"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import type { SettingsCardClassNames } from "../settings/shared/settings-card"
+import { Button } from "../ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "../ui/dialog"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "../ui/select"
+import { MemberCell } from "./member-cell"
+
+export interface UpdateMemberRoleDialogProps
+    extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    member: Member & { user?: Partial<User> | null }
+}
+
+export function UpdateMemberRoleDialog({
+    member,
+    classNames,
+    localization: localizationProp,
+    onOpenChange,
+    ...props
+}: UpdateMemberRoleDialogProps) {
+    const {
+        authClient,
+        hooks: { useSession, useListMembers },
+        localization: contextLocalization,
+        organization,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { data, refetch } = useListMembers({
+        query: { organizationId: member.organizationId }
+    })
+
+    const members = data?.members
+
+    const { data: sessionData } = useSession()
+
+    const [isUpdating, setIsUpdating] = useState(false)
+    const [selectedRole, setSelectedRole] = useState(member.role)
+
+    const builtInRoles = [
+        { role: "owner", label: localization.OWNER },
+        { role: "admin", label: localization.ADMIN },
+        { role: "member", label: localization.MEMBER }
+    ]
+
+    const roles = [...builtInRoles, ...(organization?.customRoles || [])]
+
+    const currentUserRole = members?.find(
+        (m) => m.user?.id === sessionData?.user.id
+    )?.role
+
+    const availableRoles = roles.filter((role) => {
+        if (role.role === "owner") {
+            return currentUserRole === "owner"
+        }
+
+        if (role.role === "admin") {
+            return currentUserRole === "owner" || currentUserRole === "admin"
+        }
+
+        return true
+    })
+
+    const updateMemberRole = async () => {
+        if (selectedRole === member.role) {
+            toast({
+                variant: "error",
+                message: `${localization.ROLE} ${localization.IS_THE_SAME}`
+            })
+
+            return
+        }
+
+        setIsUpdating(true)
+
+        try {
+            await authClient.organization.updateMemberRole({
+                memberId: member.id,
+                role: selectedRole,
+                organizationId: member.organizationId,
+                fetchOptions: {
+                    throw: true
+                }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.MEMBER_ROLE_UPDATED
+            })
+
+            await refetch?.()
+
+            onOpenChange?.(false)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsUpdating(false)
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent
+                className={classNames?.dialog?.content}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+                <DialogHeader className={classNames?.dialog?.header}>
+                    <DialogTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {localization.UPDATE_ROLE}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.UPDATE_ROLE_DESCRIPTION}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="grid gap-6 py-4">
+                    <MemberCell
+                        className={classNames?.cell}
+                        member={member}
+                        localization={localization}
+                        hideActions
+                    />
+
+                    <Select
+                        value={selectedRole}
+                        onValueChange={setSelectedRole}
+                    >
+                        <SelectTrigger className="w-full">
+                            <SelectValue
+                                placeholder={localization.SELECT_ROLE}
+                            />
+                        </SelectTrigger>
+
+                        <SelectContent>
+                            {availableRoles.map((role) => (
+                                <SelectItem key={role.role} value={role.role}>
+                                    {role.label}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                <DialogFooter className={classNames?.dialog?.footer}>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => onOpenChange?.(false)}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.outlineButton
+                        )}
+                        disabled={isUpdating}
+                    >
+                        {localization.CANCEL}
+                    </Button>
+
+                    <Button
+                        type="button"
+                        onClick={updateMemberRole}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.primaryButton
+                        )}
+                        disabled={isUpdating}
+                    >
+                        {isUpdating && <Loader2 className="animate-spin" />}
+
+                        {localization.UPDATE_ROLE}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/organization/user-invitations-card.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { CheckIcon, EllipsisIcon, Loader2, XIcon } from "lucide-react"
+import { useContext, useMemo, useState } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../lib/utils"
+import type { SettingsCardProps } from "../settings/shared/settings-card"
+import { SettingsCard } from "../settings/shared/settings-card"
+import { Button } from "../ui/button"
+import { Card, CardContent } from "../ui/card"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "../ui/dropdown-menu"
+import { UserAvatar } from "../user-avatar"
+
+export function UserInvitationsCard({
+    className,
+    classNames,
+    localization: localizationProp,
+    ...props
+}: SettingsCardProps) {
+    const {
+        hooks: { useListUserInvitations, useListOrganizations },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { data: invitations, refetch: refetchInvitations } =
+        useListUserInvitations()
+    const { refetch: refetchOrganizations } = useListOrganizations()
+
+    const handleRefresh = async () => {
+        await refetchInvitations?.()
+        await refetchOrganizations?.()
+    }
+
+    const pendingInvitations = invitations?.filter(
+        (invitation) => invitation.status === "pending"
+    )
+
+    if (!pendingInvitations?.length) return null
+
+    return (
+        <SettingsCard
+            className={className}
+            classNames={classNames}
+            title={localization.PENDING_INVITATIONS}
+            description={
+                localization.PENDING_USER_INVITATIONS_DESCRIPTION ||
+                localization.PENDING_INVITATIONS_DESCRIPTION
+            }
+            {...props}
+        >
+            <CardContent className={cn("grid gap-4", classNames?.content)}>
+                {pendingInvitations.map((invitation) => (
+                    <UserInvitationRow
+                        key={invitation.id}
+                        classNames={classNames}
+                        invitation={{
+                            id: invitation.id,
+                            email: invitation.email,
+                            role: invitation.role,
+                            status: invitation.status,
+                            expiresAt: invitation.expiresAt
+                        }}
+                        onChanged={handleRefresh}
+                    />
+                ))}
+            </CardContent>
+        </SettingsCard>
+    )
+}
+
+function UserInvitationRow({
+    classNames,
+    invitation,
+    onChanged
+}: {
+    classNames?: SettingsCardProps["classNames"]
+    invitation: {
+        id: string
+        email: string
+        role: string
+        status: string
+        expiresAt: Date
+    }
+    onChanged?: () => unknown
+}) {
+    const {
+        authClient,
+        organization: organizationOptions,
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = contextLocalization
+
+    const [isLoading, setIsLoading] = useState(false)
+
+    const builtInRoles = [
+        { role: "owner", label: localization.OWNER },
+        { role: "admin", label: localization.ADMIN },
+        { role: "member", label: localization.MEMBER }
+    ]
+
+    const roles = [...builtInRoles, ...(organizationOptions?.customRoles || [])]
+    const role = roles.find((r) => r.role === invitation.role)
+
+    const handleAccept = async () => {
+        setIsLoading(true)
+
+        try {
+            await authClient.organization.acceptInvitation({
+                invitationId: invitation.id,
+                fetchOptions: { throw: true }
+            })
+
+            await onChanged?.()
+
+            toast({
+                variant: "success",
+                message: localization.INVITATION_ACCEPTED
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsLoading(false)
+    }
+
+    const handleReject = async () => {
+        setIsLoading(true)
+
+        try {
+            await authClient.organization.rejectInvitation({
+                invitationId: invitation.id,
+                fetchOptions: { throw: true }
+            })
+
+            await onChanged?.()
+
+            toast({
+                variant: "success",
+                message: localization.INVITATION_REJECTED
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsLoading(false)
+    }
+
+    return (
+        <Card className={cn("flex-row items-center p-4", classNames?.cell)}>
+            <div className="flex flex-1 items-center gap-2">
+                <UserAvatar
+                    className="my-0.5"
+                    user={{ email: invitation.email }}
+                    localization={localization}
+                />
+
+                <div className="grid flex-1 text-left leading-tight">
+                    <span className="truncate font-semibold text-sm">
+                        {invitation.email}
+                    </span>
+
+                    <span className="truncate text-muted-foreground text-xs">
+                        {localization.EXPIRES}{" "}
+                        {invitation.expiresAt.toLocaleDateString()}
+                    </span>
+                </div>
+            </div>
+
+            <span className="truncate text-sm opacity-70">{role?.label}</span>
+
+            <div className="flex items-center gap-2">
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            className={cn(
+                                "relative ms-auto",
+                                classNames?.button,
+                                classNames?.outlineButton
+                            )}
+                            disabled={isLoading}
+                            size="icon"
+                            type="button"
+                            variant="outline"
+                        >
+                            {isLoading ? (
+                                <Loader2 className="animate-spin" />
+                            ) : (
+                                <EllipsisIcon className={classNames?.icon} />
+                            )}
+                        </Button>
+                    </DropdownMenuTrigger>
+
+                    <DropdownMenuContent
+                        onCloseAutoFocus={(e) => e.preventDefault()}
+                    >
+                        <DropdownMenuItem
+                            onClick={handleAccept}
+                            disabled={isLoading}
+                        >
+                            <CheckIcon className={classNames?.icon} />
+
+                            {localization.ACCEPT}
+                        </DropdownMenuItem>
+
+                        <DropdownMenuItem
+                            onClick={handleReject}
+                            disabled={isLoading}
+                            variant="destructive"
+                        >
+                            <XIcon className={classNames?.icon} />
+
+                            {localization.REJECT}
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </Card>
+    )
+}

package/src/components/password-input.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+import { type ComponentProps, useState } from "react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+
+export function PasswordInput({
+    className,
+    enableToggle,
+    onChange,
+    ...props
+}: ComponentProps<typeof Input> & { enableToggle?: boolean }) {
+    const [disabled, setDisabled] = useState(true)
+    const [isVisible, setIsVisible] = useState(false)
+
+    return (
+        <div className="relative">
+            <Input
+                className={cn(enableToggle && "pr-10", className)}
+                {...props}
+                type={isVisible && enableToggle ? "text" : "password"}
+                onChange={(event) => {
+                    setDisabled(!event.target.value)
+                    onChange?.(event)
+                }}
+            />
+
+            {enableToggle && (
+                <>
+                    <Button
+                        className="!bg-transparent absolute top-0 right-0"
+                        disabled={disabled}
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                        onClick={() => setIsVisible(!isVisible)}
+                    >
+                        {isVisible ? <EyeIcon /> : <EyeOffIcon />}
+                    </Button>
+
+                    <style>{`
+                        .hide-password-toggle::-ms-reveal,
+                        .hide-password-toggle::-ms-clear {
+                            visibility: hidden;
+                            pointer-events: none;
+                            display: none;
+                        }
+                    `}</style>
+                </>
+            )}
+        </div>
+    )
+}