passcore zona de pruebas
ENESCA

@passcore/jquery

Plugin de jQuery

@passcore/jquery añade $.fn.password() a jQuery 3 y 4. Aplícalo a un campo de contraseña y añadirá un indicador accesible al contenedor más cercano, además de lanzar eventos mientras se escribe.

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

Tal cual, el indicador espera oculto hasta que el campo recibe el foco y entonces aparece deslizándose. Si el campo se queda vacío, vuelve a ocultarse.

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

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

Lista de requisitos

El clásico formulario de registro: todas las condiciones, en rojo o en verde mientras se escribe. password.score trae el resultado completo, y result.rules enumera todas las reglas activas, por orden, con su id, passed y params. El plugin lee el nombre de usuario cuando cambia la contraseña, así que ese campo también lanza una actualización. 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.

Requisitos

  • Al menos 8 caracteres
  • Que no sea una contraseña común
  • Sin datos personales, como tu nombre de usuario
  • Una letra minúscula
  • Una letra mayúscula
  • Un número
  • Un símbolo

7 requisitos por cumplir

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'))

Siempre visible, con el porcentaje

Con animate: false el indicador se ve desde el principio, y showPercent añade el número.

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

Vinculado a un nombre de usuario

Con userInputs la contraseña no puede contener el nombre de usuario: prueba a escribirlo en los dos campos. Los campos se leen con cada pulsación.

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

Traducciones incluidas

Los archivos incluidos van en translations, y locale elige las formas del plural. Cambia el idioma arriba: el plugin lee sus textos una sola vez, así que la zona de pruebas lo vuelve a montar.

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,
})

Traducciones con i18next

translate recibe la función t de una instancia de i18next, aquí la de la propia zona de pruebas. El plugin solo reescribe el mensaje cuando cambia, así que un cambio de idioma exige volver a montarlo.

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 y eventos

password.score se lanza con cada pulsación, con el porcentaje y el resultado completo. Aquí controla la puntuación y el botón Enviar.

Puntuación 0%

El botón se activa en cuanto la puntuación supera el 75 %.

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

Grupo de campos

Por defecto, el indicador va al div más cercano. Con closestSelector: '.form-group' se coloca debajo de todo el grupo de campos.

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

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