-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (124 loc) · 9.01 KB
/
index.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Site Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Poppins & Roboto Mono (from Google Fonts) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto+Mono&display=swap" rel="stylesheet">
<title>Padlock | Password Generator</title>
</head>
<body>
<header id="partMain">
<nav>
<div class="container">
<h2>Padlock 🔐</h2>
<p>A password generator.</p>
</div>
</nav>
<div class="container">
<h2 id="title">Generate a strong, easy to remember password.</h2>
<input type="text" spellcheck="false" id="password" autocomplete="off"><i class="bi bi-eye-slash"
id="togglePassword"></i>
<div class="password__more">
<div>
<p>It would take a computer about</p>
<h2 id="passwordCrackTime">n/a</h2>
<p>to crack your password.</p>
</div>
<div>
<button id="copyPassword">Copy Password</button>
<button id="generatePassword">Generate Password</button>
</div>
</div>
<div class="password__generator">
<label for="generator">Generation Method:</label>
<select title="Pick a password generator." name="generator" id="passwordType">
<option title="Traditional one word secure password generator." value="randomString">Random String Method</option>
<option title="XKCD inspired password generator from words." value="passphrase">XKCD (Passphrase) Method</option>
<option title="Pronouncable fake word password generator." value="pseudoword">Pseudoword Method</option>
<option title="Passphrase consisting of fake words." value="pseudoword+passphrase">Pseudoword + Passphrase Method</option>
</select>
</div>
<br>
<label><span id="passwordLengthText">Length:</span>
<input id="passwordLength" value="8" type="range" min="3" max="128"></label>
<div style="margin-top:1rem;" class="password__checkboxes">
<label><input checked id="includeUppercase" type="checkbox">Uppercase</label>
<label><input checked id="includeLowercase" type="checkbox">Lowercase</label>
<label><input checked id="includeDigits" type="checkbox">Digits</label>
<label><input id="includeSymbols" type="checkbox">Symbols</label>
<!--<label><input id="includeSpecialSymbols" type="checkbox">Special Symbols</label>-->
</div>
</div>
</header>
<div class="progress-bar">
<div class="progress" style="width:0%">
</div>
</div>
<section id="partInfo">
<div class="container">
<p>
The majority of hacking related breaches occur from weak and stolen passwords.
Having secure passwords is extremely important to safeguard your digital life.
Padlock is a password generator that helps you do just that, featuring multiple cryptopgrahically secure random generators which you can choose from for both secure passphrases and passwords.
The passwords generated with this app under optimum settings are impossible to cack.
You can also use it to check the strength of your existing passwords and how long on average it would take a hacker to crack.
The tool runs locally in your web browser and no information is ever sent to any servers.
This project is open source on Github under the permissive MIT license.
</p>
<h2>Which generator should I use?</h2>
<p>
<ul>
<li>
<strong>Random String Method:</strong> This is the most random generator that is available in the app. It generates a completely random string based on the checkboxes and length based on the slider. This is usually extremely strong, however they are not so easy to remember. Consider using this method if you have a password manager.
</li>
<li>
<strong>Pseudoword Method:</strong> A method that attempts to generate pronouncable and easy to read passwords. These features make it much more easier to remember than Random String Method. It is also generated based on the length of the slider but may not be guaranteed to always produce a result that is pronouncable. It is recommended that you generate multiple passwords and decide what sounds the best.
</li>
<li>
<strong>Passphrase Method:</strong> A passphrase generator based on the <a target="_blank" href="https://xkcd.com/936/">XKCD comic</a>. It uses words from the English dictionary and therefore is easy to remember with the added benefit of having more bits of entropy making it extremely hard to crack. However, not all websites and apps allow passwords that are this long. So passphrases are better suited for encrypting files, drives, etc..
</li>
<li>
<strong>Pseudoword + Passphrase Method:</strong> This method generates passphrases that consists of pseudowords (pronouncable yet not actual words). This makes it extremely secure than regular word passphrases as these words are not in any dictionary and therefore much more harder to guess. If you wish to secure extremely valuable assets such as drives and wallets, munged pseudoword passphrases are the way to go.
</li>
</ul>
</p>
<h2>Best practices.</h2>
<p>
<ul>
<li>The best way to use the generated passwords is to <b>modify them in ways known only to you</b>. Eg: make some letters capital, add symbols and numbers, or even combine two generated passwords.</li>
<li><b>Never reuse passwords</b>. Generate fresh new ones for each need and store them in a password manager or an encrypted file.</li>
<li><b>Use multi-factor authentication methods</b> whenever available. Using a password alone is not the safest of methods these days. Multi-factor authentication like email or message auth, biometrics, etc... makes it almost or truly impossible for an attacker to gain access to the account.</li>
<li><b>Don't use any personally identifiable information</b> in your passwords. Although they may be easier to remember, they could also be found online making it very easy to guess.</li>
<li><b>Rotate passwords often.</b> Keeping the same password for long periods of time gives attackers more time to guess or crack it.</li>
</ul>
</p>
</div>
</section>
<footer id="partBottom" class="container">
<p>Crafted with 💝 by <a href="https://alanvarghese.me">Alan</a> | 🔓 Open-Source on <a href="https://github.com/waterrmalann/padlock">GitHub</a></p>
</footer>
<!-- cryptographically secure Math.random() -->
<script defer src="js/math-random-polyfill.js"></script>
<!-- password strength checker -->
<script defer src="js/zxcvbn.js"></script>
<!-- pronouncable password generator -->
<script defer src="js/gpw.js"></script>
<!-- driver code -->
<script defer src="js/main.js"></script>
</body>
</html>