From b236cd50c859c614cf622a295c6a3a2b2e25f503 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 2 Dec 2021 19:54:34 +0530
Subject: [PATCH] feat(ui) - sso login

---
 frontend/app/Router.js                 |  2 +-
 frontend/app/components/Login/Login.js | 15 ++++++++++++---
 frontend/app/duck/user.js              |  9 +++++++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/app/Router.js b/frontend/app/Router.js
index bbbd98c3c..643351d67 100644
--- a/frontend/app/Router.js
+++ b/frontend/app/Router.js
@@ -69,7 +69,7 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
     organisation: state.getIn([ 'user', 'client', 'name' ]),
     tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
     tenants: state.getIn(['user', 'tenants']),
-    existingTenant: state.getIn(['user', 'existingTenant']),
+    existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
     onboarding: state.getIn([ 'user', 'onboarding' ])
   };
 }, {
diff --git a/frontend/app/components/Login/Login.js b/frontend/app/components/Login/Login.js
index ba5a6a410..a1350000b 100644
--- a/frontend/app/components/Login/Login.js
+++ b/frontend/app/components/Login/Login.js
@@ -15,7 +15,8 @@ const recaptchaRef = React.createRef();
   state => ({
     errors: state.getIn([ 'user', 'loginRequest', 'errors' ]),
     loading: state.getIn([ 'user', 'loginRequest', 'loading' ]),
-    existingTenant: state.getIn(['user', 'existingTenant'])
+    // existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
+    authDetails: state.getIn(['user', 'authDetails']),
   }),
   { login, },
 )
@@ -45,7 +46,7 @@ export default class Login extends React.Component {
   write = ({ target: { value, name } }) => this.setState({ [ name ]: value })
 
   render() {
-    const { errors, loading, existingTenant } = this.props;
+    const { errors, loading, authDetails } = this.props;
     return (
       <div className="flex" style={{ height: '100vh'}}>
         <div className={cn("w-6/12", stl.left)}>
@@ -63,7 +64,7 @@ export default class Login extends React.Component {
             <form onSubmit={ this.onSubmit }>
               <div className="mb-8">
                 <h2 className="text-center text-3xl mb-6">Login to OpenReplay</h2>
-                { !existingTenant && <div className="text-center text-xl">Don't have an account? <span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
+                { !authDetails.tenants && <div className="text-center text-xl">Don't have an account? <span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
               </div>
               <Loader loading={ loading }>
                 { window.ENV.CAPTCHA_ENABLED && (
@@ -126,6 +127,14 @@ export default class Login extends React.Component {
                 </div>
               </div>
             </form>
+            { authDetails.sso && (
+              <div className="py-2 flex flex-col items-center">
+                <div className="mb-4">or</div>
+                <a href="/api/sso/saml2" rel="noopener noreferrer">
+                  <Button type="button" outline type="submit" primary >{ 'Login with SSO (Okta)' }</Button>
+                </a>
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/frontend/app/duck/user.js b/frontend/app/duck/user.js
index 5edd112ae..6f29ef945 100644
--- a/frontend/app/duck/user.js
+++ b/frontend/app/duck/user.js
@@ -31,7 +31,12 @@ const initialState = Map({
   passwordRequestError: false,
   passwordErrors: List(),
   tenants: [],
-  existingTenant: true,
+  authDetails: Map({
+    tenants: false,
+    sso: false,
+    ssoProvider: '',
+    edition: ''
+  }),
   onboarding: false
 });
 
@@ -70,7 +75,7 @@ const reducer = (state = initialState, action = {}) => {
     case FETCH_ACCOUNT.SUCCESS:
       return state.set('account', Account(action.data)).set('passwordErrors', List());
     case FETCH_TENANTS.SUCCESS:
-      return state.set('existingTenant', action.data);
+      return state.set('authDetails', Map(action.data));
       // return state.set('tenants', action.data.map(i => ({ text: i.name, value: i.tenantId})));
     case UPDATE_PASSWORD.FAILURE:
       return state.set('passwordErrors', List(action.errors))