luci-mod-system: add password strength info

Show password strength info.

Signed-off-by: Florian Eckert <fe@dev.tdt.de>

1 files changed, 23 insertions, 1 deletions

diff --git a/modules/luci-mod-system/luasrc/view/admin_system/password.htm b/modules/luci-mod-system/luasrc/view/admin_system/password.htm
index 09cea4f74..6ca02a83c 100644
--- a/modules/luci-mod-system/luasrc/view/admin_system/password.htm
+++ b/modules/luci-mod-system/luasrc/view/admin_system/password.htm
@@ -2,6 +2,27 @@
 
 <input type="password" aria-hidden="true" style="position:absolute; left:-10000px" />
 
+<script type="text/javascript">
+function checkPassword() {
+	var pw1 = document.body.querySelector('[name="pw1"]');
+	var view  = document.getElementById("passstrength");
+
+	var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
+	var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
+	var enoughRegex = new RegExp("(?=.{6,}).*", "g");
+	if (false == enoughRegex.test(pw1.value)) {
+		view.innerHTML = '<%:Password strength%>: <span style="color:red"><%:More Characters%></span>';
+	} else if (strongRegex.test(pw1.value)) {
+		view.innerHTML = '<%:Password strength%>: <span style="color:green"><%:Strong%></span>';
+	} else if (mediumRegex.test(pw1.value)) {
+		view.innerHTML = '<%:Password strength%>: <span style="color:orange"><%:Medium%></span>';
+	} else {
+		view.innerHTML = '<%:Password strength%>: <span style="color:red"><%:Weak%></span>';
+	}
+	return true;
+}
+</script>
+
 <div class="cbi-map">
 	<h2><%:Router Password%></h2>
 
@@ -13,7 +34,7 @@
 		<div class="cbi-value">
 			<label class="cbi-value-title" for="image"><%:Password%></label>
 			<div class="cbi-value-field">
-				<input type="password" name="pw1" /><!--
+				<input type="password" name="pw1" onkeyup="checkPassword()"/><!--
 				--><button class="cbi-button cbi-button-neutral" title="<%:Reveal/hide password%>" aria-label="<%:Reveal/hide password%>" onclick="var e = this.previousElementSibling; e.type = (e.type === 'password') ? 'text' : 'password'">∗</button>
 			</div>
 		</div>
@@ -23,6 +44,7 @@
 			<div class="cbi-value-field">
 				<input type="password" name="pw2" onkeydown="if (event.keyCode === 13) submitPassword(event)" /><!--
 				--><button class="cbi-button cbi-button-neutral" title="<%:Reveal/hide password%>" aria-label="<%:Reveal/hide password%>" onclick="var e = this.previousElementSibling; e.type = (e.type === 'password') ? 'text' : 'password'">∗</button>
+			<div id="passstrength" class="cbi-value-description"></div>
 			</div>
 		</div>
 	</div>