From 0dbe6eb5012dd3790189278ab0b75c4e821fd13f Mon Sep 17 00:00:00 2001
From: Sourav Badami <souravbadami@gmail.com>
Date: Tue, 5 Sep 2017 16:41:32 +0530
Subject: [PATCH] Redesigned login form. #541 (#542)

---
 website/templates/account/login.html | 111 ++++++++++++++-------------
 1 file changed, 59 insertions(+), 52 deletions(-)

diff --git a/website/templates/account/login.html b/website/templates/account/login.html
index 991ced2f7..39e69aa24 100644
--- a/website/templates/account/login.html
+++ b/website/templates/account/login.html
@@ -20,64 +20,71 @@
 
 {% block content %}
 {% get_providers as socialaccount_providers %}
-
-<h3 class="text-center">Login</h3>
-  {% if socialaccount_providers %}
   <div class="row">
-    <div class="col-md-4 col-md-offset-4">
-      <div class="socialaccount_ballot text-center">
-        <ul class="socialaccount_providers list-unstyled list-inline">
-          {% for provider in socialaccount_providers %}
-            {% if provider.id == "openid" %}
-              {% for brand in provider.get_brands %}
+    <div class="panel-heading">
+      <div class="panel-title text-center">
+        <h1 class="text-center">Login</h1>
+        <hr />
+      </div>
+      {% if socialaccount_providers %}
+      <div class="row">
+        <div class="col-md-4 col-md-offset-4">
+          <div class="socialaccount_ballot text-center">
+            <ul class="socialaccount_providers list-unstyled list-inline">
+              {% for provider in socialaccount_providers %}
+                {% if provider.id == "openid" %}
+                  {% for brand in provider.get_brands %}
+                    <li>
+                      <a title="{{brand.name}}" 
+                      class="socialaccount_provider {{provider.id}} {{brand.id}} btn btn-default" 
+                      href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
+                      >{{brand.name}}</a>
+                    </li>
+                  {% endfor %}
+                {% endif %}
                 <li>
-                  <a title="{{brand.name}}" 
-                  class="socialaccount_provider {{provider.id}} {{brand.id}} btn btn-default" 
-                  href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
-                  >{{brand.name}}</a>
+                  <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}} btn btn-default" 
+                  href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
                 </li>
               {% endfor %}
-            {% endif %}
-            <li>
-              <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}} btn btn-default" 
-              href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
-            </li>
-          {% endfor %}
-        </ul>
+            </ul>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  {% include "socialaccount/snippets/login_extra.html" %}
-  {% endif %}
-
-  <div class="row">
+      {% include "socialaccount/snippets/login_extra.html" %}
+      {% endif %}
+    </div> 
     <div class="col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
-      <form class="login" method="POST" action="{% url 'account_login' %}">        
-        {% csrf_token %}
-        {% if redirect_field_value %}
-          <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-        {% endif %}
-        <div class="form-group inner-addon left-addon {% if form.login.errors %}has-error{% endif %}">
-          <i class="glyphicon glyphicon-user"></i>
-          <input class="form-control" type="text" id="id_login" name="login" placeholder="Username">
-          <span class="help-block">{{ form.login.errors }}</span>
+      <div class="row main">
+          <div class="main-issue-form main-center">
+            <form class="login" method="POST" action="{% url 'account_login' %}">
+              {% csrf_token %}
+              {% if redirect_field_value %}
+                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+              {% endif %}
+              <div class="form-group inner-addon left-addon {% if form.login.errors %}has-error{% endif %}">
+                <i class="glyphicon glyphicon-user"></i>
+                <input class="form-control" type="text" id="id_login" name="login" placeholder="Username">
+                <span class="help-block">{{ form.login.errors }}</span>
+              </div>
+              <div class="form-group inner-addon left-addon {% if form.password.errors %}has-error{% endif %}">
+                <i class="glyphicon glyphicon-lock"></i>
+                <input class="form-control login-field" type="password" id="id_password" name="password" placeholder="Password">
+                <span class="help-block">{{ form.password.errors }}</span>
+              </div>
+               <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="id_remember" name="remember"> Remember Me
+                </label>
+              </div>
+              <div class="form-actions">
+                <button class="btn btn-primary pull-right" name="login_button" type="submit">{% trans "Sign In" %}</button>
+              </div>
+            </form>
         </div>
-        <div class="form-group inner-addon left-addon {% if form.password.errors %}has-error{% endif %}">
-          <i class="glyphicon glyphicon-lock"></i>
-          <input class="form-control login-field" type="password" id="id_password" name="password" placeholder="Password">
-          <span class="help-block">{{ form.password.errors }}</span>
-        </div>
-         <div class="checkbox">
-          <label>
-            <input type="checkbox" id="id_remember" name="remember"> Remember Me
-          </label>
-        </div>
-        <div class="form-actions">
-          <button class="btn btn-primary pull-right" name="login_button" type="submit">{% trans "Sign In" %}</button>
-          <a class="btn" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
-        </div>
-      </form>
-      <span class="text-center">Not yet a member? <a href="{% url 'account_signup' %}">Join</a></span>
+      </div>
+      <span class="btn"><a href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a> | Not yet a member? <a  href="{% url 'account_signup' %}">Join</a></span>
     </div>
-  </div>
+  </div>  
+
 {% endblock %}