mirror of https://github.com/MISP/misp-modules
80 lines
2.2 KiB
HTML
80 lines
2.2 KiB
HTML
{% 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 %}
|