From a62dea47b42abdffe0aabe2ec12e4ad3853423d9 Mon Sep 17 00:00:00 2001
From: Sofia Papagiannaki <papagian@users.noreply.github.com>
Date: Thu, 3 Oct 2019 15:35:38 +0200
Subject: [PATCH] Login: Show SAML login button if SAML is enabled (#19591)

* Show SAML login button if SAML is enabled

Move logic inside LoginServiceButtons

* Prevent from rendering login-oauth div if no login service is enabled
---
 .../app/core/components/Login/LoginPage.tsx   | 19 +--------
 .../components/Login/LoginServiceButtons.tsx  | 42 +++++++++++++++++--
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/public/app/core/components/Login/LoginPage.tsx b/public/app/core/components/Login/LoginPage.tsx
index 0026885adde..610dace71b8 100644
--- a/public/app/core/components/Login/LoginPage.tsx
+++ b/public/app/core/components/Login/LoginPage.tsx
@@ -41,24 +41,7 @@ export const LoginPage: FC = () => {
                   />
                 ) : null}
 
-                {isOauthEnabled ? (
-                  <>
-                    <div className="text-center login-divider">
-                      <div>
-                        <div className="login-divider-line" />
-                      </div>
-                      <div>
-                        <span className="login-divider-text">{disableLoginForm ? null : <span>or</span>}</span>
-                      </div>
-                      <div>
-                        <div className="login-divider-line" />
-                      </div>
-                    </div>
-                    <div className="clearfix" />
-
-                    <LoginServiceButtons />
-                  </>
-                ) : null}
+                <LoginServiceButtons />
                 {!disableUserSignUp ? <UserSignup /> : null}
               </div>
               <CSSTransition
diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx
index 42c05a0b7a1..adc4bae55dc 100644
--- a/public/app/core/components/Login/LoginServiceButtons.tsx
+++ b/public/app/core/components/Login/LoginServiceButtons.tsx
@@ -46,11 +46,39 @@ export interface LoginServices {
   [key: string]: LoginService;
 }
 
+const LoginDivider = () => {
+  return (
+    <>
+      <div className="text-center login-divider">
+        <div>
+          <div className="login-divider-line" />
+        </div>
+        <div>
+          <span className="login-divider-text">{config.disableLoginForm ? null : <span>or</span>}</span>
+        </div>
+        <div>
+          <div className="login-divider-line" />
+        </div>
+      </div>
+      <div className="clearfix" />
+    </>
+  );
+};
+
 export const LoginServiceButtons = () => {
   const keyNames = Object.keys(loginServices());
-  const serviceElements = keyNames.map(key => {
+  const serviceElementsEnabled = keyNames.filter(key => {
     const service: LoginService = loginServices()[key];
-    return service.enabled ? (
+    return service.enabled;
+  });
+
+  if (serviceElementsEnabled.length === 0) {
+    return null;
+  }
+
+  const serviceElements = serviceElementsEnabled.map(key => {
+    const service: LoginService = loginServices()[key];
+    return (
       <a
         key={key}
         className={`btn btn-medium btn-service btn-service--${service.className || key} login-btn`}
@@ -60,8 +88,14 @@ export const LoginServiceButtons = () => {
         <i className={`btn-service-icon fa fa-${service.icon ? service.icon : key}`} />
         Sign in with {service.name}
       </a>
-    ) : null;
+    );
   });
 
-  return <div className="login-oauth text-center">{serviceElements}</div>;
+  const divider = LoginDivider();
+  return (
+    <>
+      {divider}
+      <div className="login-oauth text-center">{serviceElements}</div>
+    </>
+  );
 };