From e9b5f8f3efdf8b2ea18db335b7dd63a02be40b6d Mon Sep 17 00:00:00 2001
From: Dani Hodovic <dani.hodovic@gmail.com>
Date: Mon, 20 May 2024 23:28:24 -0300
Subject: [PATCH] ci: run manage.py validate_templates and djlint

---
 .github/workflows/ci-cd.yml                   |  5 ++
 allauth_ui/templates/account/_button.html     | 23 +++--
 allauth_ui/templates/account/_links.html      |  7 +-
 .../templates/account/_non_field_errors.html  | 12 ++-
 .../templates/account/_render_form.html       | 32 +++----
 allauth_ui/templates/account/base.html        | 55 ++++++------
 .../templates/account/email_confirm.html      | 37 ++++----
 allauth_ui/templates/account/login.html       | 87 +++++++++----------
 allauth_ui/templates/account/logout.html      | 19 ++--
 .../templates/account/password_reset.html     | 29 ++++---
 .../account/password_reset_done.html          | 33 ++++---
 .../account/password_reset_from_key.html      | 53 ++++++-----
 .../account/password_reset_from_key_done.html | 22 +++--
 allauth_ui/templates/account/signup.html      | 25 +++---
 .../templates/account/signup_closed.html      | 22 ++---
 .../templates/account/verification_sent.html  | 25 +++---
 .../socialaccount/authentication_error.html   | 28 +++---
 allauth_ui/templates/socialaccount/base.html  |  2 +-
 .../templates/socialaccount/connections.html  | 84 +++++++++---------
 allauth_ui/templates/socialaccount/login.html | 38 ++++----
 .../templates/socialaccount/signup.html       | 30 +++----
 .../socialaccount/snippets/provider_list.html | 19 ++--
 .../socialaccount/snippets/social_login.html  | 18 ++--
 23 files changed, 356 insertions(+), 349 deletions(-)

diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index 76112e1..344f3a6 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -62,6 +62,11 @@ jobs:
           source .venv/bin/activate
           ./manage.py validate_templates
 
+      - name: Django Template/Html Lint (djlint)
+        run: |
+          source .venv/bin/activate
+          djlint . --check
+
   test:
     name: Test
     runs-on: ubuntu-latest
diff --git a/allauth_ui/templates/account/_button.html b/allauth_ui/templates/account/_button.html
index cdba0dd..6bfd087 100644
--- a/allauth_ui/templates/account/_button.html
+++ b/allauth_ui/templates/account/_button.html
@@ -1,15 +1,12 @@
 {% with base_color=base_color|default:"bg-blue" %}
-<button type="submit" class="flex items-center justify-center w-64 h-12 px-6 mt-8 text-lg text-white uppercase {{ base_color }}-600 rounded text-bold hover:{{ base_color }}-700">
-  <svg class="hidden w-5 h-5 mr-3 animate-spin" viewBox="0 0 24 24">
-    <path
-      className="opacity-25"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    ></path>
-  </svg>
-  {{ text }}
-
-   <script>
+    <button type="submit"
+            class="flex items-center justify-center w-64 h-12 px-6 mt-8 text-lg text-white uppercase {{ base_color }}-600 rounded text-bold hover:{{ base_color }}-700">
+        <svg class="hidden w-5 h-5 mr-3 animate-spin" viewBox="0 0 24 24">
+            <path className="opacity-25" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+            </path>
+        </svg>
+        {{ text }}
+        <script>
     const script = document.currentScript;
     const button = script.parentElement;
     const form = button.closest("form");
@@ -36,6 +33,6 @@
         loader.classList.toggle("hidden");
       }, 3000);
     }, true);
-   </script>
-</button>
+        </script>
+    </button>
 {% endwith %}
diff --git a/allauth_ui/templates/account/_links.html b/allauth_ui/templates/account/_links.html
index 6fe1d9f..f43b790 100644
--- a/allauth_ui/templates/account/_links.html
+++ b/allauth_ui/templates/account/_links.html
@@ -1,5 +1,6 @@
 <div class="flex justify-center mt-6 text-xs">
-  <a class="text-blue-400 hover:text-blue-500" href="/">Home</a>
-  <span class="mx-2 text-gray-300">/</span>
-  <a class="text-blue-400 hover:text-blue-500" href="{% url 'account_login' %}">Log In</a>
+    <a class="text-blue-400 hover:text-blue-500" href="/">Home</a>
+    <span class="mx-2 text-gray-300">/</span>
+    <a class="text-blue-400 hover:text-blue-500"
+       href="{% url 'account_login' %}">Log In</a>
 </div>
diff --git a/allauth_ui/templates/account/_non_field_errors.html b/allauth_ui/templates/account/_non_field_errors.html
index f3d7cf3..1998af7 100644
--- a/allauth_ui/templates/account/_non_field_errors.html
+++ b/allauth_ui/templates/account/_non_field_errors.html
@@ -1,9 +1,7 @@
 {% if form.non_field_errors %}
-  <ul class="max-w-xs">
-  {% for error in form.non_field_errors %}
-  <li class="my-6 text-xs font-medium tracking-wide text-red-500">
-    {{ error }}
-  </li>
-  {% endfor %}
-  </ul>
+    <ul class="max-w-xs">
+        {% for error in form.non_field_errors %}
+            <li class="my-6 text-xs font-medium tracking-wide text-red-500">{{ error }}</li>
+        {% endfor %}
+    </ul>
 {% endif %}
diff --git a/allauth_ui/templates/account/_render_form.html b/allauth_ui/templates/account/_render_form.html
index 35158cd..c9f8194 100644
--- a/allauth_ui/templates/account/_render_form.html
+++ b/allauth_ui/templates/account/_render_form.html
@@ -1,25 +1,21 @@
 {% load widget_tweaks %}
-
 {% csrf_token %}
-
 {% if redirect_field_value %}
-<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
+    <input type="hidden"
+           name="{{ redirect_field_name }}"
+           value="{{ redirect_field_value }}" />
 {% endif %}
-
 {% include "account/_non_field_errors.html" %}
-
 {% for field in form.visible_fields %}
-  <div class="mb-4">
-  {{ field|add_label_class:"font-semibold text-xs" }}
-  {% if field.errors %}
-  {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 border-red-500 rounded focus:outline-none focus:ring-2" %}
-  {% else %}
-  {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 rounded focus:outline-none focus:ring-2" %}
-  {% endif %}
-  {% for error in field.errors %}
-  <span class="flex items-center max-w-xs mt-1 ml-1 text-xs font-medium tracking-wide text-red-500">
-    {{ error }}
-  </span>
-  {% endfor %}
-  </div>
+    <div class="mb-4">
+        {{ field|add_label_class:"font-semibold text-xs" }}
+        {% if field.errors %}
+            {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 border-red-500 rounded focus:outline-none focus:ring-2" %}
+        {% else %}
+            {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 rounded focus:outline-none focus:ring-2" %}
+        {% endif %}
+        {% for error in field.errors %}
+            <span class="flex items-center max-w-xs mt-1 ml-1 text-xs font-medium tracking-wide text-red-500">{{ error }}</span>
+        {% endfor %}
+    </div>
 {% endfor %}
diff --git a/allauth_ui/templates/account/base.html b/allauth_ui/templates/account/base.html
index 23b8008..e406ce0 100644
--- a/allauth_ui/templates/account/base.html
+++ b/allauth_ui/templates/account/base.html
@@ -1,32 +1,33 @@
 {% load static %}
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block head_title %}{% endblock %}</title>
-    <link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
-    {% block extra_head %}
-    {% endblock %}
-  </head>
-  <body>
-    {% if messages %}
-    <div>
-      {% for message in messages %}
-      <div class="flex items-center px-4 py-3 text-sm font-bold text-white bg-blue-500" role="alert">
-        <p>{{ message }}</p>
-      </div>
-      {% endfor %}
-    </div>
-    {% endif %}
-    {% block content %}
-    <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
-      <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg grow-0">
-        {% block whitebox %}
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>
+            {% block head_title %}{% endblock %}
+        </title>
+        <link rel="stylesheet" href="{% static 'allauth_ui/output.css' %}">
+        {% block extra_head %}{% endblock %}
+    </head>
+    <body>
+        {% if messages %}
+            <div>
+                {% for message in messages %}
+                    <div class="flex items-center px-4 py-3 text-sm font-bold text-white bg-blue-500"
+                         role="alert">
+                        <p>{{ message }}</p>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+        {% block content %}
+            <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
+                <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg grow-0">
+                    {% block whitebox %}{% endblock %}
+                </div>
+            </div>
         {% endblock %}
-    </div>
-  </div>
-    {% endblock %}
-  </body>
+    </body>
 </html>
diff --git a/allauth_ui/templates/account/email_confirm.html b/allauth_ui/templates/account/email_confirm.html
index 0734fb9..2da8a4d 100644
--- a/allauth_ui/templates/account/email_confirm.html
+++ b/allauth_ui/templates/account/email_confirm.html
@@ -1,27 +1,28 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
 {% load account %}
-
-{% block head_title %}{% trans "Confirm E-mail Address" %}{% endblock %}
-
+{% block head_title %}
+    {% trans "Confirm E-mail Address" %}
+{% endblock %}
 {% block whitebox %}
-<h1 class="mb-5 text-3xl text-center">{% trans "Confirm E-mail Address" %}</h1>
-{% if confirmation %}
-<p class="py-3">
-  {% blocktrans with confirmation.email_address.email as email %}
+    <h1 class="mb-5 text-3xl text-center">{% trans "Confirm E-mail Address" %}</h1>
+    {% if confirmation %}
+        <p class="py-3">
+            {% blocktrans with confirmation.email_address.email as email %}
   Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an e-mail address for user {{ user_display }}.
   {% endblocktrans %}
-</p>
-<form method="POST" action="{% url 'account_confirm_email' confirmation.key %}" class="flex flex-col mt-4">
-  {% include "account/_render_form.html" %}
-  {% include "account/_button.html" with text="Confirm" %}
-</form>
-{% else %}
-{% url 'account_email' as email_url %}
-  {% blocktrans %}
+        </p>
+        <form method="POST"
+              action="{% url 'account_confirm_email' confirmation.key %}"
+              class="flex flex-col mt-4">
+            {% include "account/_render_form.html" %}
+            {% include "account/_button.html" with text="Confirm" %}
+        </form>
+    {% else %}
+        {% url 'account_email' as email_url %}
+        {% blocktrans %}
   This e-mail confirmation link expired or is invalid. Please <a href="{{ email_url }}">issue a new e-mail confirmation request.</a>
   {% endblocktrans %}
-{% endif %}
-{% include "account/_links.html" %}
+    {% endif %}
+    {% include "account/_links.html" %}
 {% endblock %}
diff --git a/allauth_ui/templates/account/login.html b/allauth_ui/templates/account/login.html
index 5b2f497..a0eac01 100644
--- a/allauth_ui/templates/account/login.html
+++ b/allauth_ui/templates/account/login.html
@@ -1,54 +1,47 @@
 {% extends "account/base.html" %}
 {% load i18n account allauth_ui widget_tweaks %}
-
 {% block head_title %}
-  {% translate "Sign in" %}
+    {% translate "Sign in" %}
 {% endblock %}
-
 {% block whitebox %}
-<h1 class="mb-5 text-3xl text-center">Sign in</h1>
-<form method="POST" action="{% url 'account_login' %}" class="flex flex-col items-center grow-0">
-  {% csrf_token %}
-
-  {% include "account/_non_field_errors.html" %}
-
-  {% for field in form.visible_fields %}
-    {% if field.name != "remember" %}
-    <div class="mb-4">
-    {{ field|add_label_class:"font-semibold text-xs" }}
-    {% if field.errors %}
-    {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 border-red-500 rounded focus:outline-none focus:ring-2" %}
-    {% else %}
-    {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 rounded focus:outline-none focus:ring-2" %}
+    <h1 class="mb-5 text-3xl text-center">Sign in</h1>
+    <form method="POST"
+          action="{% url 'account_login' %}"
+          class="flex flex-col items-center grow-0">
+        {% csrf_token %}
+        {% include "account/_non_field_errors.html" %}
+        {% for field in form.visible_fields %}
+            {% if field.name != "remember" %}
+                <div class="mb-4">
+                    {{ field|add_label_class:"font-semibold text-xs" }}
+                    {% if field.errors %}
+                        {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 border-red-500 rounded focus:outline-none focus:ring-2" %}
+                    {% else %}
+                        {% render_field field class="flex items-center w-64 h-12 px-4 pb-2 mt-2 rounded focus:outline-none focus:ring-2" %}
+                    {% endif %}
+                    {% for error in field.errors %}
+                        <span class="flex items-center max-w-xs mt-1 ml-1 text-xs font-medium tracking-wide text-red-500">{{ error }}</span>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endfor %}
+        {% translate "Login" as login_text %}
+        {% include "account/_button.html" with text=login_text %}
+        <div class="flex justify-center mt-6 text-xs">
+            <a class="text-blue-400 hover:text-blue-500"
+               href="{% url 'account_reset_password' %}">{% translate "Forgot Password" %}</a>
+            <span class="mx-2 text-gray-300">/</span>
+            <a class="text-blue-400 hover:text-blue-500"
+               href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
+        </div>
+        {% if redirect_field_value %}
+            <input type="hidden"
+                   name="{{ redirect_field_name }}"
+                   value="{{ redirect_field_value }}" />
+        {% endif %}
+    </form>
+    {% check_allauth_socialaccount_installed as is_allauth_socialaccount_installed %}
+    {% if is_allauth_socialaccount_installed %}
+        {% include "socialaccount/snippets/social_login.html" %}
     {% endif %}
-    {% for error in field.errors %}
-    <span class="flex items-center max-w-xs mt-1 ml-1 text-xs font-medium tracking-wide text-red-500">
-      {{ error }}
-    </span>
-    {% endfor %}
-    </div>
-    {% endif %}
-  {% endfor %}
-
-  {% translate "Login" as login_text %}
-  {% include "account/_button.html" with text=login_text %}
-
-  <div class="flex justify-center mt-6 text-xs">
-    <a class="text-blue-400 hover:text-blue-500" href="{% url 'account_reset_password' %}">{% translate "Forgot Password" %}
-    </a>
-    <span class="mx-2 text-gray-300">/</span>
-    <a class="text-blue-400 hover:text-blue-500" href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
-  </div>
-
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-</form>
-
-
-{% check_allauth_socialaccount_installed as is_allauth_socialaccount_installed %}
-{% if is_allauth_socialaccount_installed %}
-{% include "socialaccount/snippets/social_login.html" %}
-{% endif %}
-
 {% endblock %}
diff --git a/allauth_ui/templates/account/logout.html b/allauth_ui/templates/account/logout.html
index e518728..4d77aec 100644
--- a/allauth_ui/templates/account/logout.html
+++ b/allauth_ui/templates/account/logout.html
@@ -1,12 +1,13 @@
 {% extends "account/base.html" %}
-
-{% block head_title %}{% translate "Sign out" %}{% endblock %}
-
+{% load i18n %}
+{% block head_title %}
+    {% translate "Sign out" %}
+{% endblock %}
 {% block whitebox %}
-<form method="post" action="{% url 'account_logout' %}">
-  {% csrf_token %}
-  <p>{% translate "Are you sure you want to sign out? %}</p>
-  {% translate "Sign out" as signout_message }
-  {% include "account/_button.html" with text=signout_message %}
-</form>
+    <form method="post" action="{% url 'account_logout' %}">
+        {% csrf_token %}
+        <p>{% translate "Are you sure you want to sign out?" %}</p>
+        {% translate "Sign out" as signout_message }
+        {% include "account/_button.html" with text=signout_message %}
+    </form>
 {% endblock %}
diff --git a/allauth_ui/templates/account/password_reset.html b/allauth_ui/templates/account/password_reset.html
index f211f00..097309a 100644
--- a/allauth_ui/templates/account/password_reset.html
+++ b/allauth_ui/templates/account/password_reset.html
@@ -1,16 +1,19 @@
 {% extends "account/base.html" %}
-
-{% block head_title %}{% translate "Password Reset" %}{% endblock %}
-
+{% load i18n %}
+{% block head_title %}
+    {% translate "Password Reset" %}
+{% endblock %}
 {% block whitebox %}
-<h1 class="mb-5 text-3xl text-center">{% translate "Password Reset" %}</h1>
-<p class="mb-5 text-sm text-center">
-  {% translate "Enter your user account's verified email address and we will send you a password reset link." %}
-</p>
-<form method="POST" action="{% url 'account_reset_password' %}" class="flex flex-col mt-4">
-  {% include "account/_render_form.html" %}
-  {% translate "Reset my password" as reset_text %}
-  {% include "account/_button.html" with text=reset_text %}
-</form>
-{% include "account/_links.html" %}
+    <h1 class="mb-5 text-3xl text-center">{% translate "Password Reset" %}</h1>
+    <p class="mb-5 text-sm text-center">
+        {% translate "Enter your user account's verified email address and we will send you a password reset link." %}
+    </p>
+    <form method="POST"
+          action="{% url 'account_reset_password' %}"
+          class="flex flex-col mt-4">
+        {% include "account/_render_form.html" %}
+        {% translate "Reset my password" as reset_text %}
+        {% include "account/_button.html" with text=reset_text %}
+    </form>
+    {% include "account/_links.html" %}
 {% endblock %}
diff --git a/allauth_ui/templates/account/password_reset_done.html b/allauth_ui/templates/account/password_reset_done.html
index ac8e374..a319ced 100644
--- a/allauth_ui/templates/account/password_reset_done.html
+++ b/allauth_ui/templates/account/password_reset_done.html
@@ -1,17 +1,22 @@
 {% extends "account/base.html" %}
-
-{% block head_title %}{% translate "Password Reset" %}{% endblock %}
-
+{% load i18n %}
+{% block head_title %}
+    {% translate "Password Reset" %}
+{% endblock %}
 {% block content %}
-<div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
-  <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg">
-    <h1 class="mb-8 text-3xl text-center">{% translate "Reset email sent" %}</h1>
-  <p class="flex items-center px-4 py-3 text-sm font-bold text-white bg-blue-500 rounded" role="alert">
-    <svg class="w-4 h-4 mr-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
-      {% translate "We have sent you an e-mail. Please contact us if you do not receive it within a few minutes." %}
-  </p>
-
-  {% include "account/_links.html" %}
-  </div>
-</div>
+    <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
+        <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg">
+            <h1 class="mb-8 text-3xl text-center">{% translate "Reset email sent" %}</h1>
+            <p class="flex items-center px-4 py-3 text-sm font-bold text-white bg-blue-500 rounded"
+               role="alert">
+                <svg class="w-4 h-4 mr-2 fill-current"
+                     xmlns="http://www.w3.org/2000/svg"
+                     viewBox="0 0 20 20">
+                    <path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
+                </svg>
+                {% translate "We have sent you an e-mail. Please contact us if you do not receive it within a few minutes." %}
+            </p>
+            {% include "account/_links.html" %}
+        </div>
+    </div>
 {% endblock %}
diff --git a/allauth_ui/templates/account/password_reset_from_key.html b/allauth_ui/templates/account/password_reset_from_key.html
index 042dc08..6711a83 100644
--- a/allauth_ui/templates/account/password_reset_from_key.html
+++ b/allauth_ui/templates/account/password_reset_from_key.html
@@ -1,30 +1,35 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Change Password" %}{% endblock %}
-
+{% block head_title %}
+    {% translate "Change Password" %}
+{% endblock %}
 {% block whitebox %}
-<h1 class="mb-5 text-3xl">{% if token_fail %}{% trans "Bad Token" %}{% else %}{% trans "Change Password" %}{% endif %}</h1>
-{% if token_fail %}
-    <div class="px-4 py-3" role="alert">
-      <strong class="font-bold">Invalid token!</strong>
-      <span class="block text-black">
-        {% url 'account_reset_password' as passwd_reset_url %}
-        {% blocktrans %}The password reset link was invalid, possibly because it has already been used. <br>
+    <h1 class="mb-5 text-3xl">
+        {% if token_fail %}
+            {% trans "Bad Token" %}
+        {% else %}
+            {% trans "Change Password" %}
+        {% endif %}
+    </h1>
+    {% if token_fail %}
+        <div class="px-4 py-3" role="alert">
+            <strong class="font-bold">Invalid token!</strong>
+            <span class="block text-black">
+                {% url 'account_reset_password' as passwd_reset_url %}
+                {% blocktrans %}The password reset link was invalid, possibly because it has already been used. <br>
         Please request a
         <a class="text-blue-400 hover:text-blue-500" href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}
-      </span>
-    </div>
-{% else %}
-  {% if form %}
-      <form method="POST" action="{{ action_url }}">
-        {% include "account/_render_form.html" %}
-        {% translate "Change password" as change_text %}
-        {% include "account/_button.html" with text=change_text %}
-      </form>
-  {% else %}
-      <p>{% trans 'Your password is now changed.' %}</p>
-  {% endif %}
-{% endif %}
+            </span>
+        </div>
+    {% else %}
+        {% if form %}
+            <form method="POST" action="{{ action_url }}">
+                {% include "account/_render_form.html" %}
+                {% translate "Change password" as change_text %}
+                {% include "account/_button.html" with text=change_text %}
+            </form>
+        {% else %}
+            <p>{% trans 'Your password is now changed.' %}</p>
+        {% endif %}
+    {% endif %}
 {% endblock %}
diff --git a/allauth_ui/templates/account/password_reset_from_key_done.html b/allauth_ui/templates/account/password_reset_from_key_done.html
index c8dccc3..9611168 100644
--- a/allauth_ui/templates/account/password_reset_from_key_done.html
+++ b/allauth_ui/templates/account/password_reset_from_key_done.html
@@ -1,16 +1,14 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% trans "Changed Password" %}{% endblock %}
-
+{% block head_title %}
+    {% trans "Changed Password" %}
+{% endblock %}
 {% block content %}
-<div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
-  <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg">
-    <h1 class="mb-5 text-3xl">{% trans "Changed Password" %}</h1>
-    <p>{% trans 'Your password is now changed.' %}</p>
-
-    {% include "account/_links.html" %}
-  </div>
-</div>
+    <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
+        <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg">
+            <h1 class="mb-5 text-3xl">{% trans "Changed Password" %}</h1>
+            <p>{% trans 'Your password is now changed.' %}</p>
+            {% include "account/_links.html" %}
+        </div>
+    </div>
 {% endblock %}
diff --git a/allauth_ui/templates/account/signup.html b/allauth_ui/templates/account/signup.html
index d793a0c..c2dafff 100644
--- a/allauth_ui/templates/account/signup.html
+++ b/allauth_ui/templates/account/signup.html
@@ -1,13 +1,18 @@
 {% extends "account/base.html" %}
-
-{% block head_title %}{% translate "Sign up" %}{% endblock %}
-
+{% load i18n %}
+{% block head_title %}
+    {% translate "Sign up" %}
+{% endblock %}
 {% block whitebox %}
-<h1 class="mb-5 text-3xl text-center">Sign up</h1>
-<form id="signup_form" method="post" action="{% url 'account_signup' %}" novalidate>
-  {% include "account/_render_form.html" %}
-  {% translate "Sign up" as signup_text %}
-  {% include "account/_button.html" with text=signup_text %}
-</form>
-<a class="self-center pt-8 text-xs text-blue-400 justify-self-center hover:text-blue-500" href="{{ login_url }}">{% translate "Already have an account? Sign in." %}</a>
+    <h1 class="mb-5 text-3xl text-center">Sign up</h1>
+    <form id="signup_form"
+          method="post"
+          action="{% url 'account_signup' %}"
+          novalidate>
+        {% include "account/_render_form.html" %}
+        {% translate "Sign up" as signup_text %}
+        {% include "account/_button.html" with text=signup_text %}
+    </form>
+    <a class="self-center pt-8 text-xs text-blue-400 justify-self-center hover:text-blue-500"
+       href="{{ login_url }}">{% translate "Already have an account? Sign in." %}</a>
 {% endblock %}
diff --git a/allauth_ui/templates/account/signup_closed.html b/allauth_ui/templates/account/signup_closed.html
index 2858386..0a04cc4 100644
--- a/allauth_ui/templates/account/signup_closed.html
+++ b/allauth_ui/templates/account/signup_closed.html
@@ -1,14 +1,14 @@
 {% extends "account/base.html" %}
-{% load i18n %}
-{% load allauth %}
-
-{% block head_title %}{% trans "Sign Up Closed" %}{% endblock head_title %}
+{% load i18n account %}
+{% block head_title %}
+    {% trans "Sign Up Closed" %}
+{% endblock head_title %}
 {% block content %}
-<div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
-  <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg md:w-7/12 xl:w-5/12">
-    <h1 class="mb-5 text-3xl text-center">{% trans "Sign Up Closed" %}</h1>
-    <p class="my-5">{% trans "We are sorry, but the sign up is currently closed." %}</p>
-    {% include "account/_links.html" %}
-  </div>
-</div>
+    <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
+        <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg md:w-7/12 xl:w-5/12">
+            <h1 class="mb-5 text-3xl text-center">{% trans "Sign Up Closed" %}</h1>
+            <p class="my-5">{% trans "We are sorry, but the sign up is currently closed." %}</p>
+            {% include "account/_links.html" %}
+        </div>
+    </div>
 {% endblock content %}
diff --git a/allauth_ui/templates/account/verification_sent.html b/allauth_ui/templates/account/verification_sent.html
index 9fc4fce..0ff1960 100644
--- a/allauth_ui/templates/account/verification_sent.html
+++ b/allauth_ui/templates/account/verification_sent.html
@@ -1,20 +1,19 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% trans "Verify Your E-mail Address" %}{% endblock %}
-
+{% block head_title %}
+    {% trans "Verify Your E-mail Address" %}
+{% endblock %}
 {% block content %}
-<div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
-  <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg md:w-7/12 xl:w-5/12">
-    <h1 class="mb-5 text-3xl text-center">{% trans "Verify Your E-mail Address" %}</h1>
-    <p class="py-3">
-      {% blocktrans %}
+    <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
+        <div class="flex flex-col items-center p-12 bg-white rounded shadow-lg md:w-7/12 xl:w-5/12">
+            <h1 class="mb-5 text-3xl text-center">{% trans "Verify Your E-mail Address" %}</h1>
+            <p class="py-3">
+                {% blocktrans %}
       We have sent an e-mail to you for verification. Follow the link provided to finalize the signup process.
       Please contact us if you do not receive it within a few minutes.
       {% endblocktrans %}
-    </p>
-    {% include "account/_links.html" %}
-  </div>
-</div>
+            </p>
+            {% include "account/_links.html" %}
+        </div>
+    </div>
 {% endblock %}
diff --git a/allauth_ui/templates/socialaccount/authentication_error.html b/allauth_ui/templates/socialaccount/authentication_error.html
index 5f1b2f8..f07ab31 100644
--- a/allauth_ui/templates/socialaccount/authentication_error.html
+++ b/allauth_ui/templates/socialaccount/authentication_error.html
@@ -1,19 +1,17 @@
 {% extends "socialaccount/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% trans "Social Network Login Failure" %}{% endblock %}
-
+{% block head_title %}
+    {% trans "Social Network Login Failure" %}
+{% endblock %}
 {% block content %}
-<div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
-  <div class="inline-flex flex-col items-center p-12 bg-white rounded shadow-lg">
-    <h1 class="mb-5 text-3xl text-center">{% trans "Social Network Login Failure" %}</h1>
-
-    <p>
-      {% trans "An error occurred while attempting to login via your social network account." %}
-    </p>
-    <p><strong>Code: {{ auth_error.code }}</strong></p>
-    <p>Error: {{ auth_error.exception }}</p>
-  </div>
-</div>
+    <div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
+        <div class="inline-flex flex-col items-center p-12 bg-white rounded shadow-lg">
+            <h1 class="mb-5 text-3xl text-center">{% trans "Social Network Login Failure" %}</h1>
+            <p>{% trans "An error occurred while attempting to login via your social network account." %}</p>
+            <p>
+                <strong>Code: {{ auth_error.code }}</strong>
+            </p>
+            <p>Error: {{ auth_error.exception }}</p>
+        </div>
+    </div>
 {% endblock %}
diff --git a/allauth_ui/templates/socialaccount/base.html b/allauth_ui/templates/socialaccount/base.html
index 8a64a55..b64fd56 100644
--- a/allauth_ui/templates/socialaccount/base.html
+++ b/allauth_ui/templates/socialaccount/base.html
@@ -1 +1 @@
-{% extends "account/base.html" %}
\ No newline at end of file
+{% extends "account/base.html" %}
diff --git a/allauth_ui/templates/socialaccount/connections.html b/allauth_ui/templates/socialaccount/connections.html
index 9f3f42f..5f8549e 100644
--- a/allauth_ui/templates/socialaccount/connections.html
+++ b/allauth_ui/templates/socialaccount/connections.html
@@ -1,46 +1,46 @@
 {% extends "socialaccount/base.html" %}
 {% load i18n %}
-
-{% block head_title %}{% trans "Account Connections" %}{% endblock %}
-
+{% block head_title %}
+    {% trans "Account Connections" %}
+{% endblock %}
 {% block whitebox %}
-<h1 class="mb-5 text-xl text-center md:text-3xl">{% trans "Account Connections" %}</h1>
-
-{% if form.accounts %}
-<p class="text-sm md:text-base">{% blocktrans %}You have the following social accounts connected:{% endblocktrans %}</p>
-
-<form class="flex flex-col items-center w-full m-4" method="post" action="{% url 'socialaccount_connections' %}">
-  {% csrf_token %}
-
-  {% include "account/_non_field_errors.html" %}
-
-  {% for base_account in form.accounts %}
-  {% with base_account.get_provider_account as account %}
-  <div class="mb-3">
-  <label for="id_account_{{ base_account.id }}">
-  <input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"
-         class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300"
-  />
-  <span class="text-sm md:text-base">{{account.get_brand.name}}</span>
-  </label>
-  </div>
-  {% endwith %}
-  {% endfor %}
-
-  {% include "account/_button.html" with text="Remove" base_color="bg-red" %}
-</form>
-
-{% else %}
-<p>{% trans 'You currently have no social network accounts connected to this account.' %}</p>
-{% endif %}
-<div class="flex items-center self-stretch justify-between pt-3 mt-3">
-  <hr class="w-full">
-  <span class="p-2 mb-1 text-gray-400">OR</span>
-  <hr class="w-full">
-</div>
-{% trans 'Add a third party account' %}
-<div class="w-full md:w-8/12">
-{% include "socialaccount/snippets/provider_list.html" with process="connect" %}
-{% include "socialaccount/snippets/login_extra.html" %}
-</div>
+    <h1 class="mb-5 text-xl text-center md:text-3xl">{% trans "Account Connections" %}</h1>
+    {% if form.accounts %}
+        <p class="text-sm md:text-base">
+            {% blocktrans %}You have the following social accounts connected:{% endblocktrans %}
+        </p>
+        <form class="flex flex-col items-center w-full m-4"
+              method="post"
+              action="{% url 'socialaccount_connections' %}">
+            {% csrf_token %}
+            {% include "account/_non_field_errors.html" %}
+            {% for base_account in form.accounts %}
+                {% with base_account.get_provider_account as account %}
+                    <div class="mb-3">
+                        <label for="id_account_{{ base_account.id }}">
+                            <input id="id_account_{{ base_account.id }}"
+                                   type="radio"
+                                   name="account"
+                                   value="{{ base_account.id }}"
+                                   class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300" />
+                            <span class="text-sm md:text-base">{{ account.get_brand.name }}</span>
+                        </label>
+                    </div>
+                {% endwith %}
+            {% endfor %}
+            {% include "account/_button.html" with text="Remove" base_color="bg-red" %}
+        </form>
+    {% else %}
+        <p>{% trans 'You currently have no social network accounts connected to this account.' %}</p>
+    {% endif %}
+    <div class="flex items-center self-stretch justify-between pt-3 mt-3">
+        <hr class="w-full">
+        <span class="p-2 mb-1 text-gray-400">OR</span>
+        <hr class="w-full">
+    </div>
+    {% trans 'Add a third party account' %}
+    <div class="w-full md:w-8/12">
+        {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
+        {% include "socialaccount/snippets/login_extra.html" %}
+    </div>
 {% endblock %}
diff --git a/allauth_ui/templates/socialaccount/login.html b/allauth_ui/templates/socialaccount/login.html
index 219d036..a99278a 100644
--- a/allauth_ui/templates/socialaccount/login.html
+++ b/allauth_ui/templates/socialaccount/login.html
@@ -1,19 +1,25 @@
 {% extends "socialaccount/base.html" %}
-
+{% load i18n %}
 {% block whitebox %}
-<div class="flex items-center px-4 py-3 text-sm text-white bg-blue-500 rounded" role="alert">
-  <svg class="w-4 h-4 mr-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
-  <p>
-    {% if process == "connect" %}
-    {% translate "You are about to connect a new third party account from" %} {{ provider.name }}.
-    {% else %}
-    {% translate "You are about to sign in using a third party account from" %} {{ provider.name }}.
-    {% endif %}
-  </p>
-</div>
-<form method="POST" class="flex flex-col items-center justify-center pt-5 py-10">
-  {% csrf_token %}
-  {% translate "Continue" as continue_text %}
-  {% include "account/_button.html" with text=continue_text %}
-</form>
+    <div class="flex items-center px-4 py-3 text-sm text-white bg-blue-500 rounded"
+         role="alert">
+        <svg class="w-4 h-4 mr-2 fill-current"
+             xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 20 20">
+            <path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
+        </svg>
+        <p>
+            {% if process == "connect" %}
+                {% translate "You are about to connect a new third party account from" %} {{ provider.name }}.
+            {% else %}
+                {% translate "You are about to sign in using a third party account from" %} {{ provider.name }}.
+            {% endif %}
+        </p>
+    </div>
+    <form method="POST"
+          class="flex flex-col items-center justify-center pt-5 py-10">
+        {% csrf_token %}
+        {% translate "Continue" as continue_text %}
+        {% include "account/_button.html" with text=continue_text %}
+    </form>
 {% endblock %}
diff --git a/allauth_ui/templates/socialaccount/signup.html b/allauth_ui/templates/socialaccount/signup.html
index 9d6da5e..63665ee 100644
--- a/allauth_ui/templates/socialaccount/signup.html
+++ b/allauth_ui/templates/socialaccount/signup.html
@@ -1,22 +1,22 @@
 {% extends "socialaccount/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% trans "Sign Up" %}{% endblock %}
-
+{% block head_title %}
+    {% trans "Sign Up" %}
+{% endblock %}
 {% block whitebox %}
-<h1 class="mb-5 text-3xl text-center">{% trans "Sign Up" %}</h1>
-
-<p class="my-5">
-{% blocktrans with provider_name=account.get_provider.name site_name=site.name %}
+    <h1 class="mb-5 text-3xl text-center">{% trans "Sign Up" %}</h1>
+    <p class="my-5">
+        {% blocktrans with provider_name=account.get_provider.name site_name=site.name %}
   You are about to use your {{provider_name}} account to login to
   {{site_name}}. As a final step, please complete the following form:
 {% endblocktrans %}
-</p>
-
-<form class="signup" id="signup_form" method="post" action="{% url 'socialaccount_signup' %}">
-  {% include "account/_render_form.html" %}
-  {% translate "Sign up" as signup_text %}
-  {% include "account/_button.html" with text=signup_text %}
-</form>
+    </p>
+    <form class="signup"
+          id="signup_form"
+          method="post"
+          action="{% url 'socialaccount_signup' %}">
+        {% include "account/_render_form.html" %}
+        {% translate "Sign up" as signup_text %}
+        {% include "account/_button.html" with text=signup_text %}
+    </form>
 {% endblock %}
diff --git a/allauth_ui/templates/socialaccount/snippets/provider_list.html b/allauth_ui/templates/socialaccount/snippets/provider_list.html
index 4bf9131..6933bfb 100644
--- a/allauth_ui/templates/socialaccount/snippets/provider_list.html
+++ b/allauth_ui/templates/socialaccount/snippets/provider_list.html
@@ -1,16 +1,13 @@
 {% load socialaccount %}
 {% load allauth_ui %}
-
 {% get_providers as socialaccount_providers %}
-
 {% for provider in socialaccount_providers %}
-   {% if provider.id == "openid" %}
-   {% for brand in provider.get_brands %}
-      <a class="flex items-center self-stretch justify-center h-12 mt-3 text-white uppercase rounded bg-stone-900 hover:bg-black"
-        href="{% provider_login_url provider.id  openid=brand.openid_url process=process  %}">{{brand.name}}</a>
-   {% endfor %}
-   {% endif %}
-      <a class="flex items-center justify-center h-12 mt-3 text-white uppercase self-stretch rounded {{ provider | socialprovider_color }}"
-        href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
-
+    {% if provider.id == "openid" %}
+        {% for brand in provider.get_brands %}
+            <a class="flex items-center self-stretch justify-center h-12 mt-3 text-white uppercase rounded bg-stone-900 hover:bg-black"
+               href="{% provider_login_url provider.id  openid=brand.openid_url process=process %}">{{ brand.name }}</a>
+        {% endfor %}
+    {% endif %}
+    <a class="flex items-center justify-center h-12 mt-3 text-white uppercase self-stretch rounded {{ provider | socialprovider_color }}"
+       href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{ provider.name }}</a>
 {% endfor %}
diff --git a/allauth_ui/templates/socialaccount/snippets/social_login.html b/allauth_ui/templates/socialaccount/snippets/social_login.html
index 4d0c96d..fab412c 100644
--- a/allauth_ui/templates/socialaccount/snippets/social_login.html
+++ b/allauth_ui/templates/socialaccount/snippets/social_login.html
@@ -1,14 +1,12 @@
 {% load socialaccount i18n %}
 {% get_providers as socialaccount_providers %}
 {% if socialaccount_providers %}
-<div class="flex items-center self-stretch justify-between pt-3 mt-3">
-  <hr class="w-full">
-  <span class="p-2 mb-1 text-gray-400">OR</span>
-  <hr class="w-full">
-</div>
-
-<p class="text-xs text-center text-gray-500">{% translate "Sign in with a third party" %}</p>
-
-{% include "socialaccount/snippets/provider_list.html" with process="login" %}
-{% include "socialaccount/snippets/login_extra.html" %}
+    <div class="flex items-center self-stretch justify-between pt-3 mt-3">
+        <hr class="w-full">
+        <span class="p-2 mb-1 text-gray-400">OR</span>
+        <hr class="w-full">
+    </div>
+    <p class="text-xs text-center text-gray-500">{% translate "Sign in with a third party" %}</p>
+    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+    {% include "socialaccount/snippets/login_extra.html" %}
 {% endif %}