From 25e5577c90bfd9241a72889499f35747434276b3 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 23 Jan 2023 17:37:03 +0100
Subject: [PATCH] fix(ui) - login page SSO opacity and pointer-events issue in
 SAFARI

---
 frontend/app/components/Login/Login.js | 33 ++++++++++++++++----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Login/Login.js b/frontend/app/components/Login/Login.js
index 9ce132f28..0eb10ec2b 100644
--- a/frontend/app/components/Login/Login.js
+++ b/frontend/app/components/Login/Login.js
@@ -14,6 +14,7 @@ const FORGOT_PASSWORD = forgotPassword();
 const SIGNUP_ROUTE = signup();
 const recaptchaRef = React.createRef();
 
+export default
 @connect(
   (state, props) => ({
     errors: state.getIn(['user', 'loginRequest', 'errors']),
@@ -25,7 +26,7 @@ const recaptchaRef = React.createRef();
 )
 @withPageTitle('Login - OpenReplay')
 @withRouter
-export default class Login extends React.Component {
+class Login extends React.Component {
   state = {
     email: '',
     password: '',
@@ -157,25 +158,31 @@ export default class Login extends React.Component {
             <div className={cn(stl.sso, 'py-2 flex flex-col items-center')}>
               <div className="mb-4">or</div>
 
-              <div>
+              {authDetails.sso ? (
+                <a href="/api/sso/saml2" rel="noopener noreferrer">
+                  <Button variant="outline" type="submit">
+                    {`Login with SSO ${
+                      authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
+                    }`}
+                  </Button>
+                </a>
+              ) : (
                 <Tooltip
                   delay={0}
-                  disabled={authDetails.sso}
                   title={<div>This feature requires an enterprise license.</div>}
                   placement="top"
-                  // open={true}
                 >
-                  <a
-                    href="/api/sso/saml2"
-                    rel="noopener noreferrer"
-                    className={cn({ 'pointer-events-none opacity-30': !authDetails.sso })}
+                  <Button
+                    variant="outline"
+                    type="submit"
+                    className="pointer-events-none opacity-30"
                   >
-                    <Button variant="outline" type="submit">
-                      {`Login with SSO ${authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''}`}
-                    </Button>
-                  </a>
+                    {`Login with SSO ${
+                      authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
+                    }`}
+                  </Button>
                 </Tooltip>
-              </div>
+              )}
             </div>
           </div>
         </div>