Password Strength

import { PasswordStrength } from "@/components/ui/password-strength";

export default function Example() {
  return <PasswordStrength />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const getStrength = (password) => {
  let score = 0;
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;
  return Math.min(4, score);
};

const labels = ["Very Weak", "Weak", "Fair", "Strong", "Very Strong"];
const colors = ["bg-red-500", "bg-orange-500", "bg-yellow-500", "bg-green-400", "bg-green-600"];

const PasswordStrength = forwardRef(({ className, password = "", ...props }, ref) => {
  const strength = getStrength(password);
  return (
    <div ref={ref} className={cn("space-y-1", className)} {...props}>
      <div className="flex gap-1">
        {[0, 1, 2, 3].map((i) => (
          <div key={i} className={cn("h-1.5 flex-1 rounded-full transition-colors", i <= strength - 1 ? colors[strength] : "bg-muted")} />
        ))}
      </div>
      {password && <p className="text-xs text-muted-foreground">{labels[strength]}</p>}
    </div>
  );
});
PasswordStrength.displayName = "PasswordStrength";

export { PasswordStrength };