password.pt
2.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<tal:block tal:define="name name|field.name;
oid oid|field.oid;">
<div class="input">
<input
type="password"
name="${name}"
onkeyup="checkPasswordStrength${oid}();"
value="${field.widget.redisplay and cstruct or ''}"
tal:attributes="style style|field.widget.style;
class string: form-control ${css_class|field.widget.css_class or ''};
attributes|field.widget.attributes|{};"
id="${oid}"/>
<div class="checkbox">
<label>
<input type="checkbox" id="view${oid}">
<span>Show Password</span>
</label>
</div>
<div id="${oid}-password-strength-status"></div>
</div>
<style>
#password-strength-status {
padding: 5px 10px;
border-radius: 4px;
margin-top: 5px;
}
</style>
<script type="text/javascript">
$('#view${oid}').change(function(){
if ($(this).prop('checked')==true){
$('#${oid}').attr('type','text');
}
else {
$('#${oid}').attr('type','password');
}
});
function checkPasswordStrength${oid}() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<,\),\(,{,},\[,\]])/;
var password = $('#${oid}').val().trim();
if (password.length <= 8) {
$('#${oid}-password-strength-status').removeClass();
$('#${oid}-password-strength-status').addClass('label label-danger');
$('#${oid}-password-strength-status').html("Weak (should be atleast 8 characters.)");
} else {
if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
$('#${oid}-password-strength-status').removeClass();
$('#${oid}-password-strength-status').addClass('label label-success');
$('#${oid}-password-strength-status').html("Strong");
}
else {
$('#${oid}-password-strength-status').removeClass();
$('#${oid}-password-strength-status').addClass('label label-warning');
$('#${oid}-password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
</script>
</tal:block>