misp-modules/website/app/templates/macros/check_password.html

80 lines
2.2 KiB
HTML
Raw Normal View History

2024-02-07 14:39:19 +01:00
{% macro password_check(field, level) %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
<script>
$('#submit').attr('disabled', true);
$('#{{ field }}').after('<progress value="0" max="4" id="password-strength-meter"></progress><p id="password-strength-text"></p>');
if(!$('#{{ field }}').length) {
$('#submit').attr('disabled', false);
}
var strength = {
0: "Bad",
1: "Okay",
2: "Good",
3: "Very Good",
4: "Strong"
}
flag = true
var meter = document.getElementById('password-strength-meter');
meter.hidden=true
var text = $('#password-strength-text');
$('#{{ field }}').keyup(check_pwd);
$('#{{ field }}').change(check_pwd);
function check_pwd(){
if (flag){
meter.hidden = false
flag = false
}
var result = zxcvbn($(this).val());
// Update the password strength meter
meter.value = result.score;
if(result.score >= 2) {
$('#submit').attr('disabled', false);
} else {
$('#submit').attr('disabled', true);
}
// Update the text indicator
if ($(this).val() !== "") {
$(text).html("Strength: " + strength[result.score]);
} else {
$(text).html("");
}
}
</script>
<style>
progress {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10 auto 1em;
width: 100%;
height: 0.5em;
background-color: rgba(0, 0, 0, 0.1);
}
/* Chrome */
progress::-webkit-progress-value {
background: rgba(0, 0, 0, 0.1);
}
/* Webkit based browsers */
progress[value^="1"]::-webkit-progress-value { background-color: red; }
progress[value^="2"]::-webkit-progress-value { background-color: yellow; }
progress[value^="3"]::-webkit-progress-value { background-color: orange; }
progress[value^="4"]::-webkit-progress-value { background-color: green; }
/* Gecko based browsers */
progress[value^="1"]::-moz-progress-bar { background-color: red; }
progress[value^="2"]::-moz-progress-bar { background-color: yellow; }
progress[value^="3"]::-moz-progress-bar { background-color: orange; }
progress[value^="4"]::-moz-progress-bar { background-color: green; }
</style>
{% endmacro %}