SHA256
feat: first-time setup screen for creating a new passphrase
UX fix from user feedback: previously the app only showed an "Entsperren" form, leaving first-time users without any passphrase confused. The page now loads with two distinct pre-screens decided by an initial API call: - empty DB -> "Willkommen" setup form: new passphrase, typed twice, minimum 8 characters, with no-reset warning - existing ciphertext records -> unlock form as before 🤖 Generated with Codebuff Co-Authored-By: Codebuff <noreply@codebuff.com>
This commit is contained in:
+39
-10
@@ -12,18 +12,47 @@
|
|||||||
|
|
||||||
<section id="flash" class="flash" aria-live="polite"></section>
|
<section id="flash" class="flash" aria-live="polite"></section>
|
||||||
|
|
||||||
<!-- unlock screen: passphrase stays in memory only -->
|
<!-- First visit: NO records exist yet → user chooses a new passphrase -->
|
||||||
|
<section id="setup" hidden>
|
||||||
|
<form id="setup-form" autocomplete="off">
|
||||||
|
<h2>Willkommen bei crushdb!</h2>
|
||||||
|
<p class="intro">
|
||||||
|
Du benutzt crushdb zum ersten Mal. Wähle jetzt eine Passphrase –
|
||||||
|
sie ist das Master-Passwort für alle deine Daten. Es gibt keine
|
||||||
|
Zurücksetzung, speichere sie sicher!
|
||||||
|
</p>
|
||||||
|
<label>Neue Passphrase
|
||||||
|
<input type="password" id="setup-pass1" autocomplete="new-password"
|
||||||
|
required minlength="8" placeholder="mindestens 8 Zeichen" />
|
||||||
|
</label>
|
||||||
|
<label>Passphrase wiederholen
|
||||||
|
<input type="password" id="setup-pass2" autocomplete="new-password"
|
||||||
|
required placeholder="gleiche Passphrase nochmal" />
|
||||||
|
</label>
|
||||||
|
<button type="submit" id="setup-btn">Konto einrichten →</button>
|
||||||
|
<p id="setup-progress" class="hint" hidden>Schlüssel wird abgeleitet …</p>
|
||||||
|
<p class="hint">
|
||||||
|
Wichtig: Die Passphrase wird <strong>nicht am Server gespeichert</strong>.
|
||||||
|
Sie bleibt nur in deinem Browser-Arbeitsspeicher. Wer sie vergisst,
|
||||||
|
verliert Zugriff auf alle Daten (absichtlich so).
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Returning user: records exist but are undecryptable → enter passphrase -->
|
||||||
<section id="unlock">
|
<section id="unlock">
|
||||||
<form id="unlock-form" autocomplete="off">
|
<form id="unlock-form" autocomplete="off">
|
||||||
<label for="passphrase">Passphrase</label>
|
<h2>Entsperren</h2>
|
||||||
<input
|
<p class="intro">
|
||||||
type="password"
|
Du hast bereits verschlüsselte Datensätze hinterlegt.
|
||||||
id="passphrase"
|
Gib deine Passphrase ein, um sie zu lesen.
|
||||||
autocomplete="off"
|
</p>
|
||||||
required
|
<label>Passphrase
|
||||||
placeholder="Passphrase eingeben …"
|
<input type="password" id="passphrase" autocomplete="current-password"
|
||||||
/>
|
required placeholder="deine Passphrase …" />
|
||||||
<button type="submit">Entsperren</button>
|
</label>
|
||||||
|
<button type="submit" id="unlock-btn">Entsperren</button>
|
||||||
|
<p id="unlock-progress" class="hint" hidden>Schlüssel wird abgeleitet …</p>
|
||||||
<p class="hint">
|
<p class="hint">
|
||||||
Die Passphrase verlässt niemals deinen Browser. Sie wird per
|
Die Passphrase verlässt niemals deinen Browser. Sie wird per
|
||||||
Argon2id lokal abgeleitet und nur im Arbeitsspeicher gehalten.
|
Argon2id lokal abgeleitet und nur im Arbeitsspeicher gehalten.
|
||||||
|
|||||||
Reference in New Issue
Block a user