From 28dd1b34f22771485e2f0592d36a62696eaa06f3 Mon Sep 17 00:00:00 2001
From: Mateusz Mandera <mateusz.mandera@protonmail.com>
Date: Tue, 22 Oct 2019 18:11:28 +0200
Subject: [PATCH] auth: Refactor social login rendering.

login_context now gets the social_backends list through
get_social_backend_dicts and we  move display_logo customization
to backend class definition.

This prepares for easily adding multiple IdP support in SAML
authentication - there will be a social_backend dict for each configured
IdP, also allowing display_name and icon customization per IdP.
---
 .../landing-page/logos/azuread-icon.png       | Bin 0 -> 7834 bytes
 .../images/landing-page/logos/github-icon.png | Bin 0 -> 2625 bytes
 static/styles/portico/portico-signin.scss     |  30 --------------
 templates/zerver/accounts_home.html           |   4 +-
 templates/zerver/login.html                   |   4 +-
 tools/linter_lib/custom_check.py              |   4 ++
 zerver/context_processors.py                  |  18 +-------
 zproject/backends.py                          |  39 ++++++++++++++++++
 8 files changed, 49 insertions(+), 50 deletions(-)
 create mode 100644 static/images/landing-page/logos/azuread-icon.png
 create mode 100644 static/images/landing-page/logos/github-icon.png

diff --git a/static/images/landing-page/logos/azuread-icon.png b/static/images/landing-page/logos/azuread-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..70ad2210e75366333f9246190b5b1fac36d2365c
GIT binary patch
literal 7834
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
Jm2M9>|3CbvKQ{mX

literal 0
HcmV?d00001

diff --git a/static/images/landing-page/logos/github-icon.png b/static/images/landing-page/logos/github-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..182a1a3f734fc1b7d712c68b04c29bad9460d6cd
GIT binary patch
literal 2625
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
W4I>>0bz>}E>ge79v<vGaGyei9dr3zC

literal 0
HcmV?d00001

diff --git a/static/styles/portico/portico-signin.scss b/static/styles/portico/portico-signin.scss
index 842e5cdc45..9b9e1e07d7 100644
--- a/static/styles/portico/portico-signin.scss
+++ b/static/styles/portico/portico-signin.scss
@@ -632,36 +632,6 @@ button.login-social-button:active {
     box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
 }
 
-.saml-wrapper button.login-social-button {
-    background-image: url('/static/images/landing-page/logos/saml-icon.png');
-    width: 100%;
-}
-
-.google-wrapper button.login-social-button {
-    background-image: url('/static/images/landing-page/logos/googl_e-icon.png');
-    width: 100%;
-}
-
-.github-wrapper::before {
-    content: "\f09b";
-    position: absolute;
-
-    font-family: "FontAwesome";
-    font-size: 2rem;
-    color: hsl(0, 0%, 20%);
-    transform: translateX(15px) translateY(13px);
-}
-
-.azuread-oauth2-wrapper::before {
-    content: "\f17a";
-    position: absolute;
-
-    font-family: "FontAwesome";
-    font-size: 2rem;
-    color: hsl(0, 0%, 20%);
-    transform: translateX(15px) translateY(13px);
-}
-
 .login-page-container .right-side .actions,
 .forgot-password-container .actions {
     margin: 20px 0px 0px;
diff --git a/templates/zerver/accounts_home.html b/templates/zerver/accounts_home.html
index 5700ea4290..aec0771584 100644
--- a/templates/zerver/accounts_home.html
+++ b/templates/zerver/accounts_home.html
@@ -75,9 +75,9 @@ page can be easily identified in it's respective JavaScript file -->
 
                         {% for backend in social_backends %}
                         <div class="login-social">
-                            <form class="form-inline {{ backend.name }}-wrapper" action="{{ backend.signup_url }}" method="get">
+                            <form class="form-inline" action="{{ backend.signup_url }}" method="get">
                                 <input type='hidden' name='multiuse_object_key' value='{{ multiuse_object_key }}' />
-                                <button class="login-social-button full-width">
+                                <button class="login-social-button full-width" style="background-image:url({{ backend.display_logo }})">
                                     {{ _('Sign up with %(identity_provider)s', identity_provider=backend.display_name) }}
                                 </button>
                             </form>
diff --git a/templates/zerver/login.html b/templates/zerver/login.html
index 9952e0ceff..e5618feb15 100644
--- a/templates/zerver/login.html
+++ b/templates/zerver/login.html
@@ -132,9 +132,9 @@ page can be easily identified in it's respective JavaScript file. -->
 
                         {% for backend in social_backends %}
                         <div class="login-social">
-                            <form class="social_login_form form-inline {{ backend.name }}-wrapper" action="{{ backend.login_url }}" method="get">
+                            <form class="social_login_form form-inline" action="{{ backend.login_url }}" method="get">
                                 <input type="hidden" name="next" value="{{ next }}">
-                                <button class="login-social-button">
+                                <button class="login-social-button" style="background-image:url({{ backend.display_logo }})">
                                     {{ _('Log in with %(identity_provider)s', identity_provider=backend.display_name) }}
                                 </button>
                             </form>
diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py
index c2848fc963..f0034f4d86 100644
--- a/tools/linter_lib/custom_check.py
+++ b/tools/linter_lib/custom_check.py
@@ -676,6 +676,10 @@ html_rules = whitespace_rules + prose_style_rules + [
          'templates/zerver/email.html',
          'templates/zerver/email_log.html',
 
+         # Social backend logos are dynamically loaded
+         'templates/zerver/accounts_home.html',
+         'templates/zerver/login.html',
+
          # Probably just needs to be changed to display: none so the exclude works
          'templates/zerver/app/navbar.html',
 
diff --git a/zerver/context_processors.py b/zerver/context_processors.py
index 7348528146..05dd333234 100644
--- a/zerver/context_processors.py
+++ b/zerver/context_processors.py
@@ -3,16 +3,15 @@ from urllib.parse import urljoin
 from typing import Any, Dict, Optional
 from django.http import HttpRequest
 from django.conf import settings
-from django.urls import reverse
 
 from zerver.models import UserProfile, get_realm, Realm
 from zproject.backends import (
     any_social_backend_enabled,
+    get_social_backend_dicts,
     password_auth_enabled,
     require_email_format_usernames,
     auth_enabled_helper,
     AUTH_BACKEND_NAME_MAP,
-    SOCIAL_AUTH_BACKENDS,
 )
 from zerver.decorator import get_client_name
 from zerver.lib.send_email import FromAddress
@@ -168,7 +167,6 @@ def login_context(request: HttpRequest) -> Dict[str, Any]:
 
     # Add the keys for our standard authentication backends.
     no_auth_enabled = True
-    social_backends = []
     for auth_backend_name in AUTH_BACKEND_NAME_MAP:
         name_lower = auth_backend_name.lower()
         key = "%s_auth_enabled" % (name_lower,)
@@ -177,19 +175,7 @@ def login_context(request: HttpRequest) -> Dict[str, Any]:
         if is_enabled:
             no_auth_enabled = False
 
-        # Now add the enabled social backends to the social_backends
-        # list used to generate buttons for login/register pages.
-        backend = AUTH_BACKEND_NAME_MAP[auth_backend_name]
-        if not is_enabled or backend not in SOCIAL_AUTH_BACKENDS:
-            continue
-        social_backends.append({
-            'name': backend.name,
-            'display_name': backend.auth_backend_name,
-            'login_url': reverse('login-social', args=(backend.name,)),
-            'signup_url': reverse('signup-social', args=(backend.name,)),
-            'sort_order': backend.sort_order,
-        })
-    context['social_backends'] = sorted(social_backends, key=lambda x: x['sort_order'], reverse=True)
+    context['social_backends'] = get_social_backend_dicts(realm)
     context['no_auth_enabled'] = no_auth_enabled
 
     return context
diff --git a/zproject/backends.py b/zproject/backends.py
index 6a091bcba9..23c2c48c62 100644
--- a/zproject/backends.py
+++ b/zproject/backends.py
@@ -17,6 +17,7 @@ import logging
 import magic
 import ujson
 from typing import Any, Dict, List, Optional, Set, Tuple, Union
+from typing_extensions import TypedDict
 
 from django_auth_ldap.backend import LDAPBackend, LDAPReverseEmailSearch, \
     _LDAPUser, ldap_error
@@ -992,6 +993,9 @@ def social_auth_finish(backend: Any,
 
 class SocialAuthMixin(ZulipAuthMixin):
     auth_backend_name = "undeclared"
+    name = "undeclared"
+    display_logo = None  # type: Optional[str]
+
     # Used to determine how to order buttons on login form, backend with
     # higher sort order are displayed first.
     sort_order = 0
@@ -1020,8 +1024,10 @@ class SocialAuthMixin(ZulipAuthMixin):
             return None
 
 class GitHubAuthBackend(SocialAuthMixin, GithubOAuth2):
+    name = "github"
     auth_backend_name = "GitHub"
     sort_order = 100
+    display_logo = "/static/images/landing-page/logos/github-icon.png"
 
     def get_verified_emails(self, *args: Any, **kwargs: Any) -> List[str]:
         access_token = kwargs["response"]["access_token"]
@@ -1085,12 +1091,15 @@ class GitHubAuthBackend(SocialAuthMixin, GithubOAuth2):
 
 class AzureADAuthBackend(SocialAuthMixin, AzureADOAuth2):
     sort_order = 50
+    name = "azuread-oauth2"
     auth_backend_name = "AzureAD"
+    display_logo = "/static/images/landing-page/logos/azuread-icon.png"
 
 class GoogleAuthBackend(SocialAuthMixin, GoogleOAuth2):
     sort_order = 150
     auth_backend_name = "Google"
     name = "google"
+    display_logo = "/static/images/landing-page/logos/googl_e-icon.png"
 
     def get_verified_emails(self, *args: Any, **kwargs: Any) -> List[str]:
         verified_emails = []    # type: List[str]
@@ -1105,10 +1114,12 @@ class SAMLAuthBackend(SocialAuthMixin, SAMLAuth):
     standard_relay_params = ["subdomain", "multiuse_object_key", "mobile_flow_otp",
                              "next", "is_signup"]
     REDIS_EXPIRATION_SECONDS = 60 * 15
+    name = "saml"
     # Organization which go through the trouble of setting up SAML are most likely
     # to have it as their main authentication method, so it seems appropriate to have
     # SAML buttons at the top.
     sort_order = 9999
+    display_logo = "/static/images/landing-page/logos/saml-icon.png"
 
     def auth_url(self) -> str:
         """Get the URL to which we must redirect in order to
@@ -1222,6 +1233,34 @@ class SAMLAuthBackend(SocialAuthMixin, SAMLAuth):
 
         return result
 
+SocialBackendDictT = TypedDict('SocialBackendDictT', {
+    'name': str,
+    'display_name': str,
+    'display_logo': str,
+    'login_url': str,
+    'signup_url': str,
+    'sort_order': int,
+})
+
+def create_standard_social_backend_dict(social_backend: SocialAuthMixin) -> SocialBackendDictT:
+    assert social_backend.display_logo is not None
+    return dict(
+        name=social_backend.name,
+        display_name=social_backend.auth_backend_name,
+        display_logo=social_backend.display_logo,
+        login_url=reverse('login-social', args=(social_backend.name,)),
+        signup_url=reverse('signup-social', args=(social_backend.name,)),
+        sort_order=social_backend.sort_order
+    )
+
+def get_social_backend_dicts(realm: Optional[Realm]=None) -> List[SocialBackendDictT]:
+    result = []
+    for backend in SOCIAL_AUTH_BACKENDS:
+        if auth_enabled_helper([backend.auth_backend_name], realm):
+            result.append(create_standard_social_backend_dict(backend))
+
+    return sorted(result, key=lambda x: x['sort_order'], reverse=True)
+
 AUTH_BACKEND_NAME_MAP = {
     'Dev': DevAuthBackend,
     'Email': EmailAuthBackend,