passcore espai de proves
ENESCA

@passcore/jquery

Connector de jQuery

@passcore/jquery afegeix $.fn.password() a jQuery 3 i 4. Aplica’l a un camp de contrasenya i afegirà un indicador accessible al contenidor més proper, a més de llançar esdeveniments mentre s’escriu.

pnpm add @passcore/jquery jquery
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

Tal com ve, l’indicador espera amagat fins que el camp rep el focus i aleshores apareix lliscant. Si el camp es queda buit, torna a amagar-se.

JavaScript 
import $ from 'jquery'
import '@passcore/jquery'
import '@passcore/jquery/styles.css'

$('#default-password').password()

Llista de requisits

El clàssic formulari de registre: totes les condicions, en vermell o en verd mentre s’escriu. password.score porta el resultat complet, i result.rules enumera totes les regles actives, per ordre, amb el seu id, passed i params. El connector llegeix el nom d’usuari quan canvia la contrasenya, així que aquest camp també llança una actualització. 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.

Requisits

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

7 requisits per complir

JavaScript 
// the list: <li data-rule="minLength" data-state="idle">At least 8 characters</li>, and so on
const $summary = $('#checklist-summary')

$('#signup-password')
  .password({
    userInputs: ['#signup-username'],
    rules: { minLength: 8, lowercase: 1, uppercase: 1, numbers: 1, symbols: 1 },
    animate: false,
  })
  .on('password.score', (event, percent, result) => {
    const typed = event.target.value !== ''
    for (const rule of result.rules) {
      $(`#checklist [data-rule="${rule.id}"]`)
        .attr('data-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.text() !== text) {
      $summary.text(text)
    }
  })

// the plugin reads the username when the password changes: update on its changes too
$('#signup-username').on('input', () => $('#signup-password').trigger('input'))

Sempre visible, amb el percentatge

Amb animate: false l’indicador es veu des del principi, i showPercent hi afegeix el número.

JavaScript 
$('#always-password').password({
  animate: false,
  showPercent: true,
})

Vinculat a un nom d’usuari

Amb userInputs la contrasenya no pot contenir el nom d’usuari: prova d’escriure’l als dos camps. Els camps es llegeixen a cada pulsació.

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

Traduccions incloses

Els fitxers inclosos van a translations, i locale tria les formes del plural. Canvia la llengua a dalt: el connector llegeix els textos una sola vegada, així que l’espai de proves el torna a muntar.

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

const locales = { en, es, ca }

$('#translations-password').password({
  translations: locales[lang],
  locale: lang,
  animate: false,
  showPercent: true,
})

Traduccions amb i18next

translate rep la funció t d’una instància d’i18next, aquí la del mateix espai de proves. El connector només reescriu el missatge quan canvia, així que un canvi de llengua obliga a tornar-lo a muntar.

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

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

const $input = $('#i18next-password')
const mount = () => $input.password({
  translate: (key, params) => i18next.t(key, { ns: 'passcore', ...params }),
  animate: false,
  showPercent: true,
})

mount()

// the texts are translated on every update: refresh the meter after changing language
i18next.on('languageChanged', () => $input.password('refresh'))

Callbacks i esdeveniments

password.score es llança a cada pulsació, amb el percentatge i el resultat complet. Aquí controla la puntuació i el botó Envia.

Puntuació 0%

El botó s’activa tan bon punt la puntuació supera el 75 %.

JavaScript 
$('#events-password')
  .password({ animate: false })
  .on('password.score', (event, percent) => {
    $('#send').prop('disabled', percent <= 75)
    $('#events-score').text(percent + '%')
  })

Grup de camps

Per defecte, l’indicador va al div més proper. Amb closestSelector: '.form-group' es col·loca a sota de tot el grup de camps.

JavaScript 
$('#group-password').password({
  animate: false,
  closestSelector: '.form-group',
})

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