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.
Top comments (0)