"use client";

import * as React from "react";

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

export type PasswordStrengthLevel = "weak" | "fair" | "good" | "strong";

export interface PasswordRequirement {
  id: string;
  label: string;
  validator: (password: string) => boolean;
}

export interface PasswordStrengthProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
  value?: string;
  onChange?: (value: string) => void;
  showRequirements?: boolean;
  requirements?: PasswordRequirement[];
}

const defaultRequirements: PasswordRequirement[] = [
  {
    id: "length",
    label: "At least 8 characters",
    validator: (p) => p.length >= 8,
  },
  {
    id: "uppercase",
    label: "One uppercase letter",
    validator: (p) => /[A-Z]/.test(p),
  },
  {
    id: "lowercase",
    label: "One lowercase letter",
    validator: (p) => /[a-z]/.test(p),
  },
  {
    id: "number",
    label: "One number",
    validator: (p) => /\d/.test(p),
  },
  {
    id: "special",
    label: "One special character",
    validator: (p) => /[!@#$%^&*(),.?":{}|<>]/.test(p),
  },
];

const EyeIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
    <circle cx="12" cy="12" r="3" />
  </svg>
);

const EyeOffIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
    <line x1="1" y1="1" x2="23" y2="23" />
  </svg>
);

const CheckIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

const CircleIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <circle cx="12" cy="12" r="10" />
  </svg>
);

const calculateStrength = (
  password: string,
  requirements: PasswordRequirement[]
): PasswordStrengthLevel => {
  if (!password) return "weak";
  const passed = requirements.filter((req) => req.validator(password)).length;
  const ratio = passed / requirements.length;
  if (ratio >= 1) return "strong";
  if (ratio >= 0.75) return "good";
  if (ratio >= 0.5) return "fair";
  return "weak";
};

const strengthLabels: Record<PasswordStrengthLevel, string> = {
  weak: "Weak",
  fair: "Fair",
  good: "Good",
  strong: "Strong",
};

const strengthColors: Record<PasswordStrengthLevel, number> = {
  weak: 1,
  fair: 2,
  good: 3,
  strong: 4,
};

export const PasswordStrength = React.forwardRef<
  HTMLInputElement,
  PasswordStrengthProps
>(
  (
    {
      className,
      value: controlledValue,
      onChange,
      showRequirements = true,
      requirements = defaultRequirements,
      placeholder = "Enter password",
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = React.useState("");
    const [showPassword, setShowPassword] = React.useState(false);

    const value = controlledValue ?? internalValue;
    const strength = calculateStrength(value, requirements);
    const filledBars = value ? strengthColors[strength] : 0;

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newValue = e.target.value;
      setInternalValue(newValue);
      onChange?.(newValue);
    };

    return (
      <div className={cn("w-full space-y-3", className)}>
        {/* Password input */}
        <div className="relative">
          <input
            ref={ref}
            type={showPassword ? "text" : "password"}
            value={value}
            onChange={handleChange}
            placeholder={placeholder}
            className={cn(
              "w-full rounded-lg border border-border bg-background px-3 py-2 pr-10 text-sm text-foreground",
              "placeholder:text-muted-foreground",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
            {...props}
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className={cn(
              "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground transition-colors",
              "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
            aria-label={showPassword ? "Hide password" : "Show password"}
          >
            {showPassword ? (
              <EyeOffIcon className="h-4 w-4" />
            ) : (
              <EyeIcon className="h-4 w-4" />
            )}
          </button>
        </div>

        {/* Strength meter */}
        <div className="space-y-2">
          <div className="flex gap-1">
            {[1, 2, 3, 4].map((bar) => (
              <div
                key={bar}
                className={cn(
                  "h-1.5 flex-1 rounded-full transition-colors",
                  bar <= filledBars ? "bg-primary" : "bg-muted"
                )}
              />
            ))}
          </div>
          {value && (
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">Password strength</span>
              <span className="font-medium text-foreground">
                {strengthLabels[strength]}
              </span>
            </div>
          )}
        </div>

        {/* Requirements list */}
        {showRequirements && (
          <ul className="space-y-1.5">
            {requirements.map((req) => {
              const passed = value ? req.validator(value) : false;
              return (
                <li
                  key={req.id}
                  className={cn(
                    "flex items-center gap-2 text-xs transition-colors",
                    passed ? "text-foreground" : "text-muted-foreground"
                  )}
                >
                  {passed ? (
                    <CheckIcon className="h-3.5 w-3.5 text-primary" />
                  ) : (
                    <CircleIcon className="h-3.5 w-3.5" />
                  )}
                  <span>{req.label}</span>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    );
  }
);

PasswordStrength.displayName = "PasswordStrength";
Password Strength

Dependencies

Files

Installation
