show auth providers for selected workspace

Author: raheeliftikhar5

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2976,7 +2976,10 @@ export const en = {
     "resetSuccessDesc": "Password Reset Succeeded. The New Password is: {password}",
     "resetLostPasswordSuccess": "Password Reset Succeeded. Please login again.",
     "copyPassword": "Copy Password",
-    "poweredByLowcoder": "Powered by: Lowcoder.cloud"
+    "poweredByLowcoder": "Powered by: Lowcoder.cloud",
+    "continue": "Continue",
+    "enterPassword": "Enter your password",
+    "selectWorkspace": "Select your workspace",
   },
   "preLoad": {
     "jsLibraryHelpText": "Add JavaScript Libraries to Your Current Application via URL Addresses. lodash, day.js, uuid, numbro are Built into the System for Immediate Use. JavaScript Libraries are Loaded Before the Application is Initialized, Which Can Have an Impact on Application Performance.",

client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx

@@ -25,6 +25,8 @@ import Card from "antd/es/card/Card";
 import { AccountLoginWrapper } from "./formLogin";
 import { default as Button } from "antd/es/button";
 import LeftOutlined from "@ant-design/icons/LeftOutlined";
+import { fetchConfigAction } from "@lowcoder-ee/redux/reduxActions/configActions";
+import { useDispatch } from "react-redux";
 
 const StyledCard = styled.div<{$selected: boolean}>`
   display: flex;
@@ -83,6 +85,7 @@ const StepBackButton = (props : {
   </Button>
 )
 export default function FormLoginSteps() {
+  const dispatch = useDispatch();
   const [account, setAccount] = useState("");
   const [password, setPassword] = useState("");
   const redirectUrl = useRedirectUrl();
@@ -117,7 +120,7 @@ export default function FormLoginSteps() {
       .then((resp) => {
         if (validateResponse(resp)) {
           setOrgList(resp.data.data);
-          if (!resp.data.data.lenght) {
+          if (!resp.data.data.length) {
             throw new Error('Error: no workspaces found');
           }
           else if (resp.data.data.length === 1) {
@@ -145,7 +148,6 @@ export default function FormLoginSteps() {
           <StepHeader title={trans("userAuth.inputEmail")} />
           <FormInput
             className="form-input"
-            // label={trans("userAuth.email")}
             label={''}
             defaultValue={account}
             onChange={(value, valid) => setAccount(valid ? value : "")}
@@ -156,7 +158,7 @@ export default function FormLoginSteps() {
             }}
           />
           <ConfirmButton loading={orgLoading} disabled={!account} onClick={fetchOrgsByEmail}>
-            Continue
+            {trans("userAuth.continue")}
           </ConfirmButton>
         </AccountLoginWrapper>
         <Divider/>
@@ -177,13 +179,14 @@ export default function FormLoginSteps() {
       <>
         <AccountLoginWrapper>
           <StepBackButton onClick={() => setCurrentStep(CurrentStepEnum.EMAIL)} />
-          <StepHeader title={"Select your workspace"} />
+          <StepHeader title={trans("userAuth.selectWorkspace")} />
           {orgList.map(org => (
             <StyledCard
               key={org.orgId}
               $selected={organizationId === org.orgId}
               onClick={() => {
                 setOrganizationId(org.orgId);
+                dispatch(fetchConfigAction(org.orgId));
                 setCurrentStep(CurrentStepEnum.AUTH_PROVIDERS);
               }}
             >
@@ -199,7 +202,7 @@ export default function FormLoginSteps() {
     <>
       <AccountLoginWrapper>
         <StepBackButton onClick={() => setCurrentStep(CurrentStepEnum.WORKSPACES)} />
-        <StepHeader title={"Enter your password"} />
+        <StepHeader title={trans("userAuth.enterPassword")} />
         <PasswordInput
           className="form-input password-input"
           passInputConf={{

client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx

@@ -14,9 +14,12 @@ import styled from "styled-components";
 import { trans } from "i18n";
 import { geneAuthStateAndSaveParam, getAuthUrl, getRedirectUrl } from "pages/userAuth/authUtils";
 import { default as Divider } from "antd/es/divider";
+import { default as Typography } from "antd/es/typography";
 import { useRedirectUrl } from "util/hooks";
 import { MultiIconDisplay } from "../../../comps/comps/multiIconDisplay";
 
+const { Text } = Typography;
+
 const ThirdPartyLoginButtonWrapper = styled.div`
   button{
     width: 100%;
@@ -128,7 +131,11 @@ export function ThirdPartyAuth(props: {
   });
   return (
     <ThirdPartyLoginButtonWrapper>
-      { Boolean(socialLoginButtons.length) && <Divider /> }
+      { Boolean(socialLoginButtons.length) && (
+        <Divider plain>
+          <Text type="secondary">or</Text>
+        </Divider>
+      )}
       {socialLoginButtons}
     </ThirdPartyLoginButtonWrapper>
   );