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>
This commit is contained in:
Jeff Emmett 2026-02-15 09:36:05 -07:00
parent 629e61de0a
commit 0f76ae63a4
2 changed files with 37 additions and 1 deletions

View File

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

View File

@ -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>