On signup, when user enter emails and it already exists then redirect to signin

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/tacoInput.tsx

@@ -331,13 +331,14 @@ const FormInput = (props: {
     check: (value: string) => boolean;
   };
   formName?: string;
+  onBlur?: () => void;
   onChange?: (value: string, valid: boolean) => void;
   className?: string;
   inputRef?: Ref<InputRef>;
   msg?: string;
   defaultValue?: string;
 }) => {
-  const { mustFill, checkRule, label, placeholder, onChange, formName, className, inputRef, defaultValue } =
+  const { mustFill, checkRule, label, placeholder, onBlur, onChange, formName, className, inputRef, defaultValue } =
     props;
   const [valueValid, setValueValid] = useState(true);
   return (
@@ -360,6 +361,7 @@ const FormInput = (props: {
           }
           onChange && onChange(e.target.value, valid);
         }}
+        onBlur={() => onBlur?.()}
       />
     </FormInputFiled>
   );

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

@@ -127,7 +127,7 @@ export default function FormLoginSteps(props: FormLoginProps) {
   const fetchOrgsByEmail = () => {
     // if user is invited or using org's login url then avoid fetching workspaces
     // and skip workspace selection step
-    if (organizationId) {
+    if (Boolean(organizationId)) {
       setSkipWorkspaceStep(true);
       dispatch(fetchConfigAction(organizationId));
       setCurrentStep(CurrentStepEnum.AUTH_PROVIDERS);
@@ -148,6 +148,7 @@ export default function FormLoginSteps(props: FormLoginProps) {
           }
           if (resp.data.data.length === 1) {
             setOrganizationId(resp.data.data[0].orgId);
+            dispatch(fetchConfigAction(resp.data.data[0].orgId));
             setCurrentStep(CurrentStepEnum.AUTH_PROVIDERS);
             return;
           }

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

@@ -7,7 +7,7 @@ import {
   StyledRouteLinkLogin,
   TermsAndPrivacyInfo,
 } from "pages/userAuth/authComponents";
-import { FormInput, PasswordInput } from "lowcoder-design";
+import { CustomModal, FormInput, messageInstance, PasswordInput } from "lowcoder-design";
 import { AUTH_LOGIN_URL, ORG_AUTH_LOGIN_URL } from "constants/routesURL";
 import UserApi from "api/userApi";
 import { useRedirectUrl } from "util/hooks";
@@ -21,6 +21,11 @@ import { AuthContext, checkPassWithMsg, useAuthSubmit } from "pages/userAuth/aut
 import { ThirdPartyAuth } from "pages/userAuth/thirdParty/thirdPartyAuth";
 import { useParams } from "react-router-dom";
 import { Divider } from "antd";
+import { OrgApi } from "@lowcoder-ee/api/orgApi";
+import { validateResponse } from "@lowcoder-ee/api/apiUtils";
+import history from "util/history";
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
+import Spin from "antd/es/spin";
 
 const StyledFormInput = styled(FormInput)`
   margin-bottom: 16px;
@@ -44,6 +49,8 @@ function UserRegister() {
     return email ?? '';
   });
   const [password, setPassword] = useState("");
+  const [orgLoading, setOrgLoading] = useState(false);
+  const [lastEmailChecked, setLastEmailChecked] = useState("");
   const redirectUrl = useRedirectUrl();
   const { systemConfig, inviteInfo, fetchUserAfterAuthSuccess } = useContext(AuthContext);
   const invitationId = inviteInfo?.invitationId;
@@ -74,60 +81,86 @@ function UserRegister() {
     fetchUserAfterAuthSuccess,
   );
 
+  const checkEmailExist = () => {
+    if (!Boolean(account.length) || lastEmailChecked === account) return;
+
+    setOrgLoading(true);
+    OrgApi.fetchOrgsByEmail(account)
+      .then((resp) => {
+        if (validateResponse(resp)) {
+          const orgList = resp.data.data;
+          if (orgList.length) {
+            messageInstance.error('Email is already registered');
+            history.push(
+              AUTH_LOGIN_URL,
+              {...location.state || {}, email: account},
+            )
+          }
+        }
+      })
+      .finally(() => {
+        setLastEmailChecked(account)
+        setOrgLoading(false);
+      });
+  }
+
   const registerHeading = trans("userAuth.register")
   const registerSubHeading = trans("userAuth.poweredByLowcoder");
 
   return (
-    <AuthContainer
-      heading={registerHeading}
-      subHeading={registerSubHeading}
-      type="large"
-    >
-      <RegisterContent>
-        <StyledFormInput
-          className="form-input"
-          label={trans("userAuth.email")}
-          defaultValue={account}
-          onChange={(value, valid) => setAccount(valid ? value : "")}
-          placeholder={trans("userAuth.inputEmail")}
-          checkRule={{
-            check: checkEmailValid,
-            errorMsg: trans("userAuth.inputValidEmail"),
-          }}
-        />
-        <StyledPasswordInput
-          className="form-input"
-          passInputConf={{label:trans("password.label"), placeholder: trans("password.placeholder")}}
-          confirmPassConf={{label:trans("password.conformLabel"), placeholder: trans("password.conformPlaceholder")}}
-          valueCheck={checkPassWithMsg}
-          onChange={(value, valid) => setPassword(valid ? value : "")}
-          doubleCheck
-        />
-        <ConfirmButton
-          disabled={!account || !password || submitBtnDisable}
-          onClick={onSubmit}
-          loading={loading}
-        >
-          {trans("userAuth.register")}
-        </ConfirmButton>
-        <TermsAndPrivacyInfo onCheckChange={(e) => setSubmitBtnDisable(!e.target.checked)} />
-        {organizationId && (
-          <ThirdPartyAuth
-            invitationId={invitationId}
-            invitedOrganizationId={organizationId}
-            authGoal="register"
+    <Spin indicator={<LoadingOutlined style={{ fontSize: 30 }} />} spinning={orgLoading}>
+      <AuthContainer
+        heading={registerHeading}
+        subHeading={registerSubHeading}
+        type="large"
+      >
+        <RegisterContent>
+          <StyledFormInput
+            className="form-input"
+            label={trans("userAuth.email")}
+            defaultValue={account}
+            onChange={(value, valid) => setAccount(valid ? value : "")}
+            onBlur={checkEmailExist}
+            placeholder={trans("userAuth.inputEmail")}
+            checkRule={{
+              check: checkEmailValid,
+              errorMsg: trans("userAuth.inputValidEmail"),
+            }}
+          />
+          <StyledPasswordInput
+            className="form-input"
+            passInputConf={{label:trans("password.label"), placeholder: trans("password.placeholder")}}
+            confirmPassConf={{label:trans("password.conformLabel"), placeholder: trans("password.conformPlaceholder")}}
+            valueCheck={checkPassWithMsg}
+            onChange={(value, valid) => setPassword(valid ? value : "")}
+            doubleCheck
           />
-        )}
-      </RegisterContent>
-      <Divider/>
-      <StyledRouteLinkLogin to={{
-        pathname: orgId
-          ? ORG_AUTH_LOGIN_URL.replace(':orgId', orgId)
-          : AUTH_LOGIN_URL,
-        state: location.state
-      }}>{trans("userAuth.userLogin")}
-      </StyledRouteLinkLogin>
-    </AuthContainer>
+          <ConfirmButton
+            disabled={!account || !password || submitBtnDisable}
+            onClick={onSubmit}
+            loading={loading}
+          >
+            {trans("userAuth.register")}
+          </ConfirmButton>
+          <TermsAndPrivacyInfo onCheckChange={(e) => setSubmitBtnDisable(!e.target.checked)} />
+          {organizationId && (
+            <ThirdPartyAuth
+              invitationId={invitationId}
+              invitedOrganizationId={organizationId}
+              authGoal="register"
+            />
+          )}
+        </RegisterContent>
+        <Divider/>
+        <StyledRouteLinkLogin to={{
+          pathname: orgId
+            ? ORG_AUTH_LOGIN_URL.replace(':orgId', orgId)
+            : AUTH_LOGIN_URL,
+          state: location.state
+        }}>{trans("userAuth.userLogin")}
+        </StyledRouteLinkLogin>
+      </AuthContainer>
+    </Spin>
   );
 }