[4.0] Added password strength checker and viewer

administrator/templates/atum/scss/template.scss

@@ -114,4 +114,4 @@
 // Quickicon specific
 .message-alert {
   text-align: right !important;
-}
+}

components/com_users/tmpl/registration/default.php

@@ -71,3 +71,59 @@
 		<?php echo HTMLHelper::_('form.token'); ?>
 	</form>
 </div>
+<script type="text/javascript">
+	$('input[type="password"]').eq(0).parent().parent().append('<div id="password-strength"> <div class="box box1"> <div class="bar-text"></div><div class="bar"></div></div><div class="box box2"> <div class="bar"></div></div><div class="box box3"> <div class="bar"></div></div><div class="box box4"> <div class="bar"></div></div></div>');
+	var result = $("#password-strength");
+
+	$('input[type="password"]').eq(0).keyup(function() {
+		$(".bar-text").html(checkStrength($('input[type="password"]').val()));
+	});
+
+	function checkStrength(password) {
+		//initial strength
+		var strength = 0;
+
+		if (password.length == 0) {
+			result.removeClass();
+			return "";
+		}
+		//if the password length is less than 4, return message, in line with existing validation.
+		if (password.length < 4) {
+			result.removeClass();
+			result.addClass("invalid");
+			return "Invalid";
+		}
+
+		//length is ok, lets continue.
+
+		//if length is 8 characters or more, increase strength value
+		if (password.length > 4) strength += 1;
+
+		//if password contains both lower and uppercase characters, increase strength value
+		if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1;
+
+		//if it has one special character, increase strength value
+		if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
+
+		//if it has two special characters, increase strength value
+		if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/))
+		strength += 1;
+
+		//now we have calculated strength value, we can return messages
+
+		//if value is less than 2
+		if (strength < 2) {
+			result.removeClass();
+			result.addClass("weak");
+			return "Weak";
+		} else if (strength == 2) {
+			result.removeClass();
+			result.addClass("medium");
+			return "Medium";
+		} else {
+			result.removeClass();
+			result.addClass("strong");
+			return "Strong";
+		}
+	}
+</script>

templates/cassiopeia/scss/blocks/_form.scss

@@ -104,3 +104,134 @@ td .form-control {
 .form-control-feedback {
   display: block;
 }
+
+// Password strength block
+
+#password-strength {
+  display: block;
+  position: relative;
+  font-size: 0px;
+  top: 5px;
+  max-width: 240px;
+}
+.box {
+  position: relative;
+  width: 25%;
+  height: 25px;
+  display: inline-block;
+  background-color: #e4e4e4;
+  text-align: center;
+  div.bar-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+    font-size: 13px;
+    z-index: 3;
+    line-height: 25px;
+    overflow: visible;
+  }
+  div.bar {
+    position: absolute;
+    width: 0%;
+    height: 100%;
+    z-index: 2;
+    -moz-transition: 1s;
+    -o-transition: 1s;
+    -webkit-transition: 1s;
+    transition: 1s;
+  }
+}
+.invalid {
+  .box.box1 {
+    div.bar {
+      background: #FF0000;
+      width: 100%;
+    }
+    div.bar-text {
+      color: #fff;
+    }
+  }
+}
+.box.box1 {
+  border-radius: 5px 0px 0px 5px;
+  div.bar {
+    border-radius: 5px 0px 0px 5px;
+  }
+}
+.box.box4 {
+  border-radius: 0px 5px 5px 0px;
+  div.bar {
+    border-radius: 0px 5px 5px 0px;
+  }
+}
+.weak {
+  .box.box1 {
+    div.bar-text {
+      color: #fff;
+    }
+    div.bar {
+      background: #E66C2C;
+      width: 100%;
+    }
+  }
+  .box.box2 {
+    div.bar {
+      background: #E66C2C;
+      width: 100%;
+    }
+  }
+}
+.medium {
+  .box.box1 {
+    div.bar-text {
+      color: #fff;
+    }
+    div.bar {
+      background: #2D98F3;
+      width: 100%;
+    }
+  }
+  .box.box2 {
+    div.bar {
+      background: #2D98F3;
+      width: 100%;
+    }
+  }
+  .box.box3 {
+    div.bar {
+      background: #2D98F3;
+      width: 100%;
+    }
+  }
+}
+.strong {
+  .box.box1 {
+    div.bar-text {
+      color: #fff;
+    }
+    div.bar {
+      background: #006400;
+      width: 100%;
+    }
+  }
+  .box.box2 {
+    div.bar {
+      background: #006400;
+      width: 100%;
+    }
+  }
+  .box.box3 {
+    div.bar {
+      background: #006400;
+      width: 100%;
+    }
+  }
+  .box.box4 {
+    div.bar {
+      background: #006400;
+      width: 100%;
+    }
+  }
+}