Use Django Crispy forms

accounts/templates/accounts/registration.html

@@ -1,9 +1,20 @@
 {% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-2.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+{% block title %}{% trans "Sign up" %}{% endblock %}
+
 {% block content %}
-<h1>Création d'utilisateur</h1>
+<div class="card bg-light">
-<form action="" method="post">{% csrf_token %}
+    <h3 class="card-header text-center">
-    {{ form.as_p }}
+        {% trans "Sign up" %}
-    <br>
+    </h3>
-    <input type="submit" value="Envoyer">
+    <div class="card-body">
-</form>
+        <form method="post">{% csrf_token %}
+            {{ form|crispy }}
+            <input type="submit" value="Envoyer" class="btn btn-primary mt-4">
+        </form>
+    </div>
+</div>
 {% endblock %}

photo21/settings.py

@@ -41,6 +41,7 @@ INSTALLED_APPS = [
     'django.contrib.sites',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'crispy_forms',
     'photologue_custom',
     'photologue',
     'accounts',
@@ -163,5 +164,8 @@ SESSION_COOKIE_AGE = 60 * 60 * 3
 # Use only one Django Sites
 SITE_ID = 1
 
+# use Bootstrap forms
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
+
 # Photologue
 PHOTOLOGUE_GALLERY_SAMPLE_SIZE = 1

photo21/templates/registration/login.html

@@ -2,13 +2,9 @@
 {% comment %}
 SPDX-License-Identifier: GPL-2.0-or-later
 {% endcomment %}
-{% load i18n static %}
+{% load i18n crispy_forms_tags %}
 {% block title %}{% trans "Log in" %}{% endblock %}
 
-{% block extracss %}
-<link rel="stylesheet" href="{% static "registration/css/login.css" %}">
-{% endblock %}
-
 {% block content %}
 <div class="card bg-light mx-auto" style="max-width: 35rem;">
     <h3 class="card-header text-center">
@@ -33,8 +29,8 @@ SPDX-License-Identifier: GPL-2.0-or-later
         {% endif %}
 
         <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
-            {{ form }}
+            {{ form|crispy }}
-            <input type="submit" value="{% trans 'Log in' %}" class="btn btn-primary btn-block btn-lg">
+            <input type="submit" value="{% trans 'Log in' %}" class="btn btn-primary btn-lg mt-2">
             <a href="{% url 'password_reset' %}"
                 class="badge bg-light text-dark">{% trans 'Forgotten your password or username?' %}</a>
         </form>

photo21/templates/registration/password_change_form.html

@@ -2,7 +2,7 @@
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
-{% load i18n %}
+{% load i18n crispy_forms_tags %}
 
 {% block content %}
 <div class="card bg-light">
@@ -12,7 +12,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <div class="card-body">
         <form method="post">{% csrf_token %}
             <p>{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</p>
-            {{ form }}
+            {{ form|crispy }}
             <input class="btn btn-primary" type="submit" value="{% trans 'Change my password' %}">
         </form>
     </div>

photo21/templates/registration/password_reset_confirm.html

@@ -2,7 +2,7 @@
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
-{% load i18n %}
+{% load i18n crispy_forms_tags %}
 
 {% block content %}
 <div class="card bg-light">
@@ -13,8 +13,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {% if validlink %}
         <p>{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}</p>
         <form method="post">{% csrf_token %}
-            {{ form }}
+            {{ form|crispy }}
-            <input class="btn btn-primary" type="submit" value="{% trans 'Change my password' %}">
+            <input class="btn btn-primary mt-4" type="submit" value="{% trans 'Change my password' %}">
         </form>
         {% else %}
         <p>

photo21/templates/registration/password_reset_form.html

@@ -2,7 +2,7 @@
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
-{% load i18n %}
+{% load i18n crispy_forms_tags %}
 
 {% block content %}
 <div class="card bg-light">
@@ -14,8 +14,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
         <form method="post">
             {% csrf_token %}
-            {{ form }}
+            {{ form|crispy }}
-            <input class="btn btn-primary" type="submit" value="{% trans 'Reset my password' %}">
+            <input class="btn btn-primary mt-4" type="submit" value="{% trans 'Reset my password' %}">
         </form>
     </div>
 </div>

requirements.txt

@@ -1,3 +1,4 @@
 Django~=2.2.20
 django-photologue~=3.13
 django-taggit~=1.5.1
+django-crispy-forms~=1.7