feat: Redesign password reset page

Author: Antoliny0919

djangosnippets/templates/account/password_reset.html

@@ -1,27 +1,43 @@
 {% extends "account/base.html" %}
 
-{% load i18n %}
-{% load account %}
+{% load widget_tweaks %}
 
-{% block head_title %}{% trans "Reset password" %}{% endblock %}
+{% block head_title %}Reset password{% endblock %}
 
-{% block content_header %}{% trans "Reset password" %}{% endblock %}
+{% block header %}{% endblock %}
 
 {% block content %}
     {% if user.is_authenticated %}
     {% include "account/snippets/already_logged_in.html" %}
     {% endif %}
-    <p>{% trans "Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it." %}</p>
-
-    <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">{% csrf_token %}
-      {{ form.as_p }}
-      <button type="submit">{% trans "Reset password" %}</button>
-    </form>
-    <p>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
-{% endblock %}
-
-{% block extra_scripts %}
-<script>
-    $("#id_email").focus();
-</script>
+    <div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+        {% include "socialaccount/snippets/login_extra.html" %}
+        <h3>Forgotten your password?</h3>
+        <p class="text-center font-xl my-4">Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it.</p>
+        <form class="flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_reset_password' %}">
+            {% csrf_token %}
+            {% if form.non_field_errors %}
+              <ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
+              {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
+              </ul>
+            {% endif %}
+            {% for field in form %}
+            <div class="w-full my-1">
+                <div class="flex w-full my-2">
+                    <label class="text-base text-left">{{ field.label }}</label>
+                    <span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
+                </div>
+                {% if field.errors %}
+                {{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
+                {% else %}
+                {{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
+                {% endif %}
+                {% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
+                {% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
+            </div>
+            {% endfor %}
+            <button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Reset My Password</button>
+        </form>
+    </div>
 {% endblock %}
+{% block footer %}{% endblock %}