Use Django Crispy forms

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 }}
-            <input type="submit" value="{% trans 'Log in' %}" class="btn btn-primary btn-block btn-lg">
+            {{ form|crispy }}
+            <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 }}
-            <input class="btn btn-primary" type="submit" value="{% trans 'Change my password' %}">
+            {{ form|crispy }}
+            <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 }}
-            <input class="btn btn-primary" type="submit" value="{% trans 'Reset my password' %}">
+            {{ form|crispy }}
+            <input class="btn btn-primary mt-4" type="submit" value="{% trans 'Reset my password' %}">
         </form>
     </div>
 </div>