Errors deserve CSS too!

authens/static/authens/css/authens.css

@@ -48,6 +48,16 @@ form {
   font-size: 1.5em;
 }
 
+.error {
+  background: red;
+  color: white;
+  width: 100%;
+  padding: 0.5em;
+  margin: 0;
+  font-size: 1.2em;
+  text-align: center;
+}
+
 form table {
   margin: auto;
   border-spacing: 0.3em;

authens/templates/authens/pwd_login.html

@@ -5,13 +5,20 @@
   <h2>{% if request.site.name %}{{ request.site.name }}{% else %}AuthENS{% endif %} - {% trans "Connexion par mot de passe" %}</h2>
 
   {% if form.errors %}
-    <p>{% trans "Nom d'utilisateur et/ou mot de passe incorrect" %}</p>
+    <p class="error">{% trans "Nom d'utilisateur et/ou mot de passe incorrect" %}</p>
   {% endif %}
 
   <form class="exte" method="post" action="{% url 'authens:login.pwd' %}">
     {% csrf_token %}
     <table>
-    {{ form.as_table }}
+      <tbody>
+        {% for field in form %}
+          <tr>
+            <th>{{ field.label_tag }}</th>
+            <td>{{ field }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
     </table>
     <input type="submit" value="login">
     <input type="hidden" name="next" value="{{ next }}">