flyer-crawler.projectium.com/components/PasswordStrength.tsx

import React from 'react';

interface PasswordStrengthProps {
  password?: string;
}

type Strength = {
  level: 'none' | 'weak' | 'medium' | 'strong';
  text: string;
};

const checkStrength = (password: string): Strength => {
  if (!password) return { level: 'none', text: '' };
  const hasNumber = /\d/.test(password);
  const hasSpecial = /[!@#$%^&*]/.test(password);
  const hasUpper = /[A-Z]/.test(password);
  const hasLower = /[a-z]/.test(password);

  let score = 0;
  if (password.length >= 8) score++;
  if (password.length >= 12) score++;
  if (hasNumber) score++;
  if (hasSpecial) score++;
  if (hasUpper && hasLower) score++;

  if (score >= 4) return { level: 'strong', text: 'Strong' };
  if (score >= 2) return { level: 'medium', text: 'Medium' };
  return { level: 'weak', text: 'Weak' };
};

export const PasswordStrength: React.FC<PasswordStrengthProps> = ({ password = '' }) => {
  const { level, text } = checkStrength(password);
  const colorClasses = {
    weak: 'bg-red-500',
    medium: 'bg-yellow-500',
    strong: 'bg-green-500',
    none: 'bg-gray-300',
  };

  return <div className="text-xs text-right font-medium text-gray-500 dark:text-gray-400">{text}</div>;
};