luci/modules/luci-mod-system/luasrc/view/admin_system/password.htm
Florian Eckert 7383bf054a luci-mod-system: add password strength info
Show password strength info.

Signed-off-by: Florian Eckert <fe@dev.tdt.de>
2019-01-09 10:25:41 +01:00

59 lines
2.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%+header%>
<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>
<div class="cbi-section-descr">
<%:Changes the administrator password for accessing the device%>
</div>
<div class="cbi-section-node">
<div class="cbi-value">
<label class="cbi-value-title" for="image"><%:Password%></label>
<div class="cbi-value-field">
<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>
<div class="cbi-value">
<label class="cbi-value-title" for="image"><%:Confirmation%></label>
<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>
</div>
<div class="cbi-page-actions">
<button class="btn cbi-button-apply" onclick="submitPassword(event)"><%:Save%></button>
</div>
<script type="application/javascript" src="<%=resource%>/view/system/password.js"></script>
<%+footer%>