foxgirl.engineering
simple webpage to generate an argon2id hash for a given password
view: add advanced settings ui
+27
src/style.css
+27
src/style.css
···
103
max-width: 700px;
104
}
105
106
+
.advanced-settings {
107
+
display: flex;
108
+
flex-direction: column;
109
+
gap: 16px;
110
+
margin-top: 16px;
111
+
112
+
label {
113
+
display: flex;
114
+
flex-direction: column;
115
+
align-items: center;
116
+
gap: 8px;
117
+
font-size: 1rem;
118
+
font-weight: normal;
119
+
120
+
input {
121
+
font-size: 1rem;
122
+
padding: 8px 16px;
123
+
}
124
+
}
125
+
}
126
+
127
@media (min-width: 750px) {
128
main {
129
padding: 32px 128px;
···
135
136
input {
137
width: unset;
138
+
}
139
+
140
+
.advanced-settings {
141
+
flex-direction: row;
142
+
gap: unset;
143
+
justify-content: space-around;
144
}
145
}
+19
src/view.tsx
+19
src/view.tsx
···
34
/>
35
<button type="submit">calculate</button>
36
</form>
37
+
<details>
38
+
<summary>advanced settings</summary>
39
+
<p>
40
+
defaults provided match{" "}
41
+
<a href="https://github.com/9001/copyparty/">copyparty</a>'s
42
+
parameters. you should only change this if you're generating a
43
+
hash for something else that uses different parameters.
44
+
</p>
45
+
<div class="advanced-settings">
46
+
<label>
47
+
memory limit (in bytes)
48
+
<input id="memlimit" type="number" value={state.memlimit} />
49
+
</label>
50
+
<label>
51
+
number of computations
52
+
<input id="opslimit" type="number" value={state.opslimit} />
53
+
</label>
54
+
</div>
55
+
</details>
56
<label for="result">result:</label>
57
<input
58
class="result"