Mostrar y Ocultar contraseñas en WordPress.

Reading time aprox: 3 minutes, 51 seconds

Mostrar y Ocultar contraseñas en WordPress.

Algunas veces se requiere (como es el caso de las contraseñas) que lo que el usuario teclea como entrada de un campo (input) no sea visible, al menos no normalmente, solo cuando sea intencionalmente.

Este artículo está escrito en respuesta a la pregunta de uno de nuestros lectores. Quizá no es muy relevante como parte de WordPress, pero espero que sea útil para todos.

El entorno

La gran confusión para los noveles en las tareas de creación de páginas web, suele aparecer cuando llegan a plantearse un desarrollo en entornos «complejos». Y por complejos no quiero decir complicados, sino multi-parte.

Cuando se está desarrollando una página web, todos saben que se codifican tres partes:

• El HTML¹.
• El CSS².
• El JavaScript³.

Las preguntas aparecen en multitud, cuando además sumamos el entorno de WordPress, que está desarrollado en PHP⁴.

Yo siempre he sido partidario de la aplicación de una filosofía: KISS. Más allá de su traducción literal del inglés (beso), KISS es un acrónimo (vale, de acuerdo, en español debería escribirse: K.I.S.S.) en inglés, de la expresión: Keep It Stupid Simple o, literalmente traducido: Mantenlo Estúpidamente Simple.

KISS nos dice que no hay que complicar las cosas si no necesitan complicación. Sigue leyendo para entender la explicación.

Si un programador novato de páginas web, se encuentra con que tiene que interactuar con un servidor con WordPress, la primera pregunta que debe hacerse es: ¿realmente necesito trabajar con el servidor?

Si considera que la respuesta es positiva, entonces deberá plantearse: ¿cómo programo en WordPress? para lo que le invito a leer el artículo: Programar Con WordPress.

Luego deberá aprender el lenguaje PHP pero, siguiendo con KISS, diremos que no hace falta.

La razón por la que no hace falta, es que:

1. El servidor no necesita saber todo lo que hace el usuario, solo las respuestas a las preguntas que plantea (valores numéricos, valores de texto, contraseñas, etcétera) pero no el método de obtención de esas respuestas.
2. Como ya hemos dicho, PHP es un lenguaje de programación de servidores y, como tal, es «transparente» para el usuario.
3. El servidor no interactúa con el usuario, más allá de enviar secuencias de código HTML.

En otras palabras, el programador novato no necesitará saber si el entorno es o no WordPress ni si el servidor está programado con PHP, Ruby, Java o cualquier otro lenguaje.

Mostrar y Ocultar contraseñas

Pero si necesitará saber cómo configurar y controlar las secuencias HTML en el navegador web y, esto se hace con la programación del navegador en lenguaje JavaScript.

Necesitará también, conocimientos de CSS.

Mostrar y Ocultar contraseñas.

El objetivo

Si es necesario enviar al servidor una contraseña, por lo general se recurre al uso de un campo de recogida de datos en el que el usuario introduce la contraseña y la envía al servidor.

Esto se hace usualmente con la etiqueta input, con un type=»password», lo que el navegador interpreta de forma que oculta lo que el usuario teclea.

El objetivo entonces, es agregar un botón que permita decir al navegador, que el usuario quiere ver lo que teclea o ha tecleado en ese campo.

Es un detalle que mejora mucho la usabilidad y puede evitar frustraciones al usuario en el momento de escribir su contraseña, se ha equivocado y no puede ver dónde.

Cuando el usuario está en un dispositivo móvil y escribe mal la palabra clave en un campo de tipo contraseña y aparecen errores, le podemos permitir al usuario pulsar un botón para ver la contraseña para poderla escribir viendo las letras que teclea.

Esto se puede conseguir fácilmente con un poco de HTML, CSS y JavaScript.

El código

Sea cual sea la forma en que trabaja el servidor, deberá entregar el código al servidor para que este lo envíe al navegador del usuario que, sólo entiende código en formato HTML (sí, vale, también en XML, pero es menos común así que …)

Suponemos que en alguna parte del código de la página, tienes un formulario para solicitar la contraseña, digamos que es:

    Contraseña
    
    Mostrar

Si te das cuenta, esto no es un código completo, tan sólo una parte, un contenedor que contiene una etiqueta label con el texto «Contraseña», un campo de tipo password y una etiqueta span que contiene el texto «Mostrar».

Por otro lado, está el marcado CSS que es el que permite mostrar en forma bonita el código en el navegador.

Como parte del marcado CSS de la página, el trozo correspondiente a la solicitud de contraseña, será algo parecido a:

.campo {
    position: relative;
}
 
label {
    width: 100%;
}
 
input {
    width: 100%;
    padding: 7px;
}
 
.campo span {
    position: absolute;
    right: 5px;
    top: 39px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 10px;
    background-color: #dadada;
}

El resultado de aplicar este marcado, es algo parecido a:

Por otro lado, debemos tener la parte de código JavaScript, para realizar la «magia».

document.querySelector('.campo span').addEventListener('click', e => {
    const passwordInput = document.querySelector('#password');
    if (e.target.classList.contains('show')) {
        e.target.classList.remove('show');
        e.target.textContent = 'Ocultar';
        passwordInput.type = 'text';
    } else {
        e.target.classList.add('show');
        e.target.textContent = 'Mostrar';
        passwordInput.type = 'password';
    }
});

Mostrar y Ocultar contraseñas.

Ya que no necesitamos interactuar con el servidor, todo se realiza en el servidor local del usuario y, sólo cuando se de la orden de envío, se enviará el contenido final del campo, al servidor.

Mientras tanto, permitimos al usuario ver el contenido del campo para que pueda editarlo si es necesario.

Con este código, tenemos un falso botón creado con una etiqueta span con su aspecto modificado mediante el marcado CSS, con la palabra «Mostrar», que el código JavaScript está esperando que sea pulsada para ejecutar una función.

Dentro de este control del evento o función, hay una variable que contiene el elemento o campo contraseña.

La lógica es la siguiente:

Si el campo span contiene la clase «show»:

1. Se elimina la clase «show».
2. Se agrega el texto «Ocultar».
3. Se altera el tipo de campo (input type) a «text».

Por el contrario, es decir, si el atributo span no contiene la clase «show»:

1. Agrega la clase «show».
2. Se agrega el texto «Mostrar».
3. Se altera el tipo de campo (input type) a «password».

Mostrar y Ocultar contraseñas.

Conclusión

Como en casi todas las tecnologías, la filosofía KISS suele dar buenos resultados, sobre todo cuando te enfrentas a retos que en principio son complicados.

Enfrenta los problemas uno a uno y no temas pedir ayuda o consejo, quizá la clave está en un pequeño detalle que se te ha escapado.

Recuerda que dispones del repositorio oficial de WordPress para instalar plugins para personalizar tus contraseñas.

Mientras tanto, recuerda, #UsaMascarilla, #LavateLasManos, juega, experimenta y, sobre todo, ¡divertirte!

¡Gracias por leernos!

¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!

1. HyperText Marckup Language ↩

2. Cascading Style Sheet ↩

3. Lenguaje de programación de navegadores ↩

4. Personal Home Page – Lenguaje de programación para servidores web ↩