PasswordStrength

"use client";
import { useId } from "react";
import { Check, Circle } from "lucide-react";
import { cn } from "@dashboardpack/core/lib/utils";
export function passwordRequirements(value: string, minLength = 12) {
  return [
    {
      label: `At least ${minLength} characters`,
      met: value.length >= minLength,
    },
    {
      label: "Uppercase and lowercase letters",
      met: /[a-z]/.test(value) && /[A-Z]/.test(value),
    },
    { label: "At least one number", met: /[0-9]/.test(value) },
    { label: "At least one symbol", met: /[^a-zA-Z0-9\s]/.test(value) },
  ];
}
export interface PasswordStrengthProps {
  value: string;
  minLength?: number;
  showRequirements?: boolean;
  className?: string;
}
export function PasswordStrength({
  value,
  minLength = 12,
  showRequirements = true,
  className,
}: PasswordStrengthProps) {
  const id = useId();
  const requirements = passwordRequirements(
    value,
    Math.max(1, Math.floor(minLength) || 12),
  );
  const score = requirements.filter((item) => item.met).length;
  const label = !value
    ? "Not entered"
    : ["Very weak", "Weak", "Fair", "Good", "Meets all requirements"][score];
  return (
    <div className={cn("space-y-3", className)}>
      <div className="flex items-center justify-between gap-3 text-xs">
        <span id={id} className="font-medium">
          Password requirements
        </span>
        <span className="text-muted-foreground">{label}</span>
      </div>
      <div
        role="meter"
        aria-labelledby={id}
        aria-valuemin={0}
        aria-valuemax={4}
        aria-valuenow={score}
        aria-valuetext={label}
        className="flex gap-1.5"
      >
        {requirements.map((item, index) => (
          <span
            key={item.label}
            className={cn(
              "h-1.5 flex-1 rounded-full",
              index >= score
                ? "bg-muted"
                : score < 2
                  ? "bg-destructive"
                  : score < 4
                    ? "bg-primary/60"
                    : "bg-primary",
            )}
          />
        ))}
      </div>
      {showRequirements && (
        <ul className="grid gap-2 text-xs">
          {requirements.map((item) => (
            <li
              key={item.label}
              className={cn(
                "flex items-center gap-2",
                item.met ? "text-foreground" : "text-muted-foreground",
              )}
            >
              {item.met ? (
                <Check aria-hidden className="size-3.5 text-primary" />
              ) : (
                <Circle aria-hidden className="size-3.5" />
              )}
              <span>
                {item.label}
                <span className="sr-only">
                  : {item.met ? "met" : "not met"}
                </span>
              </span>
            </li>
          ))}
        </ul>
      )}
      <p className="text-xs text-muted-foreground">
        A requirements checklist, not an estimate of password security.
      </p>
    </div>
  );
}