From 30351c39aa0c412a26e76cfc6a24d1c38404c69f Mon Sep 17 00:00:00 2001
From: Muhsin Shah <muhsinshah21@gmail.com>
Date: Sat, 16 Mar 2024 12:13:26 +0530
Subject: [PATCH] fix signup disable banner

---
 frontend/src/LoginPage/LoginPage.jsx      | 36 +++++++----------------
 frontend/src/LoginPage/SSOLoginModule.jsx | 31 +++++++++++++++++++
 frontend/src/SignupPage/SignupPage.jsx    | 35 +++++++---------------
 3 files changed, 52 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/LoginPage/SSOLoginModule.jsx

diff --git a/frontend/src/LoginPage/LoginPage.jsx b/frontend/src/LoginPage/LoginPage.jsx
index 303eb03978..c1facb26a2 100644
--- a/frontend/src/LoginPage/LoginPage.jsx
+++ b/frontend/src/LoginPage/LoginPage.jsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { authenticationService } from '@/_services';
 import { toast } from 'react-hot-toast';
 import { Link, Navigate } from 'react-router-dom';
-import GoogleSSOLoginButton from '@ee/components/LoginPage/GoogleSSOLoginButton';
-import GitSSOLoginButton from '@ee/components/LoginPage/GitSSOLoginButton';
 import { validateEmail } from '@/_helpers/utils';
 import { withTranslation } from 'react-i18next';
 import OnboardingNavbar from '@/_components/OnboardingNavbar';
@@ -18,6 +16,7 @@ import { setCookie } from '@/_helpers/cookie';
 import { onLoginSuccess } from '@/_helpers/platform/utils/auth.utils';
 import { updateCurrentSession } from '@/_helpers/authorizeWorkspace';
 import cx from 'classnames';
+import SSOLoginModule from './SSOLoginModule';
 
 class LoginPageComponent extends React.Component {
   constructor(props) {
@@ -119,6 +118,8 @@ class LoginPageComponent extends React.Component {
   render() {
     const { configs, currentOrganizationName } = this.props;
     const { isLoading } = this.state;
+    const shouldShowLoginMethods = configs?.google?.enabled || configs?.git?.enabled || configs?.form?.enabled;
+    const noLoginMethodsEnabled = !configs?.form && !configs?.git && !configs?.google;
     const workspaceSignUpEnabled = this.organizationId && configs?.enable_sign_up;
     const instanceSignUpEnabled = !this.organizationId && (configs?.form?.enable_sign_up || configs?.enable_sign_up);
     const isSignUpCTAEnabled = workspaceSignUpEnabled || instanceSignUpEnabled;
@@ -140,7 +141,7 @@ class LoginPageComponent extends React.Component {
                     <Navigate to="/error/invalid-link" />
                   ) : (
                     <div className="common-auth-container-wrapper ">
-                      {!configs?.form && !configs?.git && !configs?.google && (
+                      {noLoginMethodsEnabled && (
                         <div className="text-center-onboard">
                           <h2 data-cy="no-login-methods-warning">
                             {this.props.t(
@@ -151,7 +152,7 @@ class LoginPageComponent extends React.Component {
                         </div>
                       )}
                       <div>
-                        {(configs?.google?.enabled || configs?.git?.enabled || configs?.form?.enabled) && (
+                        {shouldShowLoginMethods && (
                           <>
                             <h2 className="common-auth-section-header sign-in-header" data-cy="sign-in-header">
                               {this.props.t('loginSignupPage.signIn', `Sign in`)}
@@ -188,27 +189,12 @@ class LoginPageComponent extends React.Component {
                             </div>
                           </>
                         )}
-                        {configs?.git?.enabled && (
-                          <div className="login-sso-wrapper">
-                            <GitSSOLoginButton
-                              configs={configs?.git?.configs}
-                              setRedirectUrlToCookie={() => {
-                                this.setRedirectUrlToCookie();
-                              }}
-                            />
-                          </div>
-                        )}
-                        {configs?.google?.enabled && (
-                          <div className="login-sso-wrapper">
-                            <GoogleSSOLoginButton
-                              configs={configs?.google?.configs}
-                              configId={configs?.google?.config_id}
-                              setRedirectUrlToCookie={() => {
-                                this.setRedirectUrlToCookie();
-                              }}
-                            />
-                          </div>
-                        )}
+                        <SSOLoginModule
+                          configs={configs}
+                          organizationSlug={this.paramOrganizationSlug}
+                          setRedirectUrlToCookie={() => this.setRedirectUrlToCookie()}
+                          buttonText={'Sign in with'}
+                        />
                         {(configs?.google?.enabled || configs?.git?.enabled) && configs?.form?.enabled && (
                           <div className="separator-onboarding ">
                             <div className="mt-2 separator" data-cy="onboarding-separator">
diff --git a/frontend/src/LoginPage/SSOLoginModule.jsx b/frontend/src/LoginPage/SSOLoginModule.jsx
new file mode 100644
index 0000000000..883b7bf5ae
--- /dev/null
+++ b/frontend/src/LoginPage/SSOLoginModule.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import GoogleSSOLoginButton from '@ee/components/LoginPage/GoogleSSOLoginButton';
+import GitSSOLoginButton from '@ee/components/LoginPage/GitSSOLoginButton';
+const SSOLoginModule = ({ configs, setRedirectUrlToCookie, buttonText, setSignupOrganizationDetails }) => {
+  return (
+    <>
+      {configs?.git?.enabled && (
+        <div className="login-sso-wrapper">
+          <GitSSOLoginButton
+            configs={configs?.git?.configs}
+            setRedirectUrlToCookie={setRedirectUrlToCookie}
+            setSignupOrganizationDetails={setSignupOrganizationDetails}
+            buttonText={buttonText}
+          />
+        </div>
+      )}
+      {configs?.google?.enabled && (
+        <div className="login-sso-wrapper">
+          <GoogleSSOLoginButton
+            configs={configs?.google?.configs}
+            configId={configs?.google?.config_id}
+            setRedirectUrlToCookie={setRedirectUrlToCookie}
+            setSignupOrganizationDetails={setSignupOrganizationDetails}
+            buttonText={buttonText}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+export default SSOLoginModule;
diff --git a/frontend/src/SignupPage/SignupPage.jsx b/frontend/src/SignupPage/SignupPage.jsx
index dde866585d..22f3408464 100644
--- a/frontend/src/SignupPage/SignupPage.jsx
+++ b/frontend/src/SignupPage/SignupPage.jsx
@@ -3,8 +3,6 @@ import { authenticationService } from '@/_services';
 import { toast } from 'react-hot-toast';
 import { Link, Navigate } from 'react-router-dom';
 import { validateEmail } from '../_helpers/utils';
-import GoogleSSOLoginButton from '@ee/components/LoginPage/GoogleSSOLoginButton';
-import GitSSOLoginButton from '@ee/components/LoginPage/GitSSOLoginButton';
 import { SignupInfoScreen } from '@/SuccessInfoScreen';
 import OnboardingNavbar from '@/_components/OnboardingNavbar';
 import { ButtonSolid } from '@/_components/AppButton';
@@ -18,6 +16,7 @@ import { withRouter } from '@/_hoc/withRouter';
 import { extractErrorObj, onInvitedUserSignUpSuccess } from '@/_helpers/platform/utils/auth.utils';
 import { isEmpty } from 'lodash';
 import { EmailComponent } from './EmailComponent';
+import SSOLoginModule from '@/LoginPage/SSOLoginModule';
 class SignupPageComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -131,10 +130,9 @@ class SignupPageComponent extends React.Component {
       (isEmpty(this.state.name) && !comingFromInviteFlow) ||
       this.state.password.length < 5;
 
-    const isAllSSODisabled = !configs?.git?.enabled && !configs?.google?.enabled;
-    const isSignUpDisabled = !this.organizationToken && !configs?.enable_sign_up && !configs?.form?.enable_sign_up;
+    const isAnySSOEnabled = !!configs?.git?.enabled || !!configs?.google?.enabled;
     const shouldShowSignupDisabledCard =
-      isSignUpDisabled || (!configs?.form?.enable_sign_up && configs?.enable_sign_up && isAllSSODisabled);
+      !this.organizationToken && !configs?.enable_sign_up && !configs?.form?.enable_sign_up;
     const passwordLabelText = this.organizationToken ? 'Create a password' : 'Password';
 
     return (
@@ -179,26 +177,13 @@ class SignupPageComponent extends React.Component {
                           <>
                             {(configs?.enable_sign_up || !!this.organizationToken) && (
                               <div>
-                                {configs?.git?.enabled && (
-                                  <div className="login-sso-wrapper">
-                                    <GitSSOLoginButton
-                                      configs={configs?.git?.configs}
-                                      text={this.props.t('confirmationPage.signupWithGithub', 'Sign up with GitHub')}
-                                      setSignupOrganizationDetails={this.setSignupOrganizationDetails}
-                                    />
-                                  </div>
-                                )}
-                                {configs?.google?.enabled && (
-                                  <div className="login-sso-wrapper">
-                                    <GoogleSSOLoginButton
-                                      configs={configs?.google?.configs}
-                                      configId={configs?.google?.config_id}
-                                      text={this.props.t('confirmationPage.signupWithGoogle', 'Sign up with Google')}
-                                      setSignupOrganizationDetails={this.setSignupOrganizationDetails}
-                                    />
-                                  </div>
-                                )}
-                                {(configs?.git?.enabled || configs?.google?.enabled) && this.isFormSignUpEnabled() && (
+                                <SSOLoginModule
+                                  configs={configs}
+                                  setSignupOrganizationDetails={() => this.setSignupOrganizationDetails()}
+                                  organizationSlug={this.paramInviteOrganizationSlug}
+                                  buttonText="Sign up with"
+                                />
+                                {isAnySSOEnabled && this.isFormSignUpEnabled() && (
                                   <div className="separator-signup">
                                     <div className="mt-2 separator" data-cy="onboarding-separator">
                                       <h2>