Comprobar visualmente la seguridad de una contraseña (fortaleza de contraseña)

Cuando nos registramos en un sitio web, por motivos de seguridad, es buena idea obligar a los usuarios a que introduzcan una contraseña que no sea demasiado simple.

Podemos comprobar el nivel de fortaleza de una contraseña de forma muy sencilla.

Definimos los niveles de seguridad que queremos tener, en este caso hemos establecido 4, así que creamos una imagen con 4 colores distintos y tan solo nos queda desplazar ese background 47px que es lo que ocupa cada sección de la imagen, de esta manera conseguimos mostrar los colores correspondiente a cada nivel.

See the Pen Seguridad contraseña by Pedro Marín (@pedromarin) on CodePen.