feat: use django crispy-forms

la_chariotte/accounts/forms.py

@@ -1,3 +1,6 @@
+from crispy_bulma.layout import Submit
+from crispy_forms.helper import FormHelper
+from crispy_forms.layout import Layout
 from django import forms
 from django.contrib.auth.forms import UserChangeForm, UserCreationForm
 
@@ -16,6 +19,17 @@ class CustomUserCreationForm(UserCreationForm):
             ),
         }
 
+    helper = FormHelper()
+    helper.form_class = "form-horizontal"
+    helper.layout = Layout(
+        "username",
+        "first_name",
+        "last_name",
+        "password1",
+        "password2",
+        Submit("submit", "Valider", css_class="is-primary"),
+    )
+
 
 class CustomUserChangeForm(UserChangeForm):  # pas encore utilisé - pour la V1
     class Meta:

la_chariotte/accounts/templates/registration/login.html

@@ -1,21 +1,29 @@
 {% extends 'base.html' %}
-
+{% load crispy_forms_tags %}
 {% block title %}Connexion{% endblock %}
-
 {% block content %}
   <p class="desktop-hidden mobile-content-title">
     {% block content_title %}Connexion{% endblock %}
   </p>
   <div class="box">
+    <div class="columns is-flex is-flex-direction-column">
       <form method="post">
-    {% csrf_token %}
+        <div class="column">
-    {{ form.as_p }}
+          {{ form | crispy }}
-    <a href="{% url 'accounts:password_reset' %}">Mot de passe oublié ?</a>
+          <a href="{% url 'accounts:password_reset' %}"
-    <div class="buttons">
+             class="is-size-7 has-text-primary">Mot de passe oublié ?</a>
+        </div>
+        <div class="column">
           <button class="button is-primary" type="submit">Se connecter</button>
-      <a href="{% url 'accounts:signup' %}">Créer un compte</a>
+        </div>
+        <div class="has-text-centered">
+          <p class="is-size-7">
+            Pas de compte ? <a href="{% url 'accounts:signup' %}" class="has-text-primary">Créez en un !</a>
+          </p>
+        </div>
+        {% csrf_token %}
+      </form>
     </div>
   </form>
 </div>
-
 {% endblock %}

la_chariotte/accounts/templates/registration/password_reset_confirm.html

@@ -1,25 +1,25 @@
 {% extends 'base.html' %}
-
+{% load crispy_forms_tags %}
 {% block title %}Nouveau mot de passe{% endblock %}
-
 {% block content %}
     <p class="desktop-hidden mobile-content-title">
         {% block content_title %}Nouveau mot de passe{% endblock %}
     </p>
     <div class="box">
         {% if validlink %}
-
             <form method="POST">
                 <p>Veuillez entrer un nouveau mot de passe tout neuf.</p>
                 {% csrf_token %}
-        {{ form.as_p }}
+                {% crispy form %}
-        <input class="button is-primary" type="submit" value="Changer le mot de passe">
+                <input class="button is-primary"
+                       type="submit"
+                       value="Changer le mot de passe">
             </form>
         {% else %}
-
+            <p>
-    <p>Le lien de réinitialisation du mot de passe est invalide, probablement parce qu'il a déjà été utilisé.
+                Le lien de réinitialisation du mot de passe est invalide, probablement parce qu'il a déjà été utilisé.
-        Veuillez demander une nouvelle réinitialisation.</p>
+                Veuillez demander une nouvelle réinitialisation.
-    
+            </p>
         {% endif %}
     </div>
 {% endblock %}

la_chariotte/accounts/templates/registration/password_reset_form.html

@@ -1,7 +1,6 @@
 {% extends 'base.html' %}
-
+{% load crispy_forms_tags %}
 {% block title %}Mot de passe oublié ?{% endblock %}
-
 {% block content %}
     <p class="desktop-hidden mobile-content-title">
         {% block content_title %}Mot de passe oublié ?{% endblock %}
@@ -9,9 +8,10 @@
     <div class="box">
         <form method="POST">
             <p>Entrez votre mail pour recevoir les instructions pour le réinitialiser.</p>
-        {% csrf_token %}
+            {% crispy form %}
-        {{ form.as_p }}
+            <div class="buttons">
                 <input class="button is-primary" type="submit" value="Envoyer">
+            </div>
         </form>
     </div>
 {% endblock %}

la_chariotte/accounts/templates/registration/signup.html

@@ -1,17 +1,9 @@
 {% extends 'base.html' %}
-
+{% load crispy_forms_tags %}
 {% block title %}Créer un compte{% endblock %}
-
 {% block content %}
   <p class="desktop-hidden mobile-content-title">
     {% block content_title %}Créer un compte{% endblock %}
   </p>
-<div class="box">
+  <div class="box">{% crispy form %}</div>
-  <form method="post">
-    {% csrf_token %}
-    {{ form.as_p }}
-    <button class="button is-primary" type="submit">Valider</button>
-  </form>
-</div>
-
 {% endblock %}

la_chariotte/settings.py

@@ -34,6 +34,8 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "crispy_forms",
+    "crispy_bulma",
 ]
 
 MIDDLEWARE = [
@@ -69,6 +71,9 @@ TEMPLATES = [
     },
 ]
 
+CRISPY_ALLOWED_TEMPLATE_PACKS = ("bulma",)
+CRISPY_TEMPLATE_PACK = "bulma"
+
 WSGI_APPLICATION = "la_chariotte.wsgi.application"
 
 

pyproject.toml

@@ -17,6 +17,8 @@ dependencies = [
     "django-weasyprint==1.1.0.post1", # see below
     "weasyprint==52.5", # pin weasyprint to not depend on latest libpango 
     "html2text>=2020.1.16",
+    "django-crispy-forms>=2.0,<3",
+    "crispy-bulma>=0.11.0,<1",
 ]
 
 [tool.setuptools]