Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
medidor contraseña fuerte

Cómo agregar el generador de contraseña fuerte de WordPress en nuestro formulario de registro personalizado

En la entrada anterior veíamos cómo crear un formulario de registro personalizado en WordPress. En el ejemplo, generábamos una contraseña automáticamente, pero ahora vamos a ver cómo integrar el ‘password-strength-meter‘ nativo de WordPress y permitir al usuario introducir su propia contraseña usando el medidor de contraseña fuerte.

Para ello crearemos un formulario de registro personalizado donde solicitaremos el usuario, email y clave. El html es el siguiente:

<form method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>"> <div class="login-form"> <div class="form-group"> <label for="user">Usuario:</label><br /> <input type="text" id="user" name="user" class="form-control" value="<?php echo isset($_POST['user']) ? $_POST['user'] : null;?>" placeholder="Usuario" required aria-required="true" /> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email" class="form-control" value="<?php echo(isset($_POST['email']) ? $_POST['email'] : null); ?>" placeholder="Email" required aria-required="true" /> </div> <div class="form-group"> <label for="password">Contraseña:</label> <input type="password" id="password" name="password" class="form-control" value="<?php echo(isset($_POST['password']) ? $_POST['password'] : null);?>" placeholder="Contraseña" required aria-required="true" /> </div> <div class="form-group"> <label for="password_repeat">Repite Contraseña:</label> <input type="password" id="password_repeat" name="password_repeat" class="form-control" placeholder="Repite Contraseña" required aria-required="true" autocomplete="off" /> <span id="password-strength"></span> </div> <input type="submit" id="submit" name="submit" value="Enviar" disabled="disabled" /> </div> </form>

Cómo podemos observar incluimos un campo “contraseña” y otro “repetir contraseña” para asegurarnos que el usuario introduce los datos correctamente. A continuación del input de repetir contraseña añadimos un span con el id “password-strength”. Mediante jQuery haremos las comprobaciones pertinentes y se irá actualizando esta etiqueta con los mensajes de contraseña débil, normal, fuerte, etc…

También hemos de señalar que hemos puesto el botón de enviar formulario con el atributo disabled=”disabled”. Esto es para que no se envíe el formulario hasta que se cumplan nuestras condiciones.

A continuación debemos agregar en nuestro functions.php una función para cargar el componente nativo “password-strength-meter” y un archivo .js donde realizaremos las comprobaciones mediante jQuery:

<?php function my_scripts() { wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', '', '', true ); wp_enqueue_script( 'password-strength-meter' ); } add_action( 'wp_enqueue_scripts', 'my_scripts' );?>

En nuestro archivo main.js agregamos éste código:

function checkPasswordStrength( $pass1, $pass2, $strengthResult, $submitButton, blacklistArray ) { var pass1 = $pass1.val(); var pass2 = $pass2.val(); // Reseteamos el botón enviar y el medidor $submitButton.attr( 'disabled', 'disabled' ); $strengthResult.removeClass( 'short bad good strong mismatch' ); // Comprobamos la lista negra de palabras blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() ) // Obtenemos la fortaleza de la constraseña var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 ); // En función de la fortaleza de la contraseña, añadimos una u otra clase al medidor switch ( strength ) { case 2: $strengthResult.addClass( 'bad' ).html( pwsL10n.bad ); break; case 3: $strengthResult.addClass( 'good' ).html( pwsL10n.good ); break; case 4: $strengthResult.addClass( 'strong' ).html( pwsL10n.strong ); break; case 5: $strengthResult.addClass( 'mismatch' ).html( pwsL10n.mismatch ); break; default: $strengthResult.addClass( 'short' ).html( pwsL10n.short ); } //Sólo en el caso de que el campo repetir contraseña esté rellenado y siempre que el resultado sea distinto de 5, es decir, que coincidan las contraseñas, activaremos el botón de enviar if ( strength !== 5 && '' !== pass2.trim() ) { $submitButton.removeAttr( 'disabled' ); } return strength; } jQuery(document).ready(function ($) { //Llamamos a la función de comprobar contraseña cada vez que escribimos en los inputs contraseña o repetir contraseña $( 'body' ).on( 'keyup', 'input[name=password], input[name=password_repeat]', function( event ) { checkPasswordStrength( $('input[name=password]'), $('input[name=password_repeat]'), $('#password-strength'), // Strength meter $('input[type=submit]'), // Submit button ['lista', 'negra', 'palabras'] // Lista negra de palabras ); } ); });

Sólo en el caso de estar los dos inputs de contraseña rellenos y que coincidan, habilitaremos el botón enviar.

Cómo se puede observar en el código, en función de la contraseña introducida, agregaremos una serie de clases al span “password-strength”. Podremos dar estilo a ésta etiqueta mediante CSS, incluyendo en nuestra hoja de estilos las clases short, bad, good, strong y mismatch.

 

Cómo personalizar los textos del medidor de contraseña fuerte

Podemos personalizar los mensajes de texto que aparecen en el medidor de fortaleza de la contraseña simplemente añadiendo una función mediante wp_localize_script(). Simplemente sobreescribiremos los mensajes por defecto. Para ello usaremos la función mencionada anteriormente justo después de cargar el script de «password-strength-meter«. La función que hemos agregado anteriormente a nuestro functions.php quedaría ahora así:

<?php function my_scripts() { wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', '', '', true ); wp_enqueue_script( 'password-strength-meter' ); wp_localize_script( 'password-strength-meter', 'pwsL10n', array( 'empty' => __( 'contraseña vacía' ), 'short' => __( 'contraseña muy debil' ), 'bad' => __( 'contraseña debil' ), 'good' => _x( 'contraseña buena', 'password strength' ), 'strong' => __( 'contraseña muy fuerte' ), 'mismatch' => __( 'las contraseñas no coinciden' ) ) ); } add_action( 'wp_enqueue_scripts', 'my_scripts' );?>

Puede que también te interese

Guía sobre WordPress term meta
Guía sobre WordPress term meta
El lanzamiento de la versión de WordPress 4.4 está previsto para el próximo 8 de diciembre. Trae consigo muchas novedades entre las que se encuentran…
Logo de tema, nueva característica en WordPress 4.5
Logo de tema, nueva característica en WordPress 4.5
WordPress 4.5, entre otras mejoras y resolución de incidencias y vulnerabilidades, introduce una nueva característica para agregar un logo de tema de forma nativa. Ya…
Sanitizando: cómo validar y escapar datos en WordPress
Sanitizando: cómo validar y escapar datos en WordPress
En éste artículo vamos a aprender a hacer un tratamiento de datos correcto en WordPress. Éste punto es imprescindible para cualquier desarrollo a medida que…
Shortcuts o atajos del teclado en el editor de WordPress
Shortcuts o atajos del teclado en el editor de WordPress
El editor WYSIWYG (What You See Is What You Get – lo que ves es lo que obtienes) de WordPress te permite usar Shortcuts o…