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

@@ -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: '/' })

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>