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:

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:

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

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í:

Puede que también te interese

Carga condicional de JS y CSS para mejorar el rendimiento y la velocidad de carga
Carga condicional de JS y CSS para mejorar el rendimiento y la velocidad de carga
En esta entrada vamos a ver una técnica de WPO muy importante dentro de la estrategia de optimización y mejora de rendimiento y velocidad de…
De Font Awesome a SVG para mejorar el WPO
De Font Awesome a SVG para mejorar el WPO
Siempre me ha gustado Font Awesome, es una librería variada y versátil con la que puedes añadir iconos a botones sociales, campos de formularios, etiquetas,…
Shortcake: User Interface para los shortcodes de WordPress
Shortcake: User Interface para los shortcodes de WordPress
Shortcake es una nueva funcionalidad de WordPress que permitirá establecer una interfaz amigable para los shortcodes. Posibilitará insertar un shortcode como si de un elemento…
Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS
Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…




  • León Guerra

    // Force strong password
    function lehelmatyus_validation() {
    global $bp;

    if ( !empty( $_POST[‘signup_password’] ) )
    if ( !valid_pass( $_POST[‘signup_password’] ) ){
    $bp->signup->errors[‘signup_password’] = __( ‘Your password is not strong enough. Please, write a strong password using characters: A-Z, a-z, 0-9, @#$%&*-:;,.!’, ‘buddypress’ );
    }
    }
    add_action( ‘bp_signup_validate’, ‘lehelmatyus_validation’);

    function valid_pass($candidate) {
    $r1=’/[A-Z]/’; //Uppercase
    $r2=’/[a-z]/’; //lowercase
    $r3=’/[!@#$%^&*()-_=+{};:,]/’; // whatever you mean by special char
    $r4=’/[0-9]/’; //numbers

    if(preg_match_all($r1,$candidate, $o)<1) return FALSE;
    if(preg_match_all($r2,$candidate, $o)<1) return FALSE;
    if(preg_match_all($r3,$candidate, $o)<1) return FALSE;
    if(preg_match_all($r4,$candidate, $o)<1) return FALSE;
    if(strlen($candidate)<8) return FALSE;

    return TRUE;
    }

    // Restricted Email Domains
    add_option('limited_email_domains', array('yahoo.com', 'outlook.com', 'hotmail.com', 'gmail.com', 'aol.com', 'mail.com'));