-
Notifications
You must be signed in to change notification settings - Fork 2
/
help.html
200 lines (182 loc) · 7.32 KB
/
help.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help</title>
<link rel="stylesheet" href="css/pwa.css" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9946044372357745"
crossorigin="anonymous"></script>
<script>
// window.onload = function() {
// window.scrollTo(0, 0);
// const history = localStorage.getItem("history");
// console.log(`help: history= ${history}`)
// const topBanner = document.getElementById("topBanner");
// const title = document.getElementById("title");
// // const topBannerHeight = topBanner.offsetHeight;
// if (history !== null) {
// topBanner.style.display = "none";
// title.style.marginTop = "0";
// } else {
// localStorage.setItem("history", "loaded");
// topBanner.style.display = "block";
// // title.style.marginTop = `${topBanner.offsetHeight}`;
// title.style.marginTop = `4rem`;
// }
// }
</script>
<script>
// document.getElementById("backButton").addEventListener("click", () => {
// console.log("btn back clicked!");
// // window.close();
// });
</script>
</head>
<!-- <body style="background-color: rgb(175, 231, 191);"> -->
<body class="help">
<div id="helpBanner" class="topIcons"
style="justify-content: left; margin-bottom: 3rem;">
<img class="btn back" src="icons/back.svg" title="Back">
<script>
document.querySelector(".btn.back").addEventListener("click", () => {
window.close();
});
</script>
</div>
<br><br>
<div id="title">
<h1>Start using HPASS:</h1>
</div>
<ol>
<li> Enter the <strong>Master Password</strong> (initially blank).
<li> Enter password hint in the <strong>Enter Hint</strong> box.
<li> Press Enter key or click the right arrow
<img src="icons/generate.svg" style="width:2rem; height:0.8rem;"/>
button in the top corner. It will be automatically copied to the clipboard.
<li> Paste the password where you need it.</li>
</ol>
<br>
<p><strong>...or read on for more...</strong></p>
<h1>Installation and Settings</h1>
When you first visit the <a href="https://hpass.app">HPASS site</a>,
<em>generic settings</em> are initialized to default values, encrypted (using Master Password as a key),
and saved locally on your device.
<br><br>
<ul class="">
<li>
<strong>Secret</strong> (🤫): is initialized to a random string -
like "ypiGG8s1nUCNcv5l". This generate unique passwords for each user.
You can keep it as is, or change it to a longer string for enhanced security
using HPASS, or online random string generators
(e.g. <a href="https://www.random.org/strings">random.org/strings</a>).
Alternatively, you can change it to a memorable customized value, but
it would likely be less secure.
</li>
<li><strong>Special Character</strong> (<span style="color: red">🌶</span>):
"_" i.e. underscore; multiple characters are allowed in this field.</li>
<li><strong>Length</strong> (📏): 15</li>
</ul>
<br><br>
<strong>Special Character</strong> and
<strong>Length</strong> values are selected to satisfy most sites.
You may need to change these values if some site enforces
inconsistent password requirements e.g. doesn't allow "_",
requires a password shorter than 15 characters, etc.
These will be <em>site-specific settings</em>.
<hr>
<p style="background-color: yellow;">
<strong>IMPORTANT:</strong> Keep <em>generic</em> and <em>site-specific settings</em>
stored safely. You'll need them to generate the same passwords if
your device or device's data are lost.
</p>
<hr>
<p>
Click the gear button (<img src="icons/gear.svg" style="width:1rem; height:1rem;">)
to view, modify, save, and export / import settings.
</p>
<h2>Multiple devices</h2>
To generate the same passwords, have the same settings on each device.
To make synchronization easier, <em>settings</em> can be exported
(<img src="icons/export.svg" class="hbtn"/>) - encrypted or plain text -
from one device and imported
(<img src="icons/import.svg" class="hbtn"/>) on another using
simple <a href="https://en.wikipedia.org/wiki/JSON">JSON format</a>.
<h2>Extra security</h2>
The two additional settings provide an extra layer of security
if your device and <em>settings</em> are compromised:
<br><br>
<ul>
<li><strong>Top Secret</strong> (🤐): any string (default: empty string)</li>
<li><strong>Warm up</strong> (🔥): the number of warm up rounds
for
(<a href="https://en.wikipedia.org/wiki/Pseudorandom_number_generator">PRNG</a>)
(default: 0)</li>
</ul>
<br>
They aren't stored, and discarded at the session's end or page reload.
You to enter them every time to generate passwords.
This is a small price in for high-value passwords
(bank accounts, social security, etc.) if you're concerned about
data security on your device.
<p>
The password prompt or hint entered in the <strong>Enter Hint</strong> box at
the top of the screen, and
<strong>Secret</strong>, <strong>Special Character</strong>,
<strong>Length</strong>, <strong>Top Secret</strong>
are used to construct the
<a href="https://en.wikipedia.org/wiki/Random_seed">seed</a> for
<a href="https://en.wikipedia.org/wiki/Pseudorandom_number_generator">PRNG</a>.
This seed, together with <strong>Warm up</strong> parameter (number of warm up rounds for PRNG),
determines the generated password;
the same values always generate the same password.
<h1>Icons</h1>
<div class="grid">
<div class="cell">
<img class="icon" src="icons/generate.svg"/> Generate
</div>
<div class="cell">
<img class="icon" src="icons/gear.svg"/> Edit
</div>
<div class="cell">
<img class="icon" src="icons/save.svg"/> Save
</div>
<div class="cell">
<img class="icon" src="icons/export.svg"/> Export
</div>
<div class="cell">
<img class="icon" src="icons/import.svg"/> Import
</div>
<div class="cell">
<img class="icon" src="icons/help.svg"/> Help
</div>
<div class="cell">
<img class="icon" src="icons/info.svg"/> Info
</div>
<div class="cell">
<img class="icon" src="icons/share.svg"/> Share
</div>
<div class="cell">
<img class="icon" src="icons/email.svg"/> Support
</div>
<div class="cell">
<img class="icon" src="icons/change.svg"/> Change
</div>
<div class="cell">
<img class="icon" src="icons/lock.svg"/> Lock
</div>
<div class="cell">
<img class="icon" src="icons/reset.svg"/> Reset
</div>
</div>
<a id="Contact"></a>
<h1>Contact</h1>
<p>Email <strong>[email protected]</strong> to ask questions,
suggest improvements, etc.
</p>
<a id="FAQ"></a>
<h1>Frequently Asked Questions (FAQ)</h1>
<p>Nothing here yet...</p>
<!-- </div> -->
</body>
</html>