"use client"; import { Check, Eye, EyeOff, Lock } from "lucide-react"; import { useId, useState } from "react"; import { Button } from "@/components/ui/button"; import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; interface PasswordRequirement { label: string; regex: string; } interface Auth5Props { icon?: React.ReactNode; heading?: string; description?: string; requirements?: PasswordRequirement[]; labels?: { newPassword?: string; newPasswordPlaceholder?: string; confirmPassword?: string; confirmPasswordPlaceholder?: string; submit?: string; passwordToggle?: string; }; className?: string; } export const auth5Demo: Auth5Props = { icon: , heading: "Set a new password", description: "Your new password must be different from previously used passwords.", requirements: [ { label: "At least 8 characters", regex: ".{8,}" }, { label: "One uppercase letter", regex: "[A-Z]" }, { label: "One number", regex: "[0-9]" }, { label: "One special character", regex: "[^A-Za-z0-9]" }, ], labels: { newPassword: "New password", newPasswordPlaceholder: "Enter a new password", confirmPassword: "Confirm password", confirmPasswordPlaceholder: "Re-enter your password", submit: "Reset password", passwordToggle: "Toggle password visibility", }, }; export function Auth5({ icon, heading, description, requirements = [], labels = {}, className, }: Auth5Props) { const fieldId = useId(); const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [showConfirm, setShowConfirm] = useState(false); const { newPassword: newPasswordLabel, newPasswordPlaceholder, confirmPassword: confirmPasswordLabel, confirmPasswordPlaceholder, submit: submitLabel, passwordToggle: passwordToggleLabel, } = labels; return (

{icon && (

{icon}

)} {heading && (

{heading}

)} {description && (

{description}

)}

e.preventDefault()}> {newPasswordLabel && ( {newPasswordLabel} )}

setPassword(e.target.value)} className="h-11 pr-11" />

{confirmPasswordLabel && ( {confirmPasswordLabel} )}

setConfirmPassword(e.target.value)} className="h-11 pr-11" />

{requirements.length > 0 && (

{requirement.label}

)} {submitLabel && ( )}

); }

Auth - Reset Password Blocks

Select an Item to view its code