Closes #9123: Improve appearance of SSO login providers

docs/release-notes/version-3.2.md

@@ -12,6 +12,7 @@
 * [#9081](https://github.com/netbox-community/netbox/issues/9081) - Add `fhrpgroup_id` filter for IP addresses
 * [#9099](https://github.com/netbox-community/netbox/issues/9099) - Enable display of installed module serial & asset tag in module bays list
 * [#9110](https://github.com/netbox-community/netbox/issues/9110) - Add Neutrik proprietary power connectors
+* [#9123](https://github.com/netbox-community/netbox/issues/9123) - Improve appearance of SSO login providers
 
 ### Bug Fixes
 

netbox/netbox/authentication.py

@@ -13,8 +13,45 @@ from utilities.permissions import permission_is_exempt, resolve_permission, reso
 
 UserModel = get_user_model()
 
+AUTH_BACKEND_ATTRS = {
+    # backend name: title, MDI icon name
+    'amazon': ('Amazon AWS', 'aws'),
+    'apple': ('Apple', 'apple'),
+    'auth0': ('Auth0', None),
+    'azuread-oauth2': ('Microsoft Azure AD', 'microsoft'),
+    'azuread-b2c-oauth2': ('Microsoft Azure AD', 'microsoft'),
+    'azuread-tenant-oauth2': ('Microsoft Azure AD', 'microsoft'),
+    'bitbucket': ('BitBucket', 'bitbucket'),
+    'bitbucket-oauth2': ('BitBucket', 'bitbucket'),
+    'digitalocean': ('DigitalOcean', 'digital-ocean'),
+    'docker': ('Docker', 'docker'),
+    'github': ('GitHub', 'docker'),
+    'github-app': ('GitHub', 'github'),
+    'github-org': ('GitHub', 'github'),
+    'github-team': ('GitHub', 'github'),
+    'github-enterprise': ('GitHub Enterprise', 'github'),
+    'github-enterprise-org': ('GitHub Enterprise', 'github'),
+    'github-enterprise-team': ('GitHub Enterprise', 'github'),
+    'gitlab': ('GitLab', 'gitlab'),
+    'google-oauth2': ('Google', 'google'),
+    'google-openidconnect': ('Google', 'google'),
+    'hubspot': ('HubSpot', 'hubspot'),
+    'keycloak': ('Keycloak', None),
+    'microsoft-graph': ('Microsoft Graph', 'microsoft'),
+    'okta': ('Okta', None),
+    'salesforce-oauth2': ('Salesforce', 'salesforce'),
+}
 
-class ObjectPermissionMixin():
+
+def get_auth_backend_display(name):
+    """
+    Return the user-friendly name and icon name for a remote authentication backend, if known. Defaults to the
+    raw backend name and no icon.
+    """
+    return AUTH_BACKEND_ATTRS.get(name, (name, None))
+
+
+class ObjectPermissionMixin:
 
     def get_all_permissions(self, user_obj, obj=None):
         if not user_obj.is_active or user_obj.is_anonymous:

netbox/templates/login.html

@@ -39,11 +39,13 @@
       </form>
     </div>
 
-    {# TODO: Improve the design & layout #}
     {% if auth_backends %}
-      <h6 class="mt-4">Or use an SSO provider:</h6>
-      {% for name, backend in auth_backends.items %}
-        <h4><a href="{% url 'social:begin' backend=name %}" class="my-2">{{ name }}</a></h4>
+      <h6 class="mt-4 mb-3">Or use a single sign-on (SSO) provider:</h6>
+      {% for name, display in auth_backends.items %}
+        <h5>
+          {% if display.1 %}<i class="mdi mdi-{{ display.1 }}"></i>{% endif %}
+          <a href="{% url 'social:begin' backend=name %}" class="my-2">{{ display.0 }}</a>
+        </h5>
       {% endfor %}
     {% endif %}
 

netbox/users/views.py

@@ -16,6 +16,7 @@ from social_core.backends.utils import load_backends
 
 from extras.models import ObjectChange
 from extras.tables import ObjectChangeTable
+from netbox.authentication import get_auth_backend_display
 from netbox.config import get_config
 from utilities.forms import ConfirmationForm
 from .forms import LoginForm, PasswordChangeForm, TokenForm, UserConfigForm
@@ -43,9 +44,13 @@ class LoginView(View):
             logger = logging.getLogger('netbox.auth.login')
             return self.redirect_to_next(request, logger)
 
+        auth_backends = {
+            name: get_auth_backend_display(name) for name in load_backends(settings.AUTHENTICATION_BACKENDS).keys()
+        }
+
         return render(request, self.template_name, {
             'form': form,
-            'auth_backends': load_backends(settings.AUTHENTICATION_BACKENDS),
+            'auth_backends': auth_backends,
         })
 
     def post(self, request):