@passcore/react

React

@passcore/react ofereix un component controlat, <PasswordStrengthMeter>, i el hook usePasswordStrength(), per a React 18 o posterior.

pnpm add @passcore/react

Llegeix el README

Tots els indicadors d’aquesta pàgina parlen la teva llengua. L’espai de proves dona a cadascun els textos de la llengua que triïs a dalt i el seu nom accessible. Perquè els fragments de codi siguin breus, només les demostracions de traducció mostren com es fa; el botó per mostrar i amagar la contrasenya és de l’espai de proves, no del paquet.

Per defecte

El component és controlat: rep la contrasenya com a prop i mai no toca el teu camp. No té cap estat amagat, així que l’indicador sempre es veu; id l’associa al camp.

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} />

Llista de requisits

El clàssic formulari de registre, amb el teu propi marcatge: usePasswordStrength() retorna el resultat, i result.rules enumera totes les regles actives, per ordre, amb el seu id, passed i params. El component dibuixa la barra al costat. Cada element es queda en gris fins que s’hi escriu alguna cosa: una contrasenya buida tampoc no és “comuna”, i mostrar-ho en verd seria enganyós.

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>

Amb el percentatge

showPercent afegeix el número al costat de la barra.

TSX

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

Vinculat a un nom d’usuari

Amb userInputs la contrasenya no pot contenir el nom d’usuari. Passa-li els valors actuals, directament de l’estat.

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
/>

Traduccions incloses

Els fitxers inclosos van a translations, locale tria les formes del plural i label dona nom a l’indicador per als lectors de pantalla. Canvia la llengua a dalt: props noves, textos nous.

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
/>

Traduccions amb i18next

translate rep la funció t d’una instància d’i18next, aquí la del mateix espai de proves. La funció no canvia mai, així que locale indica al component quan ha de tornar a traduir.

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 i esdeveniments

onScore rep el percentatge cada vegada que canvia el resultat (mai en muntar-se). Aquí controla la puntuació i el botó Envia.

TSX

const [percent, setPercent] = useState(0)

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

Grup de camps

L’indicador és un element més: posa’l després del grup de camps i n’ocuparà tota l’amplada.

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>

Temes

Els colors, la pista i l’alçada són propietats personalitzades de CSS: de --pass-color-very-weak a --pass-color-strong, --pass-track i --pass-height. Juga-hi aquí: el CSS de sota canvia alhora.

Molt feble
Feble
Acceptable
Bona
Forta

Propietats personalitzades

Molt feble--pass-color-very-weak Feble--pass-color-weak Acceptable--pass-color-fair Bona--pass-color-good Forta--pass-color-strong Pista--pass-track

Alçada 6px

Combinacions

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;
}

Els controls només canvien aquesta previsualització, de manera que les altres demostracions mantenen el seu aspecte. Defineix les propietats a :root per aplicar el tema a tot un lloc web.