-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.html
306 lines (286 loc) · 19.6 KB
/
homepage.html
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="./styles/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="item header">
<div class="header-container">
<div class="logo">
<img src="./Assets/uofu.png" width="75" alt="logo">
</div>
<div class="heading">
<h1> Regex for Strong Passwords</h1>
</div>
<div class="logo">
<img src="./Assets/js.png" alt="js pic">
</div>
</div>
</div>
<div class="item sidebar">
<p class="title main-header">Table of contents</p>
<div class="table-contents">
<ul id="table-contents">
<li><a href="#" data-target="#section1">Introduction to Regular Expressions</a></li>
<li><a href="#" data-target="#section2">Decoding the Strong Password Regex</a></li>
<li><a href="#" data-target="#section3">Analyzing Each Component</a></li>
<ol>
<li><a href="#" data-target="#section-a">Minimum Length Requirement</a></li>
<li><a href="#" data-target="#section-b">Combination of Characters</a></li>
<li><a href="#" data-target="#section-c">Including Special Characters</a></li>
</ol>
<li><a href="#" data-target="#section4">Constructing the Complete Pattern</a></li>
<li><a href="#" data-target="#section5">Application in Real Projects</a></li>
<li><a href="#" data-target="#section6">test</a></li>
<li><a href="#" data-target="#section7">Summary</a></li>
</ul>
</div>
</div>
<div class="item item2">
<img src="./Assets/regex.jpeg" alt="regex">
<p class="title content-header">Introduction</p>
<h1 id="section1">What are Regular Expressions?</h1>
<article>Regular expression is a group of characters or symbols which is used to find a specific
pattern from a text.
A regular expression is a pattern that is matched against a subject string from left to right.
The word "Regular expression" is a
mouthful, you will usually find the term abbreviated as "regex" or "regexp". Regular expression
is used for replacing a text within
a string, validating form, extract a substring from a string based upon a pattern match, and so
much more.
Imagine you are writing an application and you want to set the rules for when a user chooses
their username. We want to
allow the username to contain letters, numbers, underscores and hyphens. We also want to limit
the number of
characters in username so it does not look ugly. We use the following regular expression to
validate a username:</article>
<img src="./Assets/regex pattern sample2.jpg" alt="example">
<article>Above regular expression can accept the strings <span>john_doe,</span> <span>jo-hn_doe
</span><span>and john12_as.</span> It does
not match <span>Jo</span> because that string
contains uppercase letter and also it is too short.</article>
<p class="subtitle">Why are Regular Expressions Important in Web Development?</p>
<article>Regular expressions play a crucial role in web development by enabling developers to
validate, extract,
and manipulate textual data efficiently. They are used for tasks like form validation, data
validation,
parsing, and more.</article>
<h1 id="section2">Decoding the Strong Password Regex</h1>
<article>In today's digital age, the security of our online accounts and personal information is
paramount. One of the fundamental ways to safeguard our online presence is by using strong and
secure passwords. To enforce the creation of strong passwords, websites and applications often
employ regular expressions (regex) to define specific criteria that passwords must meet. In this
article, we will delve into the concept of strong password regex patterns, understanding their
necessity, exploring common patterns, and defining the criteria for a strong password.</article>
<p class="subtitle">Understanding the Need for Strong Passwords</p>
<article>In the realm of cybersecurity, weak passwords are akin to leaving the front door of your
house wide open. Cyber attackers employ various methods to crack weak passwords and gain
unauthorized access to accounts. This is where the importance of strong passwords comes into
play. A strong password is one that is complex, difficult to guess, and resistant to brute-force
attacks.
</article>
<p class="examples"><strong>A week password</strong> most likely to be a word that is in the dictionary, or
a common word followed by a simple number sequence. like <span>password123</span> or <span>123456</span>
<strong>A strong password</strong> is one that is complex, difficult to guess, and resistant to
brute-force attacks. like <span>pass@1word!$*/</span> and so on.
</p>
<p class="subtitle">Exploring the Strong Password Regex Pattern</p>
<article>This section introduces the regex pattern for strong passwords that you'll be
dissecting throughout the
tutorial. It prepares you for understanding the various components and criteria of the
pattern.<span>In the following example of password regex pattern, you'll notice a combination of
letters, numbers, and special characters. I know it feels like hakuna matata stuff but don't worry
we will break it down.</span></article>
<p class="examples">
/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).{8,}$/
</p>
<img src="./Assets/regex pattern sample.jpg" alt="regex sample">
</article>
<h2 id="section3">Analyzing Each Component</h2>
<article>You'll delve into the specific requirements that define a strong password, such as
length, character
combination, and the inclusion of special characters. These criteria contribute to a more
secure
authentication process. Let's take a closer look at each of these components.
</article>
<article>
<h2 id="section-a">Minimum Length Requirement</h2>
To ensure the strength of passwords, a common practice is to set a minimum length requirement. This
means that
passwords must contain a certain number of characters to be considered strong. In the example pattern
below,
the <span class="modifier">{8,}</span> specifies that the password must be at least 8 characters long.
<p class="examples">
/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*\W)(?!.* ).<span class="modifier">{8,}</span>$/
</p>
<p>In this case as you can see the highlighted part of the regex pattern is <code>.{8,}</code> which
means
that the password must be at least 8 characters long. If you want to set a maximum length for the
password, you can use <code>.{8,16}</code> which means that the password must be at least 8
characters
long and can't be longer than 16 characters.</p>
</article>
<article>
<h2 id="section-b">Combination of Characters</h2>
Strong passwords often require a combination of different character types, such as uppercase letters,
lowercase letters, digits, and special characters. This diversity increases complexity and security. The
example pattern below enforces a combination of these character types.
<p class="examples">
/^(?=.*<span class="digit">[0-9]</span>)(?=.*<span class="lowercase">[a-z]</span>)(?=.*<span
class="uppercase">[A-Z]</span>)(?=.*\W)(?!.* ).{8,}$/
</p>
<p>and all these highlighted parts of the regex pattern are the conditions for the password which
combine all characters. The password
must contain at least one digit, one lowercase letter, one uppercase letter, and so on.</p>
</article>
<article>
<h2 id="section-c">Including Special Characters</h2>
Special characters like symbols and punctuation marks add an extra layer of security to passwords. These
characters are often harder to guess and can thwart various hacking attempts. The example pattern below
ensures the inclusion of at least one special character.
<p class="examples">
/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*<span class="special-char">\W</span>)(?!.* ).{8,}$/
</p>
<p>here <strong>\W</strong> refers to any non-word character. It matches any character that is not a
word character from the basic Latin alphabet. Equivalent to <code>[^A-Za-z0-9_]</code>. which means
that the password must contain at least one special character.</p>
</article>
<h1 id="section4">Constructing the Complete Pattern</h1>
<article> Now that you've explored the individual components of a strong password regex pattern, it's time
to put
them
all together. The following complete pattern combines the criteria for a strong password, including
minimum
length, a variety of character types, and the presence of special characters. This pattern can be used
to
validate strong passwords.
<p class="examples">
/^(?=.*<span class="digit">[0-9]</span>)(?=.*<span class="lowercase">[a-z]</span>)(?=.*<span
class="uppercase">[A-Z]</span>)(?=.*<span class="special-char">\W</span>)(?!.* ).<span
class="modifier">{8,16}</span>$/
</p>
<p>And now we have a complete regex pattern for strong passwords. This pattern can be used to validate
strong passwords.</p>
</article>
<h1 id="section5">Application in Real Projects</h1>
<article>Understanding regex patterns for strong passwords is essential for enhancing security in various
applications.
Whether you're developing a registration form, user account system, or any other scenario requiring
secure
password creation, applying this regex pattern can greatly improve the resilience of your system against
common password-related vulnerabilities.
</article>
<article>
<h2>Real-World Example of Strong Password Regex Pattern</h2>
<p>Let's explore a real-world example of a strong password regex pattern used in an application:</p>
<span>Consider the following JavaScript code snippet:</span><br>
<div class="code-example">
<span style="color: #e91e63;">function</span> <span style="color: #6200ea;">validatePassword</span>() {<br>
<span style="color: #3f51b5;">// Get the value entered in the password input field</span><br>
<span style="color: #009688;">const</span> passwordInput = <span style="color: #673ab7;">document</span>.<span style="color: #6200ea;">getElementById</span>('passwordInput').<span style="color: #6200ea;">value</span>;<br>
<span style="color: #3f51b5;">// Define a regex pattern for strong passwords</span><br>
<span style="color: #009688;">const</span> regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@#$%^&!])[A-Za-z\d@#$%^&!]{8,}$/;<br>
<span style="color: #3f51b5;">// Test the entered password against the regex pattern</span><br>
<span style="color: #e91e63;">if</span> (regex.test(passwordInput)) {<br>
<span style="color: #3f51b5;">// Display a success message if the password is valid</span><br>
<span style="color: #673ab7;">document</span>.<span style="color: #6200ea;">getElementById</span>('validationResult').<span style="color: #6200ea;">textContent</span> = <span style="color: #a10000;">'Password is valid!'</span>;<br>
<span style="color: #673ab7;">document</span>.<span style="color: #6200ea;">getElementById</span>('validationResult').<span style="color: #6200ea;">style.color</span> = <span style="color: #00a300;">'green'</span>;<br>
} <span style="color: #e91e63;">else</span> {<br>
<span style="color: #3f51b5;">// Display an error message if the password is invalid</span>
<span style="color: #673ab7;">document</span>.<span style="color: #6200ea;">getElementById</span>('validationResult').<span style="color: #6200ea;">textContent</span> = <span style="color: #a10000;">'Password is invalid!'</span>;<br>
<span style="color: #673ab7;">document</span>.<span style="color: #6200ea;">getElementById</span>('validationResult').<span style="color: #6200ea;">style.color</span> = <span style="color: #ff0000;">'red'</span>;<br>
}
}
</div>
<p>This code constructs a regex pattern that enforces a strong password policy, including minimum and
maximum
length, required uppercase and lowercase letters, numerics, and special characters. It's a practical
example of
how regex patterns can be applied in real-world applications for enhanced password security.</p>
</article>
<h1 id="section6">test</h1>
<div class="test">
<code>minimum 8 characters with at least one letter, one digit, and one special character</code><br>
<input type="password" id="passwordInput" placeholder="Enter a password">
<button onclick="validatePassword()">Validate</button>
<p id="validationResult"></p>
</div>
<h1 id="section7">Summary</h1>
<p>I want to remind you of some basic rules of regex patterns before I summarize this article.</p>
<p><strong>Be careful with these rules:</strong></p>
<div class="summary-message">
<ol>
<li><strong> indicate '^' at the beginning of the string. indicate '$' at the end of
the string.</strong>
If we don't use these ^ & $, the regex will not be able to determine the maximum length of the
password.
In the above example, we have a condition that the password can't be longer than 16 characters.
To
make
that condition work, we have used these ^ & $.</li>
<li><strong>Remove maximum length restriction:</strong> Instead of <code>.{8,16}</code>, if we used
<code>.{8,}</code>,
it would mean that the password must be at least 8 characters long. So, there will not be any
condition for
checking the maximum length of the password.
</li>
<li><strong>Don't accept any number (digit):</strong> Instead of <code>(?=.*[0-9])</code>, if we
used
<code>(?!.*[0-9])</code>,
it would mean that the password must not contain any digit from 0 to 9 (Difference with the
<code>(?=.*[0-9])</code> is
the use of <code>!</code> instead of <code>=</code>).
</li>
<li><strong>Don't accept any special character:</strong> Instead of <code>(?=.*\W)</code>, if we
used
<code>(?!.*\W)</code>,
it would mean that the password must not contain any special characters (The difference with the
<code>(?=.*\W)</code> is
the use of <code>!</code> instead of <code>=</code>).
</li>
<li><strong>Alternative Syntax for number (digit):</strong> Instead of <code>(?=.*[0-9])</code>, we
could have used
<code>(?=.*\d)</code>. <code>(?=.*\d)</code> also means that the password must contain a single
digit from 0 to 9.
</li>
</ol>
</div>
<p>So, that's all for this article. I hope you have understood the concept of strong password regex pattern. Thanks for reading.</p>
<p id="about"><a id="popup-link" href="#">About the author</p></a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3>About the author</h3>
<div class="author">
<img class="rounded-circle mb-3 fit-cover" width="130" height="130" src="./Assets/author.jpeg" alt="author picture">
</div>
<div class="paragraph">
<p> My name is <span>Solomon Tegegne</span> I am currently student @ <span class="red">University of Utah Coding Bootcamp.</span> I am
a full-stack web developer. you can find me on the following social media.</p>
</div>
<div class="contactme">
<div class="socialmedia">
<a href="hhttps://www.linkedin.com/in/solomon-tegegne-7b347027a/"><img src="./Assets/linkedin.png" width="50" alt="linkedin img"></a>
</div>
<div class="socialmedia">
<a href="https://github.com/solowon27"><img src="./Assets/github.png" width="50" alt="github pic"></a>
</div>
<div class="socialmedia">
<a href="https://twitter.com/blk_wyt?s=21"><img src="./Assets/twitter.png" width="50" alt="twitter pic"></a>
</div>
</div>
</div>
</div>
</div>
<div class="item footer">
<p>Solomon Tegegne © Aug, 2023 with <span id="footer">University of Utah Coding Bootcamp</span></p>
</div>
</div>
<script src="./styles/js/index.js"></script>
</body>
</html>