Criando um componente para validar o status da senha do usuário

Existem várias maneiras de validar se a senha do usuário está seguindo boas práticas. Uma delas é simplesmente pintar o input de vermelho e assustar o usuário, enquanto outra é mostrar o que ele precisa fazer e deixar claro o caminho para resolver o problema.

Com esse pensamento, criei um componente separado que pode ser acoplado a qualquer outro input, desde que ele tenha as mesmas validações do input original.

const PasswordCheckStatus = ({ password }: { password: string }) => {
  const hasUpper = /[A-Z]/.test(password);
  const hasSpecial = /[\W_]/.test(password);
  const hasNumber = /[0-9]/.test(password);

  const percentage = (hasUpper ? 33.3 : 0) + (hasSpecial ? 33.3 : 0) + (hasNumber ? 33.3 : 0);

  if (!password) {
    return null;
  }

  return (
    <div className="w-full bg-slate-200 h-[2px]">
      <div
        className={cn('h-full bg-slate-500 transition-all', {
          'bg-red-500': percentage < 60,
          'bg-yellow-500': percentage >= 60 && percentage < 80,
          'bg-green-500': percentage >= 80
        })}
        style={{ width: `${percentage}%` }}></div>
    </div>
  );
};

E assim ficou o código. A validação é a mesma que será utilizada no input. Usei regex e Tailwind para o estilo.

E como mencionei, utilizei-o como uma dependência do input.