@passcore/react

React

@passcore/react ofrece un componente controlado, <PasswordStrengthMeter>, y el hook usePasswordStrength(), para React 18 o posterior.

pnpm add @passcore/react

Leer el README

Todos los indicadores de esta página hablan tu idioma. La zona de pruebas le da a cada uno los textos del idioma que elijas arriba y su nombre accesible. Para que los fragmentos de código sean breves, solo las demos de traducción muestran cómo se hace; el botón para mostrar y ocultar la contraseña es de la zona de pruebas, no del paquete.

Por defecto

El componente es controlado: recibe la contraseña como prop y nunca toca tu campo. No tiene estado oculto, así que el indicador siempre se ve; id lo asocia al campo.

TSX

import { PasswordStrengthMeter } from '@passcore/react'
import '@passcore/react/styles.css'

const [password, setPassword] = useState('')

<input
  id="password"
  type="password"
  value={password}
  onChange={(event) => setPassword(event.target.value)}
  aria-describedby="password-strength"
/>
<PasswordStrengthMeter id="password-strength" password={password} />

Lista de requisitos

El clásico formulario de registro, con tu propio marcado: usePasswordStrength() devuelve el resultado, y result.rules enumera todas las reglas activas, por orden, con su id, passed y params. El componente dibuja la barra al lado. Cada elemento se queda en gris hasta que se escribe algo: una contraseña vacía tampoco es “común”, y mostrarlo en verde sería engañoso.

TSX

import { PasswordStrengthMeter, usePasswordStrength } from '@passcore/react'

const rules = { minLength: 8, lowercase: 1, uppercase: 1, numbers: 1, symbols: 1 }

const { result } = usePasswordStrength(password, { userInputs: [username], rules })
const typed = password !== ''
const met = result.rules.filter((rule) => rule.passed).length

<PasswordStrengthMeter password={password} userInputs={[username]} rules={rules} />
<ul>
  {result.rules.map((rule) => (
    <li key={rule.id} data-state={!typed ? 'idle' : rule.passed ? 'met' : 'unmet'}>
      {t(`requirements.rule.${rule.id}`, { count: rule.params.min })}
    </li>
  ))}
</ul>
<p aria-live="polite">
  {typed ? `${met} of ${result.rules.length} requirements met` : `${result.rules.length} requirements to meet`}
</p>

Con el porcentaje

showPercent añade el número junto a la barra.

TSX

<PasswordStrengthMeter
  id="password-strength"
  password={password}
  showPercent
/>

Vinculado a un nombre de usuario

Con userInputs la contraseña no puede contener el nombre de usuario. Pásale los valores actuales, directamente desde el estado.

TSX

const [username, setUsername] = useState('')

<input
  type="text"
  autoComplete="username"
  value={username}
  onChange={(event) => setUsername(event.target.value)}
/>
<PasswordStrengthMeter
  id="password-strength"
  password={password}
  userInputs={[username]}
  showPercent
/>

Traducciones incluidas

Los archivos incluidos van en translations, locale elige las formas del plural y label da nombre al indicador para los lectores de pantalla. Cambia el idioma arriba: props nuevas, textos nuevos.

TSX

import en from '@passcore/react/locales/en.json'
import es from '@passcore/react/locales/es.json'
import ca from '@passcore/react/locales/ca.json'

const locales = { en, es, ca }

<PasswordStrengthMeter
  password={password}
  translations={locales[lang]}
  locale={lang}
  label={labels[lang]}
  showPercent
/>

Traducciones con i18next

translate recibe la función t de una instancia de i18next, aquí la de la propia zona de pruebas. La función no cambia nunca, así que locale le indica al componente cuándo debe volver a traducir.

TSX

import i18next from 'i18next'
import es from '@passcore/react/locales/es.json'
import ca from '@passcore/react/locales/ca.json'

i18next.addResourceBundle('es', 'passcore', es)
i18next.addResourceBundle('ca', 'passcore', ca)

const translate = (key, params) => i18next.t(key, { ns: 'passcore', ...params })

// the same function in every language: locale tells the meter to translate again
<PasswordStrengthMeter
  password={password}
  translate={translate}
  locale={lang}
  label={labels[lang]}
  showPercent
/>

Callbacks y eventos

onScore recibe el porcentaje cada vez que cambia el resultado (nunca al montarse). Aquí controla la puntuación y el botón Enviar.

TSX

const [percent, setPercent] = useState(0)

<PasswordStrengthMeter password={password} onScore={setPercent} />
<output>{percent}%</output>
<button type="submit" disabled={percent <= 75}>Send</button>

Grupo de campos

El indicador es un elemento más: ponlo después del grupo de campos y ocupará todo el ancho del grupo.

TSX

<div className="form-group">
  <label htmlFor="password">Password</label>
  <div className="input-group">
    <span className="input-group__addon">…</span>
    <input id="password" type="password" value={password} onChange={…} />
  </div>
  <PasswordStrengthMeter password={password} />
</div>

Temas

Los colores, la pista y la altura son propiedades personalizadas de CSS: de --pass-color-very-weak a --pass-color-strong, --pass-track y --pass-height. Juega con ellas aquí: el CSS de abajo cambia a la vez.

Muy débil
Débil
Aceptable
Buena
Fuerte

Propiedades personalizadas

Muy débil--pass-color-very-weak Débil--pass-color-weak Aceptable--pass-color-fair Buena--pass-color-good Fuerte--pass-color-strong Pista--pass-track

Altura 6px

Combinaciones

CSS

.signup {
  --pass-height: 6px;
  --pass-track: #e4e2db;
  --pass-color-very-weak: #d92d20;
  --pass-color-weak: #e06a0f;
  --pass-color-fair: #c99400;
  --pass-color-good: #5e9e0f;
  --pass-color-strong: #16884a;
}

Los controles solo cambian esta vista previa, así que las demás demos conservan su aspecto. Define las propiedades en :root para aplicar el tema a todo un sitio.