05/18 Enhanced codes and functionalities 5

app/templates/auth/login.html

@@ -55,6 +55,15 @@ block body_class %}auth-page{% endblock %} {% block body %}
           Sign in
         </button>
       </form>
+      <div class="auth-divider"><span>or</span></div>
+      <button
+        type="button"
+        class="btn-secondary btn-full"
+        id="btn-passkey-login"
+      >
+        🔑 Sign in with Passkey
+      </button>
+      <p id="passkey-error" class="form-error hidden"></p>
       <p class="auth-footer">
         Don't have an account? <a href="/register">Create one</a><br />
         Forgot your password? <a href="/recover">Use recovery code</a>

app/templates/vault/index.html

@@ -956,6 +956,29 @@
       <div id="sharing-keys-actions"></div>
     </div>
 
+    <!-- Passkeys Section -->
+    <div class="settings-section" id="passkeys-section">
+      <h4 class="settings-section-title">🔑 Passkeys</h4>
+      <p class="settings-desc">
+        Sign in without typing your email and password. Your master password
+        is still required to unlock the vault.
+      </p>
+      <div id="passkeys-list" class="passkeys-list"></div>
+      <p id="passkeys-error" class="form-error hidden"></p>
+      <div class="passkey-register-row" id="passkey-register-row">
+        <input
+          type="text"
+          id="passkey-name-input"
+          placeholder="Passkey name (e.g. iPhone 15)"
+          maxlength="128"
+          class="passkey-name-input"
+        />
+        <button class="btn-secondary" id="btn-register-passkey">
+          + Add passkey
+        </button>
+      </div>
+    </div>
+
     <!-- Change Password Section -->
     <div class="settings-section">
       <h4 class="settings-section-title">🔑 Change Master Password</h4>