05/09 Update: add passkey

app/templates/vault/index.html

@@ -102,6 +102,14 @@
           <span class="sidebar-icon">🪪</span>
           <span class="sidebar-label">Identities</span>
         </li>
+        <li
+          class="sidebar-item"
+          data-type-filter="passkey"
+          data-tooltip="Passkeys"
+        >
+          <span class="sidebar-icon">🔐</span>
+          <span class="sidebar-label">Passkeys</span>
+        </li>
         <li class="sidebar-section-header">Tools</li>
         <li
           class="sidebar-item"
@@ -446,6 +454,7 @@
           <option value="bank">🏦 Bank Account</option>
           <option value="address">🏠 Address</option>
           <option value="ssn">🪪 Identity (SSN)</option>
+          <option value="passkey">🔐 Passkey</option>
         </select>
       </div>
       <div class="form-group">
@@ -758,6 +767,78 @@
           </div>
         </div>
       </div>
+      <div class="type-fields hidden" data-for-types="passkey">
+        <div class="passkey-info-callout">
+          🔐 Store the details of a passkey registered on a website. The actual
+          private key stays on your device/authenticator.
+        </div>
+        <div class="form-group">
+          <label for="field-pk-rp-id"
+            >RP ID (Domain) <span class="required">*</span></label
+          >
+          <input
+            type="text"
+            id="field-pk-rp-id"
+            placeholder="e.g. github.com"
+            autocomplete="off"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-pk-username">Username / Display Name</label>
+          <input
+            type="text"
+            id="field-pk-username"
+            placeholder="e.g. alice@example.com"
+            autocomplete="off"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-pk-credential-id"
+            >Credential ID
+            <span class="field-label-optional">optional</span></label
+          >
+          <input
+            type="text"
+            id="field-pk-credential-id"
+            class="input-monospace"
+            placeholder="Base64url credential ID"
+            autocomplete="off"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-pk-user-handle"
+            >User Handle
+            <span class="field-label-optional">optional</span></label
+          >
+          <input
+            type="text"
+            id="field-pk-user-handle"
+            class="input-monospace"
+            placeholder="Base64url user handle"
+            autocomplete="off"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-pk-device-hint"
+            >Device / Authenticator
+            <span class="field-label-optional">optional</span></label
+          >
+          <input
+            type="text"
+            id="field-pk-device-hint"
+            placeholder="e.g. Touch ID on MacBook Pro"
+            autocomplete="off"
+          />
+        </div>
+        <div class="form-group">
+          <label for="field-pk-notes">Notes</label>
+          <textarea
+            id="field-pk-notes"
+            rows="3"
+            placeholder="Optional notes…"
+          ></textarea>
+        </div>
+      </div>
       <div class="form-group">
         <label for="field-folder">Folder</label>
         <select id="field-folder">
@@ -766,7 +847,7 @@
       </div>
       <div
         class="type-fields"
-        data-for-types="password note card bank address ssn"
+        data-for-types="password note card bank address ssn passkey"
       >
         <div class="form-group">
           <label for="field-tags">Tags</label>