chore: style signup page

savannahghi · Jul 15, 2021 · c601ca5 · c601ca5
1 parent ba0293b
commit c601ca5
Showing 1 changed file with 42 additions and 13 deletions.
diff --git a/pepfar_mle/templates/account/signup.html b/pepfar_mle/templates/account/signup.html
@@ -5,18 +5,47 @@
 
 {% block head_title %}{% trans "Signup" %}{% endblock %}
 
-{% block inner %}
-<h1>{% trans "Sign Up" %}</h1>
-
-<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>
+{% block bodyclass %}
+  class="bg-gradient-primary"
+{% endblock %}
 
-<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
-  {% csrf_token %}
-  {{ form|crispy }}
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-  {% endif %}
-  <button class="btn btn-primary" type="submit">{% trans "Sign Up" %} &raquo;</button>
-</form>
+{% block page %}
+  {# no modal #}
+{% endblock page %}
 
-{% 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">Sign Up</h1>
+                  </div>
+                  <div>
+                    {% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.
+                    {% endblocktrans %}
+                  </div>
+                  <hr/>
+                  <form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
+                    {% csrf_token %}
+                    {{ form|crispy }}
+                    {% if redirect_field_value %}
+                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+                    {% endif %}
+                    <button class="btn btn-primary" type="submit">{% trans "Sign Up" %} &raquo;</button>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock inner %}