"use client"; import { useId, useMemo, useState } from "react"; import { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; export default function Component() { const id = useId(); const [password, setPassword] = useState(""); const [isVisible, setIsVisible] = useState(false); const toggleVisibility = () => setIsVisible((prevState) => !prevState); const checkStrength = (pass: string) => { const requirements = [ { regex: /.{8,}/, text: "At least 8 characters" }, { regex: /[0-9]/, text: "At least 1 number" }, { regex: /[a-z]/, text: "At least 1 lowercase letter" }, { regex: /[A-Z]/, text: "At least 1 uppercase letter" } ]; return requirements.map((req) => ({ met: req.regex.test(pass), text: req.text })); }; const strength = checkStrength(password); const strengthScore = useMemo(() => { return strength.filter((req) => req.met).length; }, [strength]); const getStrengthColor = (score: number) => { if (score === 0) return "bg-border"; if (score <= 1) return "bg-red-500"; if (score <= 2) return "bg-orange-500"; if (score === 3) return "bg-amber-500"; return "bg-emerald-500"; }; const getStrengthText = (score: number) => { if (score === 0) return "Enter a password"; if (score <= 2) return "Weak password"; if (score === 3) return "Medium password"; return "Strong password"; }; return (

Input with password strength indicator

setPassword(e.target.value)} aria-describedby={`${id}-description`} />

{/* Password strength description */}

{getStrengthText(strengthScore)}. Must contain:

{/* Password requirements list */}

{req.met ? (

); }