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