04/18 Enhance app functionalities: master password reset, account deletion/recovery

2026-04-18 14:39:01 -04:00
parent 4d3f9844f0
commit f7fdb9db8a
10 changed files with 1186 additions and 2 deletions
@@ -0,0 +1,72 @@
+{% 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"
+                 style="font-family: monospace; letter-spacing: 0.05em;">
+        </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 %}