From 0f76ae63a4b21d948a65d763e9fae31b4450b31a Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sun, 15 Feb 2026 09:36:05 -0700
Subject: [PATCH] feat: add EncryptID passkey login to frontend templates

Add SDK browser bundle to base template and shared space login page.
Passkey auth alongside existing password form.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/templates/portal/base.html             | 10 +++++++
 .../templates/portal/shared_space/login.html  | 28 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/portal/templates/portal/base.html b/portal/templates/portal/base.html
index d4dbe2c..ba4a94a 100644
--- a/portal/templates/portal/base.html
+++ b/portal/templates/portal/base.html
@@ -135,6 +135,7 @@
                 <a href="{% url 'portal:upload' %}" class="{% if request.resolver_match.url_name == 'upload' %}active{% endif %}">Upload</a>
                 <a href="{% url 'portal:files' %}" class="{% if request.resolver_match.url_name == 'files' %}active{% endif %}">Files</a>
                 <a href="/admin/" target="_blank">Admin</a>
+                <span id="encryptid-auth" style="display:inline-block;margin-left:1rem;"></span>
             </nav>
         </header>
 
@@ -143,6 +144,15 @@
 
     {% block extra_js %}{% endblock %}
 
+    {% load static %}
+    <script src="{% static 'portal/encryptid.browser.js' %}"></script>
+    <script>
+        // Initialize EncryptID auth button in nav
+        if (typeof EncryptID !== 'undefined') {
+            EncryptID.renderAuthButton('encryptid-auth');
+        }
+    </script>
+
     <script>
         if ('serviceWorker' in navigator) {
             navigator.serviceWorker.register('/sw.js', { scope: '/' })
diff --git a/portal/templates/portal/shared_space/login.html b/portal/templates/portal/shared_space/login.html
index 610dee5..6d45dce 100644
--- a/portal/templates/portal/shared_space/login.html
+++ b/portal/templates/portal/shared_space/login.html
@@ -167,11 +167,23 @@
             <div class="error-message">{{ error }}</div>
             {% endif %}
 
+            <!-- EncryptID passkey auth -->
+            <div id="encryptid-auth" style="margin-bottom:1.5rem;"></div>
+
+            <div style="position:relative;margin-bottom:1.5rem;">
+                <div style="position:absolute;inset:0;display:flex;align-items:center;">
+                    <span style="width:100%;border-top:1px solid var(--border);"></span>
+                </div>
+                <div style="position:relative;display:flex;justify-content:center;">
+                    <span style="background:var(--surface);padding:0 0.75rem;color:var(--text-muted);font-size:0.75rem;text-transform:uppercase;">Or enter with password</span>
+                </div>
+            </div>
+
             <form method="post">
                 {% csrf_token %}
                 <div class="form-group">
                     <label for="password">Password</label>
-                    <input type="password" id="password" name="password" placeholder="Enter ZOME password" required autofocus>
+                    <input type="password" id="password" name="password" placeholder="Enter ZOME password" required>
                 </div>
                 <button type="submit" class="btn btn-primary">Enter ZOME</button>
             </form>
@@ -181,5 +193,19 @@
             </p>
         </div>
     </div>
+
+    {% load static %}
+    <script src="{% static 'portal/encryptid.browser.js' %}"></script>
+    <script>
+        if (typeof EncryptID !== 'undefined') {
+            EncryptID.renderAuthButton('encryptid-auth');
+
+            // After passkey auth, set cookie and reload to get access
+            document.getElementById('encryptid-auth').addEventListener('encryptid-login', function(e) {
+                document.cookie = 'encryptid_token=' + e.detail.token + ';path=/;max-age=900;SameSite=Lax';
+                window.location.reload();
+            });
+        }
+    </script>
 </body>
 </html>