hide password field and signup option when Email based auth is disabled

Author: raheeliftikhar5

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

@@ -3011,6 +3011,7 @@ export const en = {
     "poweredByLowcoder": "Powered by: Lowcoder.cloud",
     "continue": "Continue",
     "enterPassword": "Enter your password",
+    "selectAuthProvider": "Select Authentication Provider",
     "selectWorkspace": "Select your workspace",
   },
   "preLoad": {
@@ -3546,6 +3547,7 @@ export const en = {
     "saveSuccess": "Saved Successfully",
     "dangerLabel": "Danger Zone",
     "dangerTip": "Disabling or Deleting This ID Provider May Result in Some Users Being Unable to Log In. Proceed With Caution.",
+    "lastEnabledConfig": "You can't disable/delete config as this is the only enabled configuration.",
     "disable": "Disable",
     "disableSuccess": "Disabled Successfully",
     "encryptedServer": "-------- Encrypted on the Server Side --------",

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

@@ -101,6 +101,7 @@ 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 [orgLoading, setOrgLoading] = useState(false);
   const [orgList, setOrgList] = useState<OrgItem[]>([]);
   const [currentStep, setCurrentStep] = useState<CurrentStepEnum>(CurrentStepEnum.EMAIL);
@@ -227,27 +228,35 @@ export default function FormLoginSteps(props: FormLoginProps) {
           if (skipWorkspaceStep) return setCurrentStep(CurrentStepEnum.EMAIL);
           setCurrentStep(CurrentStepEnum.WORKSPACES)
         }} />
-        <StepHeader title={trans("userAuth.enterPassword")} />
-        <PasswordInput
-          className="form-input password-input"
-          passInputConf={{
-            label: ' ',
-          }}
-          onChange={(value) => setPassword(value)}
-          valueCheck={() => [true, ""]}
+        <StepHeader
+          title={
+            isFormLoginEnabled ? trans("userAuth.enterPassword") : trans("userAuth.selectAuthProvider")
+          }
         />
-        <Flex justify="end" style={{margin: '10px 0'}}>
-          <Link to={{
-            pathname: AUTH_FORGOT_PASSWORD_URL,
-            state: location.state
-            }}
-          >
-            {`${trans("userAuth.forgotPassword")}?`}
-          </Link>
-        </Flex>
-        <ConfirmButton loading={loading} disabled={!account || !password} onClick={onSubmit}>
-          {trans("userAuth.login")}
-        </ConfirmButton>
+        {isFormLoginEnabled && (
+          <>
+            <PasswordInput
+              className="form-input password-input"
+              passInputConf={{
+                label: ' ',
+              }}
+              onChange={(value) => setPassword(value)}
+              valueCheck={() => [true, ""]}
+            />
+            <Flex justify="end" style={{margin: '10px 0'}}>
+              <Link to={{
+                pathname: AUTH_FORGOT_PASSWORD_URL,
+                state: location.state
+                }}
+              >
+                {`${trans("userAuth.forgotPassword")}?`}
+              </Link>
+            </Flex>
+            <ConfirmButton loading={loading} disabled={!account || !password} onClick={onSubmit}>
+              {trans("userAuth.login")}
+            </ConfirmButton>
+          </>
+        )}
         {organizationId && (
           <ThirdPartyAuth
             invitationId={invitationId}
@@ -256,15 +265,19 @@ export default function FormLoginSteps(props: FormLoginProps) {
           />
         )}
       </AccountLoginWrapper>
-      <Divider/>
-      <AuthBottomView>
-        <StyledRouteLink to={{
-          pathname: AUTH_REGISTER_URL,
-          state: location.state
-        }}>
-          {trans("userAuth.register")}
-        </StyledRouteLink>
-      </AuthBottomView>
+      {isFormLoginEnabled && (
+        <>
+          <Divider/>
+          <AuthBottomView>
+            <StyledRouteLink to={{
+              pathname: AUTH_REGISTER_URL,
+              state: location.state
+            }}>
+              {trans("userAuth.register")}
+            </StyledRouteLink>
+          </AuthBottomView>
+        </>
+      )}
     </>
   );
 }

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

@@ -111,6 +111,7 @@ export function ThirdPartyAuth(props: {
 }) {
   const systemConfigFetching = useSelector(getSystemConfigFetching);
   const systemConfig = useSelector(selectSystemConfig);
+  const isFormLoginEnabled = systemConfig?.form.enableLogin;
 
   if (systemConfigFetching) {
     return <Spin indicator={<LoadingOutlined style={{ fontSize: 15, marginTop: '16px' }} spin />} />;
@@ -139,7 +140,7 @@ export function ThirdPartyAuth(props: {
   });
   return (
     <ThirdPartyLoginButtonWrapper>
-      { Boolean(socialLoginButtons.length) && (
+      { isFormLoginEnabled && Boolean(socialLoginButtons.length) && (
         <Divider plain>
           <Text type="secondary">or</Text>
         </Divider>