Fix for SOCIALACCOUNT_PROVIDERS (#4124)

* Fix for SOCIALACCOUNT_PROVIDERS

- Default (empty) setting should be dict, not list

* Add extra examples to config template file

* Add extra helper string

* Re-implement brand icons for login screen

InvenTree/InvenTree/settings.py

@@ -747,10 +747,14 @@ SITE_ID = 1
 
 # Load the allauth social backends
 SOCIAL_BACKENDS = CONFIG.get('social_backends', [])
+
 for app in SOCIAL_BACKENDS:
     INSTALLED_APPS.append(app)  # pragma: no cover
 
-SOCIALACCOUNT_PROVIDERS = CONFIG.get('social_providers', [])
+SOCIALACCOUNT_PROVIDERS = CONFIG.get('social_providers', None)
+
+if SOCIALACCOUNT_PROVIDERS is None:
+    SOCIALACCOUNT_PROVIDERS = {}
 
 SOCIALACCOUNT_STORE_TOKENS = True
 

InvenTree/config_template.yaml

@@ -194,11 +194,13 @@ remote_login_header: HTTP_REMOTE_USER
 #  - 'django.middleware.clickjacking.XFrameOptionsMiddleware'
 #  - 'InvenTree.middleware.AuthRequiredMiddleware'
 
-# Add SSO login-backends
+# Add SSO login-backends (see examples below)
 # social_backends:
+#  - 'allauth.socialaccount.providers.google'
+#  - 'allauth.socialaccount.providers.github'
 #  - 'allauth.socialaccount.providers.keycloak'
 
-# Add specific settings
+# Add specific settings for social account providers (if required)
 # social_providers:
 #   keycloak:
 #     KEYCLOAK_URL: 'https://keycloak.custom/auth'

InvenTree/templates/account/base.html

@@ -101,6 +101,18 @@ $(document).ready(function () {
 
     showCachedAlerts();
 
+    // Add brand icons for SSO providers, if available
+    $('.socialaccount_provider').each(function(i, obj) {
+        var el = $(this);
+        var tag = el.attr('brand_name');
+
+        var icon = window.FontAwesome.icon({prefix: 'fab', iconName: tag});
+
+        if (icon) {
+            el.append(`&nbsp;<span class='fab fa-${tag}'></span>`);
+        }
+    });
+
 });
 
 </script>

InvenTree/templates/account/login.html

@@ -38,7 +38,7 @@ for a account and sign in below:{% endblocktrans %}</p>
   {% if login_message %}
   <div>{{ login_message | safe }}<hr></div>
   {% endif %}
-  <div class="btn-group float-right" role="group">
+  <div class="btn-group" role="group">
     <button class="btn btn-success" type="submit">
       <span class='fas fa-sign-in-alt'></span> {% trans "Sign In" %}
     </button>
@@ -49,8 +49,8 @@ for a account and sign in below:{% endblocktrans %}</p>
 </form>
 
 {% if enable_sso %}
-<br>
-<h4 class="text-center">{% trans 'or use SSO' %}</h4>
+<hr>
+<span class='float-right'>{% trans "Sign in using third-party SSO" %}</span>
 <div>
   {% include "socialaccount/snippets/provider_list.html" with process="login" %}
 </div>

InvenTree/templates/socialaccount/snippets/provider_list.html

@@ -5,13 +5,14 @@
 {% for provider in socialaccount_providers %}
 {% if provider.id == "openid" %}
 {% for brand in provider.get_brands %}
-  <a title="{{brand.name}}"
+  <a title="{{brand.name}}" brand_name='{{ provider.id }}'
      class="btn btn-primary socialaccount_provider {{provider.id}} {{brand.id}}"
-     href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
-     ><span class='brand-icon' brand_name='{{provider.id}}'></span> {{brand.name}}</a>
+     href="{% provider_login_url provider.id openid=brand.openid_url process=process %}">
+     <span class='brand-icon' brand_name='{{provider.id}}'></span> {{brand.name}}</a>
 {% endfor %}
 {% endif %}
-  <a title="{{provider.name}}" class="btn btn-primary socialaccount_provider {{provider.id}}"
+  <a title="{{provider.name}}" brand_name='{{ provider.id }}'
+     class="btn btn-primary socialaccount_provider {{provider.id}}"
      href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"
      ><span class='brand-icon' brand_name='{{provider.id}}'></span> {{provider.name}}</a>
 {% endfor %}