feat: Redesign password reset email verification page

Author: Antoliny0919

djangosnippets/static/img/email_verification_expired.png

@@ -1,23 +1,45 @@
 {% extends "account/base.html" %}
-{% load i18n %}
 
-{% block head_title %}{% trans "Change Password" %}{% endblock %}
+{% load static widget_tweaks %}
 
-{% block content_header %}{% if token_fail %}{% trans "Bad Token" %}{% else %}{% trans "Change Password" %}{% endif %}{% endblock %}
+{% block head_title %}{% if token_fail %}Bad Token{% else %}Change Password{% endif %}{% endblock %}
+
+{% block header %}{% endblock %}
 
 {% block content %}
-{% if token_fail %}
-    {% url 'account_reset_password' as passwd_reset_url %}
-    <p>{% blocktrans %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}</p>
-{% else %}
-    {% if form %}
-        <form method="POST" action=".">
+    <div class="w-[40rem] flex flex-col items-center justify-center mx-auto p-8 font-common shadow-sign-content rounded-lg">
+        <h3>{% if token_fail %}Bad Token{% else %}Change Password{% endif %}</h3>
+        {% if token_fail %}
+        <img src="{% static 'img/email_verification_expired.png' %}">
+        <p class="mt-4 text-center">The password reset link was invalid, possibly because it has already been used. Would you like to request a new one?</p>
+        <a class="button" href="{% url 'account_reset_password' %}">New Password Reset</a>
+        {% else %}
+        <p class="my-4 text-center">Enter your new password.</p>
+        <form class="flex flex-col items-center w-[80%]" method="POST" action="{{ action_url }}">
             {% csrf_token %}
-            {{ form.as_p }}
-            <input type="submit" name="action" value="{% trans "change password" %}"/>
+            {% 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">Change Password</button>
         </form>
-    {% else %}
-        <p>{% trans 'Your password is now changed.' %}</p>
-    {% endif %}
-{% endif %}
+        {% endif %}
+    </div>
 {% endblock %}
+{% block footer %}{% endblock %}

djangosnippets/templates/account/password_reset_from_key.html

@@ -34,6 +34,10 @@
     }
 }
 
+.button {
+    @apply border-2 px-4 py-2 my-2 bg-base-green-600 border-base-green-800 hover:bg-base-green-400 rounded-lg;
+}
+
 /**
   * A catch-all path to Django template files, JavaScript, and Python files
   * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.