show/hide sign up page based on LOWCODER_EMAIL_SIGNUP_ENABLED flag from serverSettings

Author: raheeliftikhar5

client/packages/lowcoder/src/api/applicationApi.ts

@@ -98,6 +98,7 @@ class ApplicationApi extends Api {
   static publicToMarketplaceURL = (applicationId: string) => `/applications/${applicationId}/public-to-marketplace`;
   static getMarketplaceAppURL = (applicationId: string) => `/applications/${applicationId}/view_marketplace`;
   static setAppEditingStateURL = (applicationId: string) => `/applications/editState/${applicationId}`;
+  static serverSettingsURL = () => `/serverSettings`;
 
   static fetchHomeData(request: HomeDataPayload): AxiosPromise<HomeDataResponse> {
     return Api.get(ApplicationApi.fetchHomeDataURL, request);
@@ -240,6 +241,10 @@ class ApplicationApi extends Api {
       editingFinished,
     });
   }
+
+  static fetchServerSettings(): AxiosPromise<any> {
+    return Api.get(ApplicationApi.serverSettingsURL());
+  }
 }
 
 export default ApplicationApi;

client/packages/lowcoder/src/app.tsx

@@ -56,7 +56,7 @@ import { getBrandingConfig } from "./redux/selectors/configSelectors";
 import { buildMaterialPreviewURL } from "./util/materialUtils";
 import GlobalInstances from 'components/GlobalInstances';
 // import posthog from 'posthog-js'
-import { fetchHomeData } from "./redux/reduxActions/applicationActions";
+import { fetchHomeData, fetchServerSettingsAction } from "./redux/reduxActions/applicationActions";
 import { getNpmPackageMeta } from "./comps/utils/remote";
 import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
 
@@ -95,6 +95,7 @@ type AppIndexProps = {
   fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
   fetchLowcoderCompVersions: () => void;
   getCurrentUser: () => void;
+  fetchServerSettings: () => void;
   favicon: string;
   brandName: string;
   uiLanguage: string;
@@ -103,6 +104,7 @@ type AppIndexProps = {
 class AppIndex extends React.Component<AppIndexProps, any> {
   componentDidMount() {
     this.props.getCurrentUser();
+    this.props.fetchServerSettings();
     // if (!this.props.currentUserAnonymous) {
     //   this.props.fetchHomeData(this.props.currentUserAnonymous);
     // }
@@ -439,6 +441,9 @@ const mapDispatchToProps = (dispatch: any) => ({
       dispatch(setLowcoderCompsLoading(false));
     }
   },
+  fetchServerSettings: () => {
+    dispatch(fetchServerSettingsAction());
+  }
 });
 
 const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex);

client/packages/lowcoder/src/constants/reduxActionConstants.ts

@@ -145,6 +145,8 @@ export const ReduxActionTypes = {
   FETCH_ALL_MARKETPLACE_APPS: "FETCH_ALL_MARKETPLACE_APPS",
   FETCH_ALL_MARKETPLACE_APPS_SUCCESS: "FETCH_ALL_MARKETPLACE_APPS_SUCCESS",
   SET_APP_EDITING_STATE: "SET_APP_EDITING_STATE",
+  FETCH_SERVER_SETTINGS: "FETCH_SERVER_SETTINGS",
+  FETCH_SERVER_SETTINGS_SUCCESS: "FETCH_SERVER_SETTINGS_SUCCESS",
 
   /* user profile */
   SET_USER_PROFILE_SETTING_MODAL_VISIBLE: "SET_USER_PROFILE_SETTING_MODAL_VISIBLE",

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

@@ -6,7 +6,7 @@ import {
   LoginCardTitle,
   StyledRouteLink,
 } from "pages/userAuth/authComponents";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import UserApi from "api/userApi";
 import { useRedirectUrl } from "util/hooks";
@@ -25,8 +25,10 @@ import { 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";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import history from "util/history";
+import ApplicationApi from "@lowcoder-ee/api/applicationApi";
+import { getServerSettings } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const StyledCard = styled.div<{$selected: boolean}>`
   display: flex;
@@ -107,6 +109,16 @@ export default function FormLoginSteps(props: FormLoginProps) {
   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 serverSettings = useSelector(getServerSettings);
+
+  useEffect(() => {
+    const { LOWCODER_EMAIL_SIGNUP_ENABLED } = serverSettings;
+    if (!LOWCODER_EMAIL_SIGNUP_ENABLED) {
+      return setSignupEnabled(true);
+    }
+    setSignupEnabled(LOWCODER_EMAIL_SIGNUP_ENABLED === 'true');
+  }, [serverSettings]);
 
   const { onSubmit, loading } = useAuthSubmit(
     () =>
@@ -185,15 +197,19 @@ export default function FormLoginSteps(props: FormLoginProps) {
             {trans("userAuth.continue")}
           </ConfirmButton>
         </AccountLoginWrapper>
-        <Divider/>
-        <AuthBottomView>
-          <StyledRouteLink to={{
-            pathname: AUTH_REGISTER_URL,
-            state: location.state
-          }}>
-            {trans("userAuth.register")}
-          </StyledRouteLink>
-        </AuthBottomView>
+        {signupEnabled && (
+          <>
+            <Divider/>
+            <AuthBottomView>
+              <StyledRouteLink to={{
+                pathname: AUTH_REGISTER_URL,
+                state: location.state
+              }}>
+                {trans("userAuth.register")}
+              </StyledRouteLink>
+            </AuthBottomView>
+          </>
+        )}
       </>
     )
   }
@@ -266,7 +282,7 @@ export default function FormLoginSteps(props: FormLoginProps) {
           />
         )}
       </AccountLoginWrapper>
-      {isFormLoginEnabled && (
+      {isFormLoginEnabled && signupEnabled && (
         <>
           <Divider/>
           <AuthBottomView>

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

@@ -26,6 +26,8 @@ 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";
+import { useSelector } from "react-redux";
+import { getServerSettings } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const StyledFormInput = styled(FormInput)`
   margin-bottom: 16px;
@@ -65,6 +67,21 @@ function UserRegister() {
 
   const authId = systemConfig?.form.id;
 
+  const serverSettings = useSelector(getServerSettings);
+
+  useEffect(() => {
+    const { LOWCODER_EMAIL_SIGNUP_ENABLED } = serverSettings;
+    if(
+      serverSettings.hasOwnProperty('LOWCODER_EMAIL_SIGNUP_ENABLED')
+      && LOWCODER_EMAIL_SIGNUP_ENABLED === 'false'
+    ) {
+      history.push(
+        AUTH_LOGIN_URL,
+        {...location.state || {}, email: account},
+      )
+    };
+  }, [serverSettings]);
+  
   const { loading, onSubmit } = useAuthSubmit(
     () =>
       UserApi.formLogin({

client/packages/lowcoder/src/redux/reducers/uiReducers/applicationReducer.ts

@@ -337,6 +337,13 @@ const usersReducer = createReducer(initialState, {
       fetchingAppDetail: false,
     },
   }),
+  [ReduxActionTypes.FETCH_SERVER_SETTINGS_SUCCESS]: (
+    state: ApplicationReduxState,
+    action: ReduxAction<Record<string,string>>
+  ): ApplicationReduxState => ({
+    ...state,
+    serverSettings: action.payload,
+  }),
 });
 
 export interface ApplicationReduxState {
@@ -348,6 +355,7 @@ export interface ApplicationReduxState {
   appPermissionInfo?: AppPermissionInfo;
   currentApplication?: ApplicationMeta;
   templateId?: string;
+  serverSettings?: Record<string,string>;
   loadingStatus: {
     deletingApplication: boolean;
     isFetchingHomeData: boolean; // fetching app list

client/packages/lowcoder/src/redux/reduxActions/applicationActions.ts

@@ -181,3 +181,7 @@ export const setAppEditingState = (payload: SetAppEditingStatePayload) => ({
   type: ReduxActionTypes.SET_APP_EDITING_STATE,
   payload: payload,
 });
+
+export const fetchServerSettingsAction = () => ({
+  type: ReduxActionTypes.FETCH_SERVER_SETTINGS,
+});

client/packages/lowcoder/src/redux/sagas/applicationSagas.ts

@@ -403,6 +403,23 @@ function* setAppEditingStateSaga(action: ReduxAction<SetAppEditingStatePayload>)
   }
 }
 
+export function* fetchServerSettingsSaga() {
+  try {
+    const response: AxiosResponse<GenericApiResponse<Record<string,string>>> = yield call(
+      ApplicationApi.fetchServerSettings
+    );
+    if (Boolean(response.data)) {
+      yield put({
+        type: ReduxActionTypes.FETCH_SERVER_SETTINGS_SUCCESS,
+        payload: response.data,
+      });
+    }
+  } catch (error: any) {
+    log.debug("fetch server settings error: ", error);
+    messageInstance.error(error.message);
+  }
+}
+
 export default function* applicationSagas() {
   yield all([
     takeLatest(ReduxActionTypes.FETCH_HOME_DATA, fetchHomeDataSaga),
@@ -429,5 +446,6 @@ export default function* applicationSagas() {
       fetchAllMarketplaceAppsSaga,
     ),
     takeLatest(ReduxActionTypes.SET_APP_EDITING_STATE, setAppEditingStateSaga),
+    takeLatest(ReduxActionTypes.FETCH_SERVER_SETTINGS, fetchServerSettingsSaga),
   ]);
 }

client/packages/lowcoder/src/redux/selectors/applicationSelector.ts

@@ -43,3 +43,7 @@ export const isApplicationPublishing = (state: AppState): boolean => {
 export const getTemplateId = (state: AppState): any => {
   return state.ui.application.templateId;
 };
+
+export const getServerSettings = (state: AppState): Record<string,string> => {
+  return state.ui.application.serverSettings || {};
+}