feat(templates/registration): make the forms look better

pyproject.toml

@@ -13,6 +13,8 @@ psycopg2 = "^2.9.7"
 django-environ = "^0.11.2"
 django-guardian = "^2.4.0"
 django-bootstrap-v5 = "^1.0.11"
+django-crispy-forms = "^2.1"
+crispy-bootstrap5 = "^2023.10"
 
 [tool.poetry.group.dev.dependencies]
 pre-commit = "^3.4.0"

server/settings/base.py

@@ -74,6 +74,8 @@
 THIRD_PARTY_APPS = [
     "guardian",
     "bootstrap5",
+    "crispy_forms",
+    "crispy_bootstrap5",
 ]
 
 LOCAL_APPS = [
@@ -153,3 +155,11 @@
 #####################
 
 ANONYMOUS_USER_NAME = None
+
+##################
+#  Crispy Forms  #
+##################
+
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+
+CRISPY_TEMPLATE_PACK = "bootstrap5"

templates/registration/login.html

@@ -3,38 +3,36 @@
 {% block title %}Login{% endblock title %}
 
 {% block content %}
-{% if form.errors %}
-<p>Your username and password didn't match. Please try again.</p>
-{% endif %}
 
 {% if next %}
-    {% if user.is_authenticated %}
-    <p>Your account doesn't have access to this page. To proceed,
-    please login with an account that has access.</p>
-    {% else %}
-    <p>Please login to see this page.</p>
-    {% endif %}
+  {% if user.is_authenticated %}
+    <p>
+      Your account doesn't have access to this page. To proceed, please login
+      with an account that has access.
+    </p>
+  {% else %}
+    <p>
+      Please login to see this page.
+    </p>
+  {% endif %}
 {% endif %}
 
+{% load crispy_forms_tags %}
+
 <form method="post" action="{% url 'login' %}">
-  <div class=" row justify-content-center">
-    <div class="col-md-6">
+  {% csrf_token %}
+
+  <div class="row justify-content-center">
+    <div class="col-md-9">
       <div class="card">
-        <div class="card-header">Login</div>
+        <div class="card-header">
+          Sign in to your account
+        </div>
         <div class="card-body">
-            {% csrf_token %}
-            <div class="mb-3">
-            <label for="inputEmail1" class="form-label">{{ form.username.label_tag }}</label>
-              {{ form.username }}
-            </div>
-            <div class="mb-3">
-            <label for="inputPassword1" class="form-label">{{ form.password.label_tag }}</label>
-              {{ form.password }}
-            </div>
-            <input type="submit" class="btn btn-primary" value="Login">
-            <input type="hidden" name="next" value="{{ next }}">
-            {# Assumes you set up the password_reset view in your URLconf #}
-            <p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+          {{ form|crispy }}
+
+          <input type="submit" class="btn btn-primary" style="width: 100%; margin-top: 25px;" value="Login">
+          <input type="hidden" name="next" value="{{ next }}">
         </div>
       </div>
     </div>

templates/registration/register.html

@@ -3,7 +3,41 @@
 {% block title %}Register{% endblock title %}
 
 {% block content %}
-  <div class="container mt-5">
+
+{% if next %}
+  {% if user.is_authenticated %}
+    <p>
+      Your account doesn't have access to this page. To proceed, please login
+      with an account that has access.
+    </p>
+  {% else %}
+    <p>
+      Please login to see this page.
+    </p>
+  {% endif %}
+{% endif %}
+
+{% load crispy_forms_tags %}
+
+<form method="post" action="{% url 'users:register' %}">
+  {% csrf_token %}
+
+  <div class="row justify-content-center">
+    <div class="col-md-9">
+      <div class="card">
+        <div class="card-header">Register a new account</div>
+        <div class="card-body">
+          {{ form|crispy }}
+
+          <input type="submit" class="btn btn-primary" style="width: 100%; margin-top: 25px;" value="Register">
+          <input type="hidden" name="next" value="{{ next }}">
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+
+  <!-- <div class="container mt-5">
     <div class="row justify-content-center">
       <div class="col-md-6">
         <div class="card">
@@ -22,5 +56,5 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 {% endblock content %}