reformat all templates like django login

mfa/forms.py

@@ -28,4 +28,4 @@ def __init__(self, **kwargs):
 
 
 class MFACreateForm(MFABaseForm):
-    name = forms.CharField(label=_('Name'), max_length=32)
+    name = forms.CharField(label=_('Authentication name'), max_length=32)

mfa/templates/mfa/auth_FIDO2.html

@@ -1,18 +1,33 @@
-{% load static %}
+{% extends "mfa/base.html" %}
+{% load i18n static %}
 
+{% block content_title %}
 <h1>Two-factor authentication</h1>
-<p>When you are ready to authenticate with FIDO2, press the button below.</p>
+{% endblock %}
+
+{% block content_subtitle %}
+<p>
+    When you are ready to authenticate with FIDO2,
+    press the button below
+    {% for method in methods %}
+    {% if method != 'FIDO2' %}
+    or <a href="{% url 'mfa:auth' method %}">use {{method}} instead</a>
+    {% endif %}
+    {% endfor %}.
+</p>
+{% endblock %}
+
+{% block form %}
+{% load static %}
+<script src="{% static 'cbor-js/cbor.js' %}"></script>
+<script src="{% static 'mfa/fido2.js' %}"></script>
 
 <form data-fido2-auth="{{ mfa_data }}" method="POST">
     {% csrf_token %}
-    {% for error in form.errors %}
-        <p>{{ error }}</p>
-    {% endfor %}
     {{ form.code.as_hidden }}
-    <button autofocus>Verify</button>
-    <a href="{% url 'mfa:auth' 'TOTP' %}">Use TOTP instead</a>
-    <a href="{% url 'mfa:auth' 'recovery' %}">Use recovery code instead</a>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Verify' %}" autofocus>
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
-
-<script src="{% static 'cbor-js/cbor.js' %}"></script>
-<script src="{% static 'mfa/fido2.js' %}"></script>
+{% endblock %}

mfa/templates/mfa/auth_TOTP.html

@@ -1,16 +1,32 @@
+{% extends "mfa/base.html" %}
+{% load i18n static %}
+
+{% block content_title %}
 <h1>Two-factor authentication</h1>
-<p>Open your TOTP app to get an authentication code.</p>
+{% endblock %}
+
+{% block content_subtitle %}
+<p>
+    Open your TOTP app to get an authentication code
+    {% for method in methods %}
+    {% if method != 'TOTP' %}
+    or <a href="{% url 'mfa:auth' method %}">use {{method}} instead</a>
+    {% endif %}
+    {% endfor %}.
+</p>
+{% endblock %}
 
+{% block form %}
 <form method="POST">
     {% csrf_token %}
-    {% for error in form.non_field_errors %}
-        <p>{{ error }}</p>
-    {% endfor %}
-    <label>
-        {{ form.code.label }}
-        {{ form.code }}
-    </label>
-    <button>Verify</button>
-    <a href="{% url 'mfa:auth' 'FIDO2' %}">Use FIDO2 instead</a>
-    <a href="{% url 'mfa:auth' 'recovery' %}">Use recovery code instead</a>
+    <div class="form-row">
+        {{ form.code.errors }}
+        <h2>{{ form.code.label }}:</h2>
+        <p>{{ form.code }}</p>
+    </div>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Verify' %}">
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
+{% endblock %}

mfa/templates/mfa/auth_recovery.html

@@ -1,21 +1,34 @@
+{% extends "mfa/base.html" %}
+{% load i18n static %}
+
+{% block content_title %}
 <h1>Two-factor authentication</h1>
+{% endblock %}
 
+{% block content_subtitle %}
 <p>
     <strong>WARNING</strong>:
     The recovery code will be removed after it has been used.
     Make sure to create a new one after login!
+    {% for method in methods %}
+    {% if method != 'recovery' %}
+    or <a href="{% url 'mfa:auth' method %}">use {{method}} instead</a>
+    {% endif %}
+    {% endfor %}.
 </p>
+{% endblock %}
 
+{% block form %}
 <form method="POST">
     {% csrf_token %}
-    {% for error in form.non_field_errors %}
-        <p>{{ error }}</p>
-    {% endfor %}
-    <label>
-        {{ form.code.label }}
-        {{ form.code }}
-    </label>
-    <button>Verify</button>
-    <a href="{% url 'mfa:auth' 'FIDO2' %}">Use FIDO2 instead</a>
-    <a href="{% url 'mfa:auth' 'TOTP' %}">Use TOTP instead</a>
+    <div class="form-row">
+        {{ form.code.errors }}
+        <h2>{{ form.code.label }}:</h2>
+        <p>{{ form.code }}</p>
+    </div>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Verify' %}">
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
+{% endblock %}

mfa/templates/mfa/base.html

@@ -0,0 +1,41 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+
+{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static 'admin/css/login.css' %}">
+{{ form.media }}
+{% endblock %}
+
+{% block bodyclass %}{{ block.super }} login mfa{% endblock %}
+
+{% block usertools %}{% endblock %}
+
+{% block nav-global %}{% endblock %}
+
+{% block nav-sidebar %}{% endblock %}
+
+{% block content_title %}{% endblock %}
+
+{% block nav-breadcrumbs %}{% endblock %}
+
+{% block content %}
+{% if form.errors and not form.non_field_errors %}
+<p class="errornote">
+{% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
+</p>
+{% endif %}
+
+{% if form.non_field_errors %}
+{% for error in form.non_field_errors %}
+<p class="errornote">
+    {{ error }}
+</p>
+{% endfor %}
+{% endif %}
+
+<div id="content-main">
+
+{% block form %}
+{% endblock %}
+
+</div>
+{% endblock %}

mfa/templates/mfa/create_FIDO2.html

@@ -1,19 +1,27 @@
-{% load static %}
+{% extends "mfa/base.html" %}
+{% load i18n static %}
 
-<p>You will be prompted to activate the device once you click "create".</p>
+{% block content_subtitle %}
+<p>
+    You will be prompted to activate the device once you click "create".
+</p>
+{% endblock %}
 
+{% block form %}
+{% load static %}
+<script src="{% static 'cbor-js/cbor.js' %}"></script>
+<script src="{% static 'mfa/fido2.js' %}"></script>
 <form data-fido2-create="{{ mfa_data }}" method="POST">
     {% csrf_token %}
-    {% for error in form.non_field_errors %}
-        <p>{{ error }}</p>
-    {% endfor %}
-    <label>
+    <div class="form-row">
+        {{ form.name.errors }}
         {{ form.name.label }}
         {{ form.name }}
-    </label>
+    </div>
     {{ form.code.as_hidden }}
-    <button>Create</button>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Create' %}">
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
-
-<script src="{% static 'cbor-js/cbor.js' %}"></script>
-<script src="{% static 'mfa/fido2.js' %}"></script>
+{% endblock %}

mfa/templates/mfa/create_TOTP.html

@@ -1,22 +1,33 @@
-{% load static mfa %}
-
-<p>Scan the code with your TOTP app and enter a valid code to finish registration.</p>
+{% extends "mfa/base.html" %}
+{% load i18n static %}
 
-{{ mfa_data.url|qrcode }}
-{{ mfa_data.secret }}
+{% block content_subtitle %}
+<p>
+    Scan the code with your TOTP app and enter a valid code to finish registration.
+</p>
+{% endblock %}
 
+{% block form %}
+{% load static mfa %}
+<div style="margin-bottom: 10px;">
+    <div style="color: black; background-color: white; width: min-content; margin: auto;">{{ mfa_data.url|qrcode }}</div>
+    <div style="width: min-content; margin: 12px auto;">{{ mfa_data.secret }}</div>
+</div>
 <form method="POST">
     {% csrf_token %}
-    {% for error in form.non_field_errors %}
-        <p>{{ error }}</p>
-    {% endfor %}
-    <label>
-        {{ form.name.label }}
-        {{ form.name }}
-    </label>
-    <label>
-        {{ form.code.label }}
-        {{ form.code }}
-    </label>
-    <button>Create</button>
+    <div class="form-row">
+        {{ form.name.errors }}
+        {{ form.name.label }} {{ form.name }}
+    </div>
+    <div class="form-row">
+        {{ form.code.errors }}
+        {{ form.code.label }} {{ form.code }}
+        </div>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Create' %}">
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
+
+</div>
+{% endblock %}

mfa/templates/mfa/create_recovery.html

@@ -1,24 +1,38 @@
-{% load static mfa %}
+{% extends "mfa/base.html" %}
+{% load i18n static %}
 
-<p>A recovery code can be used when you lose access to your other two-factor authentication options. Each recovery code can only be used once.</p>
-<p>Make sure to store it in a safe place! If you lose your login keys and don’t have the recovery codes you will lose access to your account.</p>
+{% block content_subtitle %}
+<p>
+    A recovery code can be used when you lose access to your other two-factor
+    authentication options. Each recovery code can only be used once.
+</p>
+<p>
+    Make sure to store it in a safe place! If you lose your login keys and don't
+    have the recovery codes you will lose access to your account.
+</p>
+{% endblock %}
 
+{% block form %}
+{% load static mfa %}
 <form method="POST">
     {% csrf_token %}
-    {% for error in form.non_field_errors %}
-        <p>{{ error }}</p>
-    {% endfor %}
-    <label>
+    <div class="form-row">
+        {{ form.name.errors }}
         {{ form.name.label }}
         {{ form.name }}
-    </label>
-    <label>
+    </div>
+    <div class="form-row">
+        {{ form.code.errors }}
         {{ form.code.label }}
         <input name="code" value="{{ mfa_data.code }}" readonly>
-    </label>
-    <label>
+    </div>
+    <div class="form-row">
         <input type="checkbox" required>
         I have safely stored the code
-    </label>
-    <button>Create</button>
+    </div>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Create' %}">
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
+{% endblock %}

mfa/templates/mfa/mfakey_confirm_delete.html

@@ -1,5 +1,18 @@
-<p>Are you sure you want to delete the key {{ object.name }}?</p>
+{% extends "mfa/base.html" %}
+{% load i18n static %}
+
+{% block content_subtitle %}
+<p>
+    Are you sure you want to delete the key {{ object.name }}?
+</p>
+{% endblock %}
+
+{% block form %}
 <form method="POST">
     {% csrf_token %}
-    <button>Confirm</button>
+    <div class="submit-row">
+        <input type="submit" value="{% translate 'Confirm' %}">
+        <input type="hidden" name="next" value="{{ next }}">
+    </div>
 </form>
+{% endblock %}