luci-mod-system: add password strength info

Show password strength info.

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

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 09cea4f74af50e31f772e42fc8a2b285e34a34fe..6ca02a83c118aa3107c26a6280b4889f679f351c 100644 (file)
--- 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>