-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.htm
74 lines (68 loc) · 2.82 KB
/
index.htm
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Password Strength Checker</title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="style/demo.css" rel="stylesheet" type="text/css" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="js/pschecker.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Demo code
$('.password-container').pschecker({ onPasswordValidate: validatePassword, onPasswordMatch: matchPassword });
var submitbutton = $('.submit-button');
var errorBox = $('.error');
errorBox.css('visibility', 'hidden');
submitbutton.attr("disabled", "disabled");
//this function will handle onPasswordValidate callback, which mererly checks the password against minimum length
function validatePassword(isValid) {
if (!isValid)
errorBox.css('visibility', 'visible');
else
errorBox.css('visibility', 'hidden');
}
//this function will be called when both passwords match
function matchPassword(isMatched) {
if (isMatched) {
submitbutton.addClass('unlocked').removeClass('locked');
submitbutton.removeAttr("disabled", "disabled");
}
else {
submitbutton.attr("disabled", "disabled");
submitbutton.addClass('locked').removeClass('unlocked');
}
}
});
</script>
</head>
<body>
<div class="wrapper">
<div class="logo">
<img src="images/logo.jpg" alt="logo" /></div>
<p>
<span class="error">Password must be 8 characters long</span>
</p>
<div class="password-container">
<p>
<label>
Enter Password:</label>
<input class="strong-password" type="password" />
</p>
<p>
<label>
Confirm Password:</label>
<input class="strong-password" type="password" />
</p>
<p>
<a class="submit-button locked" href="#">Submit</a>
</p>
<div class="strength-indicator">
<div class="meter">
</div>
Strong passwords contain 8-16 characters, do not include common words or names,
and combine uppercase letters, lowercase letters, numbers, and symbols.
</div>
</div>
</div>
</body>
</html>