social login buttons

cookbook/templates/account/login.html

@@ -44,13 +44,13 @@
 
     {% if socialaccount_providers %}
         <div class="row" style="margin-top: 2vh">
-            <div class="col-6 offset-3">
+           <div class="col-sm-12 col-lg-6 col-md-6 offset-lg-3 offset-md-3">
                 <h5>{% trans "Social Login" %}</h5>
                 <span>{% trans 'You can use any of the following providers to sign in.' %}</span>
 
                 <br/>
                 <br/>
-                <ul class="socialaccount_providers">
+                <ul class="socialaccount_providers list-unstyled">
                     {% include "socialaccount/snippets/provider_list.html" with process="login" %}
                 </ul>
 

cookbook/templates/socialaccount/snippets/provider_list.html

@@ -0,0 +1,133 @@
+{% load i18n %}
+{% load socialaccount %}
+
+{% get_providers as socialaccount_providers %}
+
+{% 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 }}"
+                   href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
+                >{{ brand.name }}</a>
+            </li>
+        {% endfor %}
+    {% endif %}
+    <li CLASS="mb-1">
+        {% if provider.id  == 'discord' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn discord-login-button btn-social"><i
+                        class="fab fa-discord"></i> {% trans 'Sign in using' %} Discord
+                </button>
+            </a>
+        {% elif provider.id == 'github' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-github"><i
+                        class="fab fa-github"></i> {% trans 'Sign in using' %} Github
+                </button>
+            </a>
+        {% elif provider.id == 'reddit' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-reddit"><i
+                        class="fab fa-reddit"></i> {% trans 'Sign in using' %} Reddit
+                </button>
+            </a>
+        {% elif provider.id == 'twitter' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-twitter"><i
+                        class="fab fa-twitter"></i> {% trans 'Sign in using' %} Twitter
+                </button>
+            </a>
+        {% elif provider.id == 'dropbox' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-dropbox"><i
+                        class="fab fa-dropbox"></i> {% trans 'Sign in using' %} Dropbox
+                </button>
+            </a>
+        {% elif provider.id == 'google' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-google"><i
+                        class="fab fa-google"></i> {% trans 'Sign in using' %} Google
+                </button>
+            </a>
+        {% elif provider.id == 'facebook' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-facebook"><i
+                        class="fab fa-facebook"></i> {% trans 'Sign in using' %} Facebook
+                </button>
+            </a>
+        {% elif provider.id == 'instagram' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-instagram"><i
+                        class="fab fa-instagram"></i> {% trans 'Sign in using' %} Instagram
+                </button>
+            </a>
+        {% elif provider.id == 'flickr' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-flickr"><i
+                        class="fab fa-flickr"></i> {% trans 'Sign in using' %} Flickr
+                </button>
+            </a>
+        {% elif provider.id == 'apple' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-apple"><i
+                        class="fab fa-apple"></i> {% trans 'Sign in using' %} Apple
+                </button>
+            </a>
+        {% elif provider.id == 'pinterest' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-pinterest"><i
+                        class="fab fa-pinterest"></i> {% trans 'Sign in using' %} Pinterest
+                </button>
+            </a>
+        {% elif provider.id == 'windowslive' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-microsoft"><i
+                        class="fab fa-microsoft"></i> {% trans 'Sign in using' %} Microsoft Live
+                </button>
+            </a>
+        {% elif provider.id == 'yahoo' %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-yahoo"><i
+                        class="fab fa-yahoo"></i> {% trans 'Sign in using' %} Yahoo
+                </button>
+            </a>
+        {% else %}
+            <a title="{{ provider.name }}"
+               class="socialaccount_provider {{ provider.id }}"
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                <button class="btn btn-social btn-success"><i
+                        class="fas fa-sign-in-alt"></i> {% trans 'Sign in using' %} {{ provider.name }}
+                </button>
+            </a>
+        {% endif %}
+    </li>
+
+{% endfor %}