Improved registration pages.

modoboa/core/views/auth.py

@@ -276,6 +276,9 @@ class TwoFactorCodeVerifyView(LoginViewMixin, generic.FormView):
         has_totp_device = django_otp.user_has_device(self.user)
         context["totp_device"] = has_totp_device
         context["webauthn_device"] = self.user.webauthn_enabled
+        context["show_method_selection"] = (
+            has_totp_device and self.user.webauthn_enabled
+        )
         context["nextlocation"] = self.request.POST.get(
             "next", self.request.GET.get("next")
         )

modoboa/templates/registration/login.html

@@ -44,11 +44,14 @@
 
 {% block extra_js %}
   <script type="text/javascript">
-   $(document).ready(function() {
-       $("form").submit(function(){
-           $(":submit", this).attr("disabled", "disabled");
-       });
-       $('#id_username').focus();
-   });
+  document.addEventListener('DOMContentLoaded', () => {
+    const form = document.querySelector('form');
+    const field = document.querySelector('#id_username');
+    field.focus();
+    form.addEventListener('submit', () => {
+      const submitBtn = document.querySelector('button[type=submit]');
+      submitBtn.disabled = true;
+    });
+  });
   </script>
 {% endblock %}

modoboa/templates/registration/password_reset_confirm.html

@@ -12,6 +12,7 @@
           {% render_field form.new_password1 %}
         </div>
         <div class="input-group{% if form.new_password2.errors %} error{% endif %}">
+          <label>{{ form.new_password2.label }}</label>
           {{ form.new_password2 }}
           {% if form.new_password2.errors %}
             <p class="error-message">

modoboa/templates/registration/password_reset_confirm_code.html

@@ -25,9 +25,11 @@
           </p>
         </div>
         <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
-        <a class="pull-right mt" id="resend_code" href="{% url 'password_reset_resend_code' %}">
-          {% trans "Resend code" %}
-        </a>
+        <div class="footer">
+          <a id="resend_code" href="{% url 'password_reset_resend_code' %}">
+            {% trans "Resend code" %}
+          </a>
+        </div>
       </div>
     </form>
   </div>
@@ -35,14 +37,13 @@
 
 {% block extra_js %}
   <script type="text/javascript">
-  $(document).ready(function () {
-      $('#resend_code').click(function (evt) {
-          evt.preventDefault();
-          var $this = $(this);
-          $.get($this.attr('href')).done(function (response) {
-              alert('The code has been sent again');
-          });
-      });
+  document.addEventListener('DOMContentLoaded', () => {
+    const button = document.querySelector('#resend_code')
+    button.addEventListener('click', async (event) => {
+      event.preventDefault();
+      await fetch(event.target.href);
+      alert('{% translate "The code has been sent again" %}');
+    })
   });
   </script>
 {% endblock %}

modoboa/templates/registration/twofactor_code_verify.html

@@ -9,15 +9,17 @@
 {% block main_content %}
   <div class="login-box">
     <h2>{% translate "Verification" %}</h2>
-    <div id="methodSelection">
-      {% if totp_device %}
-        <button class="btn btn-primary" onclick="showTOTP()">{% translate "Use TOTP/backup code" %}</button>
-      {% endif %}
-      {% if webauthn_device %}
-        <button class="mt btn btn-primary" onclick="showWebAuthn()">{% translate "Use Webauthn device" %}</button>
-      {% endif %}
-    </div>
-    <div id="totp_form" style="display:none;">
+    {% if show_method_selection %}
+      <div id="methodSelection">
+        {% if totp_device %}
+          <button class="btn btn-primary" onclick="showTOTP()">{% translate "Use TOTP/backup code" %}</button>
+        {% endif %}
+        {% if webauthn_device %}
+          <button class="mt btn btn-primary" onclick="showWebAuthn()">{% translate "Use Webauthn device" %}</button>
+        {% endif %}
+      </div>
+    {% endif %}
+    <div id="totp_form" {% if show_method_selection or not totp_device %}style="display:none;"{% endif %}>
       <form method="post" action="{% url 'core:2fa_verify' %}">
         {% csrf_token %}
         <input type="hidden" id="id_next" name="next" value="{{ nextlocation }}">
@@ -25,7 +27,9 @@
           <label>{% translate "One-time password" %}</label>
           <input id="id_tfa_code" name="tfa_code" required>
           <span class="error-message">
-            {{ form.tfa_code.errors }}
+            {% for error in form.tfa_code.errors %}
+              {{ error }}
+            {% endfor %}
           </span>
           <p class="help-block">
             {% blocktranslate trimmed %}
@@ -37,11 +41,15 @@
         </div>
         <button class="btn btn-primary" type="submit">{% translate "Verify code" %}</button>
       </form>
-      <button class="mt btn" onclick="backToSelection()">{% translate "Back" %}</button>
+      {% if show_method_selection %}
+        <button class="mt btn" onclick="backToSelection()">{% translate "Back" %}</button>
+      {% endif %}
     </div>
-    <div id="webautn_form" style="display:none;">
+    <div id="webautn_form" {% if show_method_selection or not webauthn_device %}style="display:none;"{% endif %}>
       <button class="btn" onclick="useWebAuthn()">{% translate "Log using Webauthn" %}</button>
-      <button class="mt btn" onclick="backToSelection()">{% translate "Back" %}</button>
+      {% if show_method_selection %}
+        <button class="mt btn" onclick="backToSelection()">{% translate "Back" %}</button>
+      {% endif %}
     </div>
   </div>
 {% endblock %}