"use client"; import { useState, type FormEvent } from "react"; import { Check, Eye, EyeOff, X } from "lucide-react"; const rules = [ { label: "At least 8 characters", test: (p: string) => p.length >= 8 }, { label: "One uppercase letter", test: (p: string) => /[A-Z]/.test(p) }, { label: "One number", test: (p: string) => /\d/.test(p) }, { label: "One symbol", test: (p: string) => /[^A-Za-z0-9]/.test(p) }, ]; const levels = [ { label: "Too weak", bar: "bg-rose-500", text: "text-rose-600" }, { label: "Weak", bar: "bg-orange-500", text: "text-orange-600" }, { label: "Fair", bar: "bg-amber-500", text: "text-amber-600" }, { label: "Good", bar: "bg-lime-500", text: "text-lime-700" }, { label: "Strong", bar: "bg-emerald-500", text: "text-emerald-600" }, ]; export default function AuthSignUpStrength() { const [password, setPassword] = useState(""); const [show, setShow] = useState(false); const score = rules.filter((r) => r.test(password)).length; const level = levels[score]; function onSubmit(e: FormEvent) { e.preventDefault(); } return (

Create your account

Start your 14-day free trial. No card needed.

Name

Password

setPassword(e.target.value)} aria-describedby="su-strength su-rules" className="block w-full rounded-lg border border-slate-300 py-2 pl-3 pr-10 text-sm focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/30" />

{[0, 1, 2, 3].map((i) => ( ))}

{password ? `Password strength: ${level.label}` : "Enter a password"}

{ok ? : } {r.label} {ok ? "(met)" : "(not met)"}

By signing up you agree to our Terms and Privacy Policy.

); }

Sign-up with password strength

Create your account