@passcore/vanilla

JavaScript pur

@passcore/vanilla no necessita cap framework ni jQuery: crida createPasswordMeter() sobre un camp, o escriu un element <passcore-meter> allà on vulguis l’indicador.

pnpm add @passcore/vanilla

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

Amb hideUntilFocus l’indicador es manté amagat fins que el camp rep el focus, i torna a amagar-se quan el perd si el camp és buit.

Contrasenya

JavaScript

import { createPasswordMeter } from '@passcore/vanilla'
import '@passcore/vanilla/styles.css'

createPasswordMeter('#default-password', { hideUntilFocus: true })

Llista de requisits

El clàssic formulari de registre: totes les condicions, en vermell o en verd mentre s’escriu. El callback onScore (o l’esdeveniment passcore:score, que es propaga) porta el resultat complet, i result.rules enumera totes les regles actives, per ordre, amb el seu id, passed i params. En escriure el nom d’usuari es crida refresh(), perquè la regla de les dades personals el tingui en compte. 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.

Nom d’usuari

Contrasenya

Requisits

Almenys 8 caràcters , complert , no complert
Que no sigui una contrasenya comuna , complert , no complert
Sense dades personals, com el teu nom d’usuari , complert , no complert
Una lletra minúscula , complert , no complert
Una lletra majúscula , complert , no complert
Un número , complert , no complert
Un símbol , complert , no complert

7 requisits per complir

JavaScript

// the list: <li data-rule="minLength" data-state="idle">At least 8 characters</li>, and so on
const input = document.querySelector('#signup-password')
const summary = document.querySelector('#checklist-summary')

function check(result) {
  const typed = input.value !== ''
  for (const rule of result.rules) {
    const item = document.querySelector(`#checklist [data-rule="${rule.id}"]`)
    item.dataset.state = !typed ? 'idle' : rule.passed ? 'met' : 'unmet'
  }
  // a live region: only touch it when the count changes
  const met = result.rules.filter((rule) => rule.passed).length
  const text = typed ? `${met} of ${result.rules.length} requirements met` : `${result.rules.length} requirements to meet`
  if (summary.textContent !== text) {
    summary.textContent = text
  }
}

const meter = createPasswordMeter(input, {
  userInputs: ['#signup-username'],
  rules: { minLength: 8, lowercase: 1, uppercase: 1, numbers: 1, symbols: 1 },
  onScore: (percent, result) => check(result),
})
// or: input.addEventListener('passcore:score', (event) => check(event.detail.result))

// the username is read on each update: refresh when it changes
document.querySelector('#signup-username').addEventListener('input', () => meter.refresh())

Sempre visible, amb el percentatge

Sense hideUntilFocus l’indicador es veu des del principi, i showPercent hi afegeix el número.

Contrasenya

JavaScript

createPasswordMeter('#always-password', { showPercent: true })

Vinculat a un nom d’usuari

Amb userInputs la contrasenya no pot contenir el nom d’usuari. Les cadenes són selectors i es llegeixen a cada pulsació; també admet funcions.

Nom d’usuari

Contrasenya

JavaScript

createPasswordMeter('#linked-password', {
  userInputs: ['#username'],
  showPercent: true,
})

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. Les opcions es llegeixen una sola vegada, així que una altra llengua vol dir un altre indicador.

Contrasenya

JavaScript

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

const locales = { en, es, ca }

// the options are read once: create the meter again for another language
meter?.destroy()
meter = createPasswordMeter('#translations-password', {
  translations: locales[lang],
  locale: lang,
  label: labels[lang],
  showPercent: true,
})

Traduccions amb i18next

translate rep la funció t d’una instància d’i18next, aquí la del mateix espai de proves. Els textos es tradueixen a cada actualització, així que per canviar de llengua n’hi ha prou amb refresh().

Contrasenya

JavaScript

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

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

const meter = createPasswordMeter('#i18next-password', {
  translate: (key, params) => i18next.t(key, { ns: 'passcore', ...params }),
  showPercent: true,
})

// the texts are translated on every update: refresh them
i18next.on('languageChanged', () => meter.refresh())

Callbacks i esdeveniments

El callback onScore i l’esdeveniment passcore:score, que es propaga, reben el percentatge a cada actualització. Aquí controlen el botó Envia i la puntuació.

JavaScript

const input = document.querySelector('#events-password')
const send = document.querySelector('#send')

createPasswordMeter(input, {
  onScore: (percent) => {
    send.disabled = percent <= 75
  },
})

input.addEventListener('passcore:score', (event) => {
  document.querySelector('#events-score').textContent = `${event.detail.percent}%`
})

Contenidor propi

Per defecte, l’indicador va just després del camp. container l’afegeix en un altre lloc: aquí, a sota de tot el grup de camps.

Contrasenya

JavaScript

createPasswordMeter('#group-password', { container: '#group-field' })

L’element <passcore-meter>

<passcore-meter> dibuixa l’indicador just on l’escrius. Els atributs cobreixen les opcions senzilles: min-length, show-percent, user-inputs, locale, label i alguna més.

Nom d’usuari

Contrasenya

HTML

<script type="module">
  import '@passcore/vanilla/element'
</script>

<input type="text" id="element-username">
<input type="password" id="element-password">
<passcore-meter
  for="element-password"
  min-length="10"
  show-percent
  user-inputs="#element-username"
></passcore-meter>

Opcions de l’element des de JavaScript

El que no cap en un atribut (traduccions, regles, callbacks) va a la propietat options, que es combina amb els atributs. Aquest, a més, demana un número i un símbol.

Contrasenya

JavaScript

const element = document.querySelector('passcore-meter[for="options-password"]')

// merged over the attributes: show-percent still applies
element.options = {
  translations: locales[lang],
  locale: lang,
  rules: { numbers: 1, symbols: 1 },
}

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.

Contrasenya

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.