-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (154 loc) · 6.28 KB
/
Copy pathindex.html
File metadata and controls
157 lines (154 loc) · 6.28 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en" class="hide-scrollbar">
<head>
<!-- ### META ### -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Manuel De Simone">
<!-- ### TITLE ### -->
<title>Password Strength Checker</title>
<!-- ### FAVICON ### -->
<link rel="icon" type="image/svg+xml" href="./images/key.svg">
<!-- ### CSS ### -->
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/icofont/icofont.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<div id="page-container">
<!-- ### HEADER ### -->
<header class="masthead">
<div class="page-title">
<div class="container">
<div class="row">
<!-- ### FIELD INPUT ### -->
<div class="col-md-8">
<h2 class="mb-2 title-color text-white">Password Strength Checker</h2>
<p class="mb-4 text-white">This tool is designed to assess the strength of password strings.
The
instantaneous visual feedback provides the user a means to improve the strength of their
passwords, with a hard focus on breaking the typical bad habits of faulty password
formulation.</p>
<p class="danger">Any entered passwords are only processed locally. In other words, nothing
that
you type into the password field will ever be sent online or recorded anywhere.</p>
<form id="checkpw" data-toggle="validator" role="form">
<!-- ### PASSWORD INPUT ### -->
<div class="new-user">
<div class="form-group password-group">
<div class="form-inline row">
<!-- ### PASSWORD 1 ### -->
<div class="col-sm-6">
<p class="text-white">Create a strong password:</p>
<div class="input-group">
<span class="input-group-addon"><i
class="icofont-key ico-size"></i></span>
<input type="password" id="password" data-toggle="password"
class="form-control border-radius-right" name="passwordType"
onkeyup="validatePassword();checkPassword();"
oninput="confirmPassword();" required>
</div>
<div class="help-block"></div>
</div>
<!-- ### PASSWORD 2 ### -->
<div class="col-sm-6">
<p class="text-white">Confirm your password:</p>
<div class="input-group">
<span class="input-group-addon"><i
class="icofont-key ico-size"></i></span>
<input type="password" id="password2"
class="form-control border-radius-right" data-match="#password"
onkeyup="checkPassword();" oninput="confirmPassword();"
required>
</div>
<div class="help-block"></div>
</div>
</div>
<!-- ### PASSWORD STRENGTH ### -->
<div class="progress mt-3 input-group">
<span class="input-group-addon border-right"><i
class="icofont-muscle ico-size"></i></span>
<span id="passwordStrength" class="progress-bar" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></span>
</div>
<!-- ### SHOW PASSWORD <div id="showPassword"></div> ### -->
</div>
</div>
<!-- ### CHECK BUTTON ### -->
<!-- <span id="confirm-message2" class="confirm-message"></span> -->
<div class="form-group">
<input type="button" id="btn-confirm" class="btn btn-main btn-round"
data-toggle="modal" data-target="#ModalCenter" value="Check Score"
disabled></input>
</div>
<!-- ### SCORE MODAL ### -->
<div class="modal fade" id="ModalCenter" tabindex="-1" role="dialog"
aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLongTitle">Password Scoring</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- ### PASSWORD SCORE ### -->
<div class="modal-body">
<canvas id="confetti"></canvas>
<p id="value-text" class="text-bold score">Password Score is
<span id="value-digit"></span>
</p>
<span id="confirmMessage" class="confirm-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-main btn-button"
onClick="location.href='index.html'"> <i
class="icofont-refresh mr-2 ico-size"></i> Restart</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- ### CHECKER LIST ### -->
<div class="col-md-4">
<div class="block text-center">
<div class="icon d-flex align-items-center text-center">
<h3 class="mt-3 mb-3 text-white">Conditions for a valid password:</h3>
</div>
<div class="jumbotron-fluid nopadding">
<div class="container">
<ul class="list-group" id="requirements">
<li id="length" class="list-group-item" data-type="check">12 characters</li>
<li id="lowercase" class="list-group-item" data-type="check">1 lowercase
letter
</li>
<li id="uppercase" class="list-group-item" data-type="check">1 uppercase
letter
</li>
<li id="number" class="list-group-item" data-type="check">1 numerical number
</li>
<li id="special" class="list-group-item" data-type="check">1 special
character
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© <span id="currentYear"></span> Manuel De Simone. All rights reserved.</p>
</footer>
</header>
</div>
<!-- ### VENDOR JS ### -->
<script src="plugins/jquery/jquery.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/confetti/confetti.js"></script>
<!-- ### CUSTOM JS ### -->
<script src="js/password.js"></script>
</body>
</html>