password strength validation with visibility toggle

index.html

<div class="password-wrapper">
	<input id="password-field" type="password" class="input" placeholder="Test your password"name="password">
		
	<div class="icon-wrapper">
  	<span toggle="#password-field" class="ion ion-eye field-icon toggle-password"></span>
 </div>

 <div class="strength-lines">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
 </div>
</div>

password-strength-validation-with-visibility-toggle.markdown

password strength validation with visibility toggle

A Pen by Bill on CodePen.

License.

script.js

$(document).ready(function() {
	
	// hide/show password
	$(".icon-wrapper").click(function() {
		$(".toggle-password").toggleClass(".ion-eye ion-more");
		var input = $($(".toggle-password").attr("toggle"));
		if (input.attr("type") == "password") {
			input.attr("type", "text");
		} else {
			input.attr("type", "password");
		}
	});

	// strength validation on keyup-event
	$("#password-field").on("keyup", function() {
		var val = $(this).val(),
			color = testPasswordStrength(val);

		styleStrengthLine(color, val);
	});

	// check password strength
	function testPasswordStrength(value) {
		var strongRegex = new RegExp(
      '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[=/\()%ยง!@#$%^&*])(?=.{8,})'
			),
			mediumRegex = new RegExp(
				'^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'
			);

		if (strongRegex.test(value)) {
			return "green";
		} else if (mediumRegex.test(value)) {
			return "orange";
		} else {
			return "red";
		}
	}

	function styleStrengthLine(color, value) {
		$(".line")
			.removeClass("bg-red bg-orange bg-green")
			.addClass("bg-transparent");
		
		if (value) {
			
			if (color === "red") {
				$(".line:nth-child(1)")
					.removeClass("bg-transparent")
					.addClass("bg-red");
			} else if (color === "orange") {
				$(".line:not(:last-of-type)")
					.removeClass("bg-transparent")
					.addClass("bg-orange");
			} else if (color === "green") {
				$(".line")
					.removeClass("bg-transparent")
					.addClass("bg-green");
			}
		}
	}

});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.sass

// helper
html
	box-sizing: border-box
	font-size: 62.5%

*
	padding: 0
	margin: 0
	-webkit-font-smoothing: antialiased
	-moz-osx-font-smoothing: grayscale
	box-sizing: inherit
	&::after, &::before
		box-sizing: inherit

// colors
$red: #e74c3c
$orange: #e67e22
$green: #2ecc71
$blue: #3498db
$white: #fff

$dark-blue-light: #34495e
$dark-blue-heavy: #2c3e50

.bg-transparent
	background-color: transparent !important
.bg-red
	background-color: $red !important
.bg-orange
	background-color: $orange !important
.bg-green
	background-color: $green !important

// mixins
%center
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)

=size($w, $h)
	width: $w
	height: $h

=font-size($sizeValue: 1.6)
	font-size: ($sizeValue * 10) + px
	font-size: $sizeValue + rem


// styles
body
	background-color: $blue
	.password-wrapper
		@extend %center
		width: 80%
		max-width: 320px
		border-radius: 5px
		background-color: $white
		overflow: hidden
		.input
			border: none
			padding: 10px 15px
			font: small-caption	
			+font-size(1.8)
			width: calc(100% - 50px)
			color: $dark-blue-light
			outline: none
			line-height: 1.5
		.icon-wrapper
			position: relative
			display: inline
			float: right
			+size(50px, 50px)
			background-color: $dark-blue-light
			transition: background-color .25s ease-out
			cursor: pointer
			.ion-eye,
			.ion-more
				+font-size(2.6)
				position: absolute
				top: 11px
				right: 12px
				color: #ccc
				transition: color .25s ease-out
			.ion-more
				right: 14px
			&:hover
				transition: background-color .25s ease-out
				background-color: $dark-blue-heavy
				.ion-eye, 
				.ion-more
					color: $blue
					transition: color .25s ease-in

		.strength-lines
			position: absolute
			bottom: 2px
			left: 0
			right: 0
			+size(calc(100% - 50px), 6px)
			z-index: 3
			.line
				position: absolute
				background-color: transparent
				height: 6px
				border-radius: 2px
				transition: background-color 0.25s ease-in
				&:not(:first-of-type):not(:last-of-type)
					left: 33%
					right: 33%
				&:first-of-type
					left: 4px
					right: 68%
				&:last-of-type
					left: 68%
					right: 4px

styles

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />