checked_password.pt
3.83 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div i18n:domain="deform" tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style">
${field.start_mapping()}
<div class="input">
<input type="password"
name="${name}"
onkeyup="checkPasswordStrength();"
value="${field.widget.redisplay and cstruct or ''}"
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};"
id="${oid}"
i18n:attributes="placeholder"
placeholder="Password"/>
<div class="checkbox">
<label>
<input type="checkbox" id="view${field.oid}">
<span>Show Password</span>
</label>
</div>
</div>
<div class="input">
<input type="password"
name="${name}-confirm"
onkeyup="checkPasswordStrength${oid}();"
value="${field.widget.redisplay and confirm or ''}"
tal:attributes="class string: form-control ${css_class or ''};
style style;
confirm_attributes|field.widget.confirm_attributes|{};"
id="${oid}-confirm"
i18n:attributes="placeholder"
placeholder="Confirm Password"/>
<div class="checkbox">
<label>
<input type="checkbox" id="view${field.oid}-confirm">
<span>Show Password</span>
</label>
</div>
<div id="${oid}-confirm-password-strength-status"></div>
</div>
${field.end_mapping()}
<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');
}
});
$('#view${oid}-confirm').change(function(){
if ($(this).prop('checked')==true){
$('#${oid}-confirm').attr('type','text');
}
else {
$('#${oid}-confirm').attr('type','password');
}
});
function checkPasswordStrength${oid}() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<,\),\(,{,},\[,\]])/;
var passworda = $('#${oid}').val().trim();
var password = $('#${oid}-confirm').val().trim();
if (password.length <= 8) {
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-danger');
$('#${oid}-confirm-password-strength-status').html("Weak (should be atleast 8 characters.)");
} else {
if (passworda != password){
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-danger');
$('#${oid}-confirm-password-strength-status').html("Password do not match.");
}
else if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-success');
$('#${oid}-confirm-password-strength-status').html("Strong");
}
else {
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-warning');
$('#${oid}-confirm-password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
</script>
</div>