feat: Add nicer display of passkeys based on panels
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
{% extends "mfa/webauthn/base.html" %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
{% load allauth %}
|
||||
{% load humanize %}
|
||||
{% block content %}
|
||||
{% element h1 %}
|
||||
{% trans "Security Keys" %}
|
||||
{% endelement %}
|
||||
{% if authenticators|length == 0 %}
|
||||
{% element p %}
|
||||
{% blocktranslate %}No security keys have been added.{% endblocktranslate %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
<article class="panel">
|
||||
<p class="panel-heading">{% trans "Security Keys" %}</p>
|
||||
{% for authenticator in authenticators %}
|
||||
<div class="panel-block">
|
||||
<div class="level" style="width: 100%;">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
{% if authenticator.wrap.is_passwordless is True %}
|
||||
{% element badge tags="mfa,key,primary" %}
|
||||
{% translate "Passkey" %}
|
||||
{% endelement %}
|
||||
{% elif authenticator.wrap.is_passwordless is False %}
|
||||
{% element badge tags="mfa,key,secondary" %}
|
||||
{% translate "Security key" %}
|
||||
{% endelement %}
|
||||
{% else %}
|
||||
{% element badge title=_("This key does not indicate whether it is a passkey.") tags="mfa,key,warning" %}
|
||||
{% translate "Unspecified" %}
|
||||
{% endelement %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<strong>
|
||||
{{ authenticator }}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
{% blocktranslate with created_at=authenticator.created_at|date:"SHORT_DATE_FORMAT" %}
|
||||
Added
|
||||
on {{ created_at }}{% endblocktranslate %}.
|
||||
</div>
|
||||
<div class="level-item">
|
||||
{% if authenticator.last_used_at %}
|
||||
{% blocktranslate with last_used=authenticator.last_used_at|naturaltime %}Last used
|
||||
{{ last_used }}{% endblocktranslate %}
|
||||
{% else %}
|
||||
Not used.
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{% url 'mfa_edit_webauthn' pk=authenticator.pk as edit_url %}
|
||||
{% element button tags="mfa,authenticator,edit,tool" href=edit_url %}
|
||||
{% translate "Edit" %}
|
||||
{% endelement %}
|
||||
</div>
|
||||
<div class="level-item">
|
||||
{% url 'mfa_remove_webauthn' pk=authenticator.pk as remove_url %}
|
||||
{% element button tags="mfa,authenticator,danger,delete,tool" href=remove_url %}
|
||||
{% translate "Remove" %}
|
||||
{% endelement %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</article>
|
||||
{% endif %}
|
||||
{% url 'mfa_add_webauthn' as add_url %}
|
||||
{% element button href=add_url %}
|
||||
{% translate "Add" %}
|
||||
{% endelement %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user