update login flow for enterprise mode

raheeliftikhar5 · raheeliftikhar5 · commit a43628bb8cd3 · 2025-04-18T02:11:50.000+05:00
diff --git a/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx b/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx
@@ -4,7 +4,7 @@ import {
   ConfirmButton,
   StyledRouteLink,
 } from "pages/userAuth/authComponents";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import UserApi from "api/userApi";
 import { useRedirectUrl } from "util/hooks";
@@ -19,7 +19,7 @@ import { Divider } from "antd";
 import Flex from "antd/es/flex";
 import { validateResponse } from "@lowcoder-ee/api/apiUtils";
 import OrgApi from "@lowcoder-ee/api/orgApi";
-import { AccountLoginWrapper } from "./formLoginAdmin";
+import FormLogin, { AccountLoginWrapper } from "./formLoginAdmin";
 import { default as Button } from "antd/es/button";
 import LeftOutlined from "@ant-design/icons/LeftOutlined";
 import { fetchConfigAction } from "@lowcoder-ee/redux/reduxActions/configActions";
@@ -28,6 +28,9 @@ import history from "util/history";
 import { getServerSettings } from "@lowcoder-ee/redux/selectors/applicationSelector";
 import {fetchOrgPaginationByEmail} from "@lowcoder-ee/util/pagination/axios";
 import PaginationComp from "@lowcoder-ee/util/pagination/Pagination";
+import { getSystemConfigFetching } from "@lowcoder-ee/redux/selectors/configSelectors";
+import Spin from "antd/es/spin";
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
 
 const StyledCard = styled.div<{$selected: boolean}>`
   display: flex;
@@ -107,18 +110,28 @@ export default function FormLoginSteps(props: FormLoginProps) {
   const { systemConfig, inviteInfo, fetchUserAfterAuthSuccess } = useContext(AuthContext);
   const invitationId = inviteInfo?.invitationId;
   const authId = systemConfig?.form.id;
-  const isFormLoginEnabled = systemConfig?.form.enableLogin;
+  const isFormLoginEnabled = systemConfig?.form.enableLogin; // check from configs
   const [orgLoading, setOrgLoading] = useState(false);
   const [orgList, setOrgList] = useState<OrgItem[]>([]);
   const [currentStep, setCurrentStep] = useState<CurrentStepEnum>(CurrentStepEnum.EMAIL);
   const [organizationId, setOrganizationId] = useState<string|undefined>(props.organizationId);
   const [skipWorkspaceStep, setSkipWorkspaceStep] = useState<boolean>(false);
   const [signupEnabled, setSignupEnabled] = useState<boolean>(true);
+  const [signinEnabled, setSigninEnabled] = useState<boolean>(true); // check from server settings
   const serverSettings = useSelector(getServerSettings);
+  const isFetchingConfig = useSelector(getSystemConfigFetching);
   const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  const isEmailLoginEnabled = useMemo(() => {
+    return isFormLoginEnabled && signinEnabled;
+  }, [isFormLoginEnabled, signinEnabled]);
+ 
+  const isEnterpriseMode = useMemo(() => {
+    return serverSettings?.LOWCODER_WORKSPACE_MODE === "ENTERPRISE" || serverSettings?.LOWCODER_WORKSPACE_MODE === "SINGLEWORKSPACE";
+  }, [serverSettings]);
+
   useEffect(() => {
     if (account)
     fetchOrgPaginationByEmail({
@@ -133,11 +146,13 @@ export default function FormLoginSteps(props: FormLoginProps) {
   }, [pageSize, currentPage])
 
   useEffect(() => {
-    const { LOWCODER_EMAIL_SIGNUP_ENABLED } = serverSettings;
-    if (!LOWCODER_EMAIL_SIGNUP_ENABLED) {
-      return setSignupEnabled(true);
-    }
+    const {
+      LOWCODER_EMAIL_SIGNUP_ENABLED,
+      LOWCODER_EMAIL_AUTH_ENABLED,
+    } = serverSettings;
+
     setSignupEnabled(LOWCODER_EMAIL_SIGNUP_ENABLED === 'true');
+    setSigninEnabled(LOWCODER_EMAIL_AUTH_ENABLED === 'true');
   }, [serverSettings]);
 
   const { onSubmit, loading } = useAuthSubmit(
@@ -167,8 +182,9 @@ export default function FormLoginSteps(props: FormLoginProps) {
     }
 
     setOrgLoading(true);
+    // for enterprise mode, we will not ask for email in first step
     fetchOrgPaginationByEmail({
-      email: account,
+      email: isEnterpriseMode ? ' ' : account,
       pageNum: currentPage,
       pageSize: pageSize
     })
@@ -177,16 +193,13 @@ export default function FormLoginSteps(props: FormLoginProps) {
           setElements({elements: resp.data || [], total: resp.total || 1})
           setOrgList(resp.data);
           if (!resp.data.length) {
-            // history.push(
-            //   AUTH_REGISTER_URL,
-            //   {...location.state || {}, email: account},
-            // )
-            // return;
             throw new Error(trans("userAuth.userNotFound"));
           }
           if (resp.data.length === 1) {
-            setOrganizationId(resp.data[0].orgId);
-            dispatch(fetchConfigAction(resp.data[0].orgId));
+            // in Enterprise mode, we will get org data in different format
+            const selectedOrgId = isEnterpriseMode ? resp.data[0].id : resp.data[0].orgId;
+            setOrganizationId(selectedOrgId);
+            dispatch(fetchConfigAction(selectedOrgId));
             setCurrentStep(CurrentStepEnum.AUTH_PROVIDERS);
             return;
           }
@@ -203,6 +216,39 @@ export default function FormLoginSteps(props: FormLoginProps) {
       });
   }
 
+  useEffect(() => {
+    if (isEnterpriseMode) {
+      // dispatch(fetchConfigAction());
+      fetchOrgsByEmail();
+    }
+  }, [isEnterpriseMode]);
+
+  if (isEnterpriseMode) {
+    return (
+      <Spin indicator={<LoadingOutlined style={{ fontSize: 30 }} />} spinning={isFetchingConfig}>
+        { isEmailLoginEnabled && <FormLogin /> }
+        <ThirdPartyAuth
+          invitationId={invitationId}
+          invitedOrganizationId={organizationId}
+          authGoal="login"
+        />
+        {signupEnabled && (
+          <>
+            <Divider/>
+            <AuthBottomView>
+              <StyledRouteLink to={{
+                pathname: AUTH_REGISTER_URL,
+                state: {...location.state || {}, email: account}
+              }}>
+                {trans("userAuth.register")}
+              </StyledRouteLink>
+            </AuthBottomView>
+          </>
+        )}
+      </Spin>
+    );
+  }
+
   if(currentStep === CurrentStepEnum.EMAIL) {
     return (
       <>
@@ -281,10 +327,10 @@ export default function FormLoginSteps(props: FormLoginProps) {
         }} />
         <StepHeader
           title={
-            isFormLoginEnabled ? trans("userAuth.enterPassword") : trans("userAuth.selectAuthProvider")
+            isEmailLoginEnabled ? trans("userAuth.enterPassword") : trans("userAuth.selectAuthProvider")
           }
         />
-        {isFormLoginEnabled && (
+        {isEmailLoginEnabled && (
           <>
             <PasswordInput
               className="form-input password-input"
@@ -316,7 +362,7 @@ export default function FormLoginSteps(props: FormLoginProps) {
           />
         )}
       </AccountLoginWrapper>
-      {isFormLoginEnabled && signupEnabled && (
+      {isEmailLoginEnabled && signupEnabled && (
         <>
           <Divider/>
           <AuthBottomView>
diff --git a/client/packages/lowcoder/src/pages/userAuth/register.tsx b/client/packages/lowcoder/src/pages/userAuth/register.tsx
@@ -63,12 +63,16 @@ function UserRegister() {
       return inviteInfo?.invitedOrganizationId;
     }
     return orgId;
-  }, [ inviteInfo, orgId ])
+  }, [ inviteInfo, orgId ]);
 
   const authId = systemConfig?.form.id;
 
   const serverSettings = useSelector(getServerSettings);
 
+  const isEnterpriseMode = useMemo(() => {
+    return serverSettings?.LOWCODER_WORKSPACE_MODE === "ENTERPRISE" || serverSettings?.LOWCODER_WORKSPACE_MODE === "SINGLEWORKSPACE";
+  }, [serverSettings]);
+
   useEffect(() => {
     const { LOWCODER_EMAIL_SIGNUP_ENABLED } = serverSettings;
     if(
@@ -160,7 +164,7 @@ function UserRegister() {
             {trans("userAuth.register")}
           </ConfirmButton>
           <TermsAndPrivacyInfo onCheckChange={(e) => setSubmitBtnDisable(!e.target.checked)} />
-          {organizationId && (
+          {(organizationId || isEnterpriseMode) && (
             <ThirdPartyAuth
               invitationId={invitationId}
               invitedOrganizationId={organizationId}
diff --git a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
@@ -8,7 +8,7 @@ import history from "util/history";
 import { LoginLogoStyle, LoginLabelStyle, StyledLoginButton } from "pages/userAuth/authComponents";
 import { useSelector } from "react-redux";
 import { getSystemConfigFetching, selectSystemConfig } from "redux/selectors/configSelectors";
-import React from "react";
+import React, { useMemo } from "react";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import styled from "styled-components";
 import { trans } from "i18n";
@@ -19,6 +19,7 @@ import { useRedirectUrl } from "util/hooks";
 import { MultiIconDisplay } from "../../../comps/comps/multiIconDisplay";
 import Spin from "antd/es/spin";
 import { LoadingOutlined } from "@ant-design/icons";
+import { getServerSettings } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const { Text } = Typography;
 
@@ -111,7 +112,16 @@ export function ThirdPartyAuth(props: {
 }) {
   const systemConfigFetching = useSelector(getSystemConfigFetching);
   const systemConfig = useSelector(selectSystemConfig);
+  const serverSettings = useSelector(getServerSettings);
   const isFormLoginEnabled = systemConfig?.form.enableLogin;
+
+  const isEmailLoginEnabled = useMemo(() => {
+    return isFormLoginEnabled && serverSettings.LOWCODER_EMAIL_AUTH_ENABLED === 'true';
+  }, [isFormLoginEnabled, serverSettings]);
+
+  const isEmailSignupEnabled = useMemo(() => {
+    return serverSettings.LOWCODER_EMAIL_SIGNUP_ENABLED === 'true';
+  }, [serverSettings]);
   
   if (systemConfigFetching) {
     return <Spin indicator={<LoadingOutlined style={{ fontSize: 15, marginTop: '16px' }} spin />} />;
@@ -140,7 +150,10 @@ export function ThirdPartyAuth(props: {
   });
   return (
     <ThirdPartyLoginButtonWrapper>
-      { isFormLoginEnabled && Boolean(socialLoginButtons.length) && (
+      { (
+        (isEmailLoginEnabled && props.authGoal === 'login')
+        || (isEmailSignupEnabled && props.authGoal === 'register')
+      ) && Boolean(socialLoginButtons.length) && (
         <Divider plain>
           <Text type="secondary">or</Text>
         </Divider>
