Redesign login page based on design contribution. Fixes #97

This commit is contained in:
Michael Hall 2018-07-15 15:18:20 -04:00
parent 01abdb4a36
commit 779be91409

View file

@ -1,59 +1,57 @@
{% extends "get_together/base.html" %} {% extends "get_together/base.html" %}
{% load static %}
{% block content %} {% block styles %}
<div class="container"> <link href="{% static 'css/bootstrap-album.css' %}" rel="stylesheet"/>
<div class="row"> {% endblock %}
<div class="col-2"></div>
<div class="col-8"> {% block content %}
<center> <center>
<h3>Login using one of these providers:</h3> <h3>Login to your account</h3>
{% if settings.SOCIAL_AUTH_GOOGLE_OAUTH2_KEY %}<span><a class="btn btn-googleplus" href="{% url 'social:begin' 'google-oauth2' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-google-plus-official"></i> Google</a></span>{% endif %} <div class="container container-secondary box-shadow mt-4 mb-4 pt-4 pb-4" style="width: 400px">
{% if settings.SOCIAL_AUTH_FACEBOOK_KEY %}<span><a class="btn btn-facebook" href="{% url 'social:begin' 'facebook' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-facebook-official"></i> Faceboook</a></span>{% endif %} <div >
{% if settings.SOCIAL_AUTH_TWITTER_KEY %}<span><a class="btn btn-twitter" href="{% url 'social:begin' 'twitter' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-twitter"></i> Twitter</a></span>{% endif %} <div >
{% comment %}{% if settings.SOCIAL_AUTH_LINKEDIN_KEY %}<span><a class="btn btn-linkedin" href="{% url 'social:begin' 'linkedin' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-linkedin"></i> LinkedIn</a></span>{% endif %}{% endcomment %} <center>
{% if settings.SOCIAL_AUTH_GITHUB_KEY %}<span><a class="btn btn-github" href="{% url 'social:begin' 'github' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-github"></i> GitHub</a></span>{% endif %} {% if settings.SOCIAL_AUTH_GOOGLE_OAUTH2_KEY %}<a class="btn btn-googleplus mb-1 col-8" href="{% url 'social:begin' 'google-oauth2' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-google-plus-official"></i> Google</a></br>{% endif %}
<div class="mt-2 alert alert-info"><small><b>Note:</b> The only information GetTogether recieves from these providers is your username and (optionally) your email address. GetTogether will not have access to read any other information from these accounts, not even your password, and will not have access to post information to them. </small></div> {% if settings.SOCIAL_AUTH_FACEBOOK_KEY %}<a class="btn btn-facebook mb-1 col-8" href="{% url 'social:begin' 'facebook' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-facebook-official"></i> Faceboook</a></br>{% endif %}
</center> {% if settings.SOCIAL_AUTH_TWITTER_KEY %}<a class="btn btn-twitter mb-1 col-8" href="{% url 'social:begin' 'twitter' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-twitter"></i> Twitter</a></br>{% endif %}
</div> {% comment %}{% if settings.SOCIAL_AUTH_LINKEDIN_KEY %}<a class="btn btn-linkedin mb-1 col-8" href="{% url 'social:begin' 'linkedin' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-linkedin"></i> LinkedIn</a></br>{% endif %}{% endcomment %}
<div class="col-2"></div> {% if settings.SOCIAL_AUTH_GITHUB_KEY %}<a class="btn btn-github mb-1 col-8" href="{% url 'social:begin' 'github' %}?{{ request.META.QUERY_STRING }}"><i class="fa fa-github"></i> GitHub</a></br>{% endif %}
</div> <p class="text-muted small mt-2">OR</p>
<hr/> <div>
<div class="row"> <ul class="nav nav-tabs justify-content-center mb-2" id="localTab" role="tablist">
<div class="col-2"></div> <li class="nav-item">
<div class="col-8"> <a class="nav-link {% if action != 'signup' %}active{% endif %}" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
<center> </li>
<h4>Or, use a local GetTogether account:</h4> <li class="nav-item">
<ul class="nav nav-tabs justify-content-center mb-2" id="localTab" role="tablist"> <a class="nav-link {% if action == 'signup' %}active{% endif %}" id="signup-tab" data-toggle="tab" href="#signup" role="tab" aria-controls="signup" aria-selected="false">Signup</a>
<li class="nav-item"> </li>
<a class="nav-link {% if action != 'signup' %}active{% endif %}" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a> </ul>
</li> <div class="tab-content" id="localFormContent">
<li class="nav-item"> <div class="tab-pane fade {% if action != 'signup' %}show active{% endif %}" id="login" role="tabpanel" aria-labelledby="login-tab">
<a class="nav-link {% if action == 'signup' %}active{% endif %}" id="signup-tab" data-toggle="tab" href="#signup" role="tab" aria-controls="signup" aria-selected="false">Signup</a> <form action="#" method="POST">
</li> {% csrf_token %}
</ul> <table>
<div class="tab-content" id="localFormContent"> {{ login_form }}
<div class="tab-pane fade {% if action != 'signup' %}show active{% endif %}" id="login" role="tabpanel" aria-labelledby="login-tab"> </table>
<form action="#" method="POST"> <button class="btn btn-primary" type="submit" name="action" value="login">Login</button>
{% csrf_token %} </form>
<table> </div>
{{ login_form }} <div class="tab-pane fade {% if action == 'signup' %}show active{% endif %}" id="signup" role="tabpanel" aria-labelledby="signup-tab">
</table> <form action="#" method="POST">
<button class="btn btn-primary" type="submit" name="action" value="login">Login</button> {% csrf_token %}
</form> <table class="table">
</div> {{ signup_form }}
<div class="tab-pane fade {% if action == 'signup' %}show active{% endif %}" id="signup" role="tabpanel" aria-labelledby="signup-tab"> </table>
<form action="#" method="POST"> <button class="btn btn-primary" type="submit" name="action" value="signup">Signup</button>
{% csrf_token %} </form>
<table class="table"> </div>
{{ signup_form }} </div>
</table> </div>
<button class="btn btn-primary" type="submit" name="action" value="signup">Signup</button> </center>
</form> </div>
</div> </div>
</div> </div>
</div> </center>
<div class="col-2"></div>
</div>
</div>
{% endblock %} {% endblock %}