Fragmentos de códigos para campos de passwords y formularios en sitios webs
Te mostramos fragmentos de códigos para agregar al diseño web de tu sitio!
Si tu sitio web permite a los usuarios tener sus propias cuentas, las contraseñas son una parte importante tanto de la seguridad como de la interfaz de usuario. Seguramente querrás que los usuarios adopten contraseñas seguras, pero también hay algunos pequeños detalles que puedes agregar a un campo de contraseña que mejora la facilidad de uso.
Examinando los archivos de CodePen, hay una serie de fragmentos relacionados con contraseñas que vale la pena revisar.
Comprobación de requisitos de contraseña
Una de las situaciones más frustrantes para un usuario es cuando una contraseña no es lo suficientemente fuerte, pero no está claro qué deben hacer para cumplir con el requisito. Aquí tenemos un campo que utiliza JavaScript junto con una lista de requisitos para ‘marcar’ automáticamente cada elemento a medida que escribe.
Pueden cambiarle el texto en inglés simplemente editando el HTML
Mostrar y ocultar Password
Cuando estamos creando contraseñas complicadas, puede ser muy útil ver qué es lo que estamos escribiendo. Muy a menudo, los campos que ofrecen esta característica lo hacen con un ícono del globo ocular o algún otro método no verbal. Lo bueno de este formulario de inicio de sesión en particular es que en realidad dice ‘Mostrar contraseña’ en el conmutador del campo de contraseña. Nunca es una mala idea hacer las cosas lo más obvias posible.
See the Pen Hide & Show password with AngularJS by Bryan Miner (@gymbry) on CodePen.
Contraseña aleatoria personalizada
Lo que nos permite este ejemplo con el script Vue.js es editar la contraseña para nuestro sitio web con opciones muy sencillas de usar. Seleccionar la longitud, el número de dígitos y los símbolos. También hay un medidor de fuerza en tiempo real, la capacidad de generar una contraseña tras otra y la funcionalidad de hacer clic para copiar. ¿Qué más podrías necesitar?
See the Pen The Password Genie – Vue.js by Nour Saud (@nourabusoud) on CodePen.
Generador de múltiples contraseñas
Si necesitas generar varias contraseñas para tu sitio web, te encantará la funcionalidad de este ejemplo. Seleccionamos la cantidad de contraseñas que se desea generar, cuántos caracteres deben tener las contraseñas e incluso podemos seleccionar los caracteres que queremos que use el generador (aunque es mejor dejarlo vacio), incluso se puede guardar su lista de contraseñas como un archivo de texto o imprimirla.
See the Pen jQuery | Random Password Generator by Tobias Bogliolo (@tobiasdev) on CodePen.