Improved errors display in login related pages

modoboa/static/css/offline.css

@@ -80,6 +80,20 @@ h2 {
     color: #333;
 }
 
+.input-group.error input {
+    border-color: #ff5252;
+}
+
+.error-message {
+    color: #ff5252;
+    font-size: 12px;
+    display: none;
+}
+
+.input-group.error .error-message {
+    display: block;
+}
+
 .checkbox-group {
     display: flex;
     align-items: center;
@@ -93,16 +107,24 @@ h2 {
 .btn {
     width: 100%;
     padding: 10px;
-    background-color: #007bff;
+    background-color: #e6e6e6;
     border: none;
     border-radius: 5px;
-    color: white;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s;
 }
 
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+}
+
 .btn:hover {
+  background-color: #c9c9c9;
+}
+
+.btn-primary:hover {
     background-color: #0056b3;
 }
 
@@ -121,8 +143,9 @@ h2 {
 }
 
 .alert-box {
-    background-color: #007bff;
+    background-color: #ff5252;
     color: white;
+    text-align: left;
     padding: 10px;
     border-radius: 5px;
     margin-bottom: 20px;

modoboa/templates/registration/login.html

@@ -23,14 +23,16 @@
         <input type="checkbox" id="remember" name="remember">
         <label for="remember">{% translate "Remember me" %}</label>
       </div>
-      <button class="btn" type="submit">{% trans "Log in" %}</button>
+      <button class="btn btn-primary" type="submit">{% trans "Log in" %}</button>
     </form>
     <div class="footer">
       <a class="pull-right" href="{% url 'password_reset' %}">{% trans "Forgot password?" %}</a>
     </div>
-  </div>
-  <div class="login-error">
-    {% if error %}{% alert error "danger" %}{% endif %}
+    {% if form.non_field_errors %}
+      <div class="mt alert-box">
+        {{ form.non_field_errors }}
+      </div>
+    {% endif %}
   </div>
 {% endblock %}
 

modoboa/templates/registration/password_reset_form.html

@@ -20,9 +20,7 @@
       <div class="input-group">
         {% render_field form.email %}
       </div>
-      <div class="col-sm-offset-4 col-sm-5">
-        <button type="submit" class="btn">{% trans "Submit" %}</button>
-      </div>
+      <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
     </form>
   </div>
 {% endblock %}

modoboa/templates/registration/twofactor_code_verify.html

@@ -11,20 +11,20 @@
     <h2>{% translate "Verification" %}</h2>
     <div id="methodSelection">
       {% if totp_device %}
-        <button class="btn" onclick="showTOTP()">{% translate "Use TOTP/backup code" %}</button>
+        <button class="btn btn-primary" onclick="showTOTP()">{% translate "Use TOTP/backup code" %}</button>
       {% endif %}
       {% if webauthn_device %}
-        <button class="mt btn" onclick="showWebAuthn()">{% translate "Use Webauthn device" %}</button>
+        <button class="mt btn btn-primary" onclick="showWebAuthn()">{% translate "Use Webauthn device" %}</button>
       {% endif %}
     </div>
     <div id="totp_form" style="display:none;">
       <form method="post" action="{% url 'core:2fa_verify' %}">
         {% csrf_token %}
         <input type="hidden" id="id_next" name="next" value="{{ nextlocation }}">
-        <div class="input-group{% if form.tfa_code.errors %} has-error{% endif %}">
+        <div class="input-group{% if form.tfa_code.errors %} error{% endif %}">
           <label>{% translate "One-time password" %}</label>
-          <input id="id_tfa_code" name="tfa_code">
-          <span class="help-block">
+          <input id="id_tfa_code" name="tfa_code" required>
+          <span class="error-message">
             {{ form.tfa_code.errors }}
           </span>
           <p class="help-block">
@@ -35,13 +35,13 @@
             {% endblocktranslate %}
           </p>
         </div>
-        <button class="btn btn-primary" type="submit">Verify code</button>
+        <button class="btn btn-primary" type="submit">{% translate "Verify code" %}</button>
       </form>
-      <button class="mt" onclick="backToSelection()">Back</button>
+      <button class="mt btn" onclick="backToSelection()">{% translate "Back" %}</button>
     </div>
     <div id="webautn_form" style="display:none;">
-      <button class="btn" onclick="useWebAuthn()">Log using Webauthn</button>
-      <button class="mt" onclick="backToSelection()">Back</button>
+      <button class="btn" onclick="useWebAuthn()">{% translate "Log using Webauthn" %}</button>
+      <button class="mt btn" onclick="backToSelection()">{% translate "Back" %}</button>
     </div>
   </div>
 {% endblock %}