111 lines
3.5 KiB
HTML
111 lines
3.5 KiB
HTML
{% extends "base.html" %} {% block title %}Recover Account — PassKeeper{%
|
|
endblock %} {% block body_class %}auth-page{% endblock %} {% block body %}
|
|
<div class="auth-container">
|
|
<div class="auth-card">
|
|
<div class="auth-logo">
|
|
<span class="logo-icon">🔒</span>
|
|
<span class="logo-text">PassKeeper</span>
|
|
</div>
|
|
|
|
<!-- Step 1: Email + Recovery Code -->
|
|
<div id="recover-step-1">
|
|
<h1 class="auth-title">Recover your account</h1>
|
|
<p class="auth-step-hint">
|
|
Enter your email and the recovery code you saved when you set up account
|
|
recovery.
|
|
</p>
|
|
<form id="recover-form-step1" novalidate>
|
|
<p id="recover-error-1" class="form-error hidden"></p>
|
|
<div class="form-group">
|
|
<label for="recover-email">Email address</label>
|
|
<input
|
|
type="email"
|
|
id="recover-email"
|
|
name="email"
|
|
required
|
|
autocomplete="email"
|
|
placeholder="you@example.com"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="recover-code">Recovery code</label>
|
|
<input
|
|
type="text"
|
|
id="recover-code"
|
|
name="recovery_code"
|
|
required
|
|
autocomplete="off"
|
|
placeholder="xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx"
|
|
class="input-monospace"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="btn-primary btn-full"
|
|
data-loading-text="Verifying…"
|
|
>
|
|
Verify recovery code
|
|
</button>
|
|
</form>
|
|
<p class="auth-footer">
|
|
Remember your password? <a href="/login">Sign in</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step 2: Set new master password (hidden until step 1 verified) -->
|
|
<div id="recover-step-2" class="hidden">
|
|
<h1 class="auth-title">Set a new master password</h1>
|
|
<p class="auth-step-hint">
|
|
Your recovery code is valid. Choose a new master password — your vault
|
|
will be re-encrypted automatically.
|
|
</p>
|
|
<form id="recover-form-step2" novalidate>
|
|
<p id="recover-error-2" class="form-error hidden"></p>
|
|
<div class="form-group">
|
|
<label for="recover-new-pass">New master password</label>
|
|
<div class="input-with-toggle">
|
|
<input
|
|
type="password"
|
|
id="recover-new-pass"
|
|
name="new_password"
|
|
required
|
|
autocomplete="new-password"
|
|
placeholder="Minimum 12 characters"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-show-pass"
|
|
id="toggle-recover-pass"
|
|
aria-label="Toggle password visibility"
|
|
>
|
|
👁
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="recover-confirm-pass">Confirm new password</label>
|
|
<input
|
|
type="password"
|
|
id="recover-confirm-pass"
|
|
name="confirm_password"
|
|
required
|
|
autocomplete="new-password"
|
|
placeholder="Repeat new password"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="btn-primary btn-full"
|
|
data-loading-text="Recovering account…"
|
|
>
|
|
Recover account
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} {% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/crypto.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/recover.js') }}"></script>
|
|
{% endblock %}
|