feat: #26, wraps social account login in button per design

platform-coop-toolkit · Apr 28, 2020 · 15a649b · 15a649b
1 parent 60c93e4
commit 15a649b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/templates/account/login.html b/templates/account/login.html
@@ -28,9 +28,11 @@ <h1>{% trans "Sign In" %}</h1>
 {% get_providers as socialaccount_providers %}
 {% if socialaccount_providers %}
 <div class="spacer"></div>
-<div class="login-or">{% trans 'or' %}</div>
-<p>{% blocktrans with site.name as site_name %}sign in with one
-of your existing third party accounts. {% endblocktrans %}</p>
+<div class="login-or">
+  <p class="align-center">
+    {% trans 'OR' %}
+  </p>
+</div>
 
 <div class="socialaccount_ballot">
   <ul class="socialaccount_providers">

diff --git a/templates/socialaccount/authentication_error.html b/templates/socialaccount/authentication_error.html
@@ -2,10 +2,13 @@
 
 {% load i18n %}
 
-{% block head_title %}{% trans "Social Network Login Failure" %}{% endblock %}
+{% block title %}{% trans "Social Network Login Failure" %}{% endblock %}
 
 {% block content %}
-<h1>{% trans "Social Network Login Failure" %}</h1>
+<div class="page-header">
+    <p><a class="link--inverse" href="{% url 'index' %}">Home</a></p>
+    <h1>{% trans "Social Network Login Failure" %}</h1>
+</div>
 
 <p>{% trans "An error occurred while attempting to login via your social network account." %}</p>
 {% endblock %}
diff --git a/templates/socialaccount/snippets/provider_list.html b/templates/socialaccount/snippets/provider_list.html
@@ -1,3 +1,4 @@
+{% load static %}
 {% load socialaccount %}
 
 {% get_providers as socialaccount_providers %}
@@ -6,15 +7,34 @@
 {% if provider.id == "openid" %}
 {% for brand in provider.get_brands %}
 <li>
-  <a title="{{brand.name}}" 
+  <a title="{{brand.name}}"
      class="socialaccount_provider {{provider.id}} {{brand.id}}" 
      href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
      >{{brand.name}}</a>
 </li>
 {% endfor %}
 {% endif %}
-<li>
-  <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}" 
-     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
+<li class="no-bullet">
+  <a type="button" class="button" title="{{provider.name}}" class="socialaccount_provider {{provider.id}}"
+     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+    {% if provider.name == 'Facebook' %}
+    <i class="fab fa-facebook-square"></i>
+    {% elif provider.name == 'GitHub' %}
+    <i class="fab fa-github-square"></i>
+    {% elif provider.name == 'Instagram' %}
+    <i class="fab fa-instagram-square"></i>
+    {% elif provider.name == 'LinkedIn' %}
+    <i class="fab fa-linkedin"></i>
+    {% elif provider.name == 'Medium' %}
+    <i class="fab fa-medium"></i>
+    {% elif provider.name == 'Reddit' %}
+    <i class="fab fa-reddit-square"></i>
+    {% elif provider.name == 'Stack Exchange' %}
+    <i class="fab fa-stack-overflow"></i>
+    {% elif provider.name == 'Twitter' %}
+    <i class="fab fa-twitter-square"></i>
+    {% endif %}
+    Log in with {{provider.name}}
+  </a>
 </li>
 {% endfor %}