DataScope26/WEB

1import { useMemo } from "react";2 3export default function PasswordChecklist({ password }) {4  const current = password || "";5 6  const checks = useMemo(() => ({7    length: current.length >= 8,8    special: /[$&+,:;=?@#|'<>.-^*()%!]/.test(current),9    uppercaseLowercase: current !== current.toUpperCase() && current !== current.toLowerCase()10  }), [current]);11 12  const getColor = (isValid) => {13    if (!password) return "#808080";14    return isValid ? "#22c55e" : "#ef4444";15  };16 17  return (18    <div className="password-checklist">19      <div style={{ color: getColor(checks.length) }}>20        {checks.length ? "☑" : "☐"} Contraseña tiene al menos 8 caracteres21      </div>22      <div style={{ color: getColor(checks.special) }}>23        {checks.special ? "☑" : "☐"} Contraseña contiene al menos 1 caracter especial24      </div>25      <div style={{ color: getColor(checks.uppercaseLowercase) }}>26        {checks.uppercaseLowercase ? "☑" : "☐"} Contraseña tiene al menos 1 mayúscula y 1 minúscula27      </div>28    </div>29  );30}