chore: style password reset page

savannahghi · Jul 15, 2021 · 087fadb · 087fadb
1 parent c601ca5
commit 087fadb
Showing 1 changed file with 44 additions and 14 deletions.
diff --git a/pepfar_mle/templates/account/password_reset.html b/pepfar_mle/templates/account/password_reset.html
@@ -6,20 +6,50 @@
 
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
-{% block inner %}
-
-    <h1>{% trans "Password Reset" %}</h1>
-    {% if user.is_authenticated %}
-    {% include "account/snippets/already_logged_in.html" %}
-    {% endif %}
+{% block bodyclass %}
+  class="bg-gradient-primary"
+{% endblock %}
 
-    <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>
+{% block page %}
+  {# no modal #}
+{% endblock page %}
 
-    <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
-        {% csrf_token %}
-        {{ form|crispy }}
-        <input class="btn btn-primary" type="submit" value="{% trans 'Reset My Password' %}" />
-    </form>
 
-    <p>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
-{% endblock %}
+{% block inner %}
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-xl-10 col-lg-12 col-md-9">
+      <div class="card o-hidden border-0 shadow-lg my-5">
+        <div class="card-body p-0">
+          <div class="row">
+            <div class="col-lg-6 d-none d-lg-block login-background-image"></div>
+              <div class="col-lg-6">
+                <div class="p-5">
+                  <div class="text-center">
+                    <h1 class="h4 text-gray-900 mb-4">Password Reset</h1>
+                  </div>
+                  {% if user.is_authenticated %}
+                    {% include "account/snippets/already_logged_in.html" %}
+                  {% else %}
+                  <div>{% trans "Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it." %}</div>
+                  {% endif %}
+                  <hr/>
+                  <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
+                    {% csrf_token %}
+                    {{ form|crispy }}
+                    <input class="btn btn-primary" type="submit" value="{% trans 'Reset My Password' %}" />
+                  </form>
+                  <hr/>
+                   <div>{% blocktrans %}
+                   Please contact us if you have any trouble resetting your password.{% endblocktrans %}
+                   </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock inner %}