Chore: Use useEnterprise to load EE Login component

packages/core/admin/admin/src/pages/AuthPage/components/Login/index.js

@@ -6,7 +6,7 @@ import UnauthenticatedLayout from '../../../../layouts/UnauthenticatedLayout';
 
 import BaseLogin from './BaseLogin';
 
-const Login = (loginProps) => {
+export const LoginCE = (loginProps) => {
   return (
     <UnauthenticatedLayout>
       <BaseLogin {...loginProps} />
@@ -14,12 +14,10 @@ const Login = (loginProps) => {
   );
 };
 
-Login.defaultProps = {
+LoginCE.defaultProps = {
   onSubmit: (e) => e.preventDefault(),
 };
 
-Login.propTypes = {
+LoginCE.propTypes = {
   onSubmit: PropTypes.func,
 };
-
-export default Login;

packages/core/admin/admin/src/pages/AuthPage/constants.js

@@ -1,5 +1,4 @@
 import { translatedErrors } from '@strapi/helper-plugin';
-import Login from 'ee_else_ce/pages/AuthPage/components/Login';
 import * as yup from 'yup';
 
 import ForgotPassword from './components/ForgotPassword';
@@ -27,8 +26,10 @@ export const FORMS = {
     schema: null,
     inputsPrefix: '',
   },
+
+  // the `Component` attribute is set after all forms and CE/EE components are loaded, but since we
+  // are here outside of a React component we can not use the hook directly
   login: {
-    Component: Login,
     endPoint: 'login',
     fieldsToDisable: [],
     fieldsToOmit: ['rememberMe'],

packages/core/admin/admin/src/pages/AuthPage/index.js

@@ -13,6 +13,7 @@ import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvi
 import { useEnterprise } from '../../hooks/useEnterprise';
 import formatAPIErrors from '../../utils/formatAPIErrors';
 
+import { LoginCE } from './components/Login';
 import { FORMS } from './constants';
 import init from './init';
 import { initialState, reducer } from './reducer';
@@ -29,6 +30,10 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     params: { authType },
   } = useRouteMatch('/auth/:authType');
   const query = useQuery();
+  const Login = useEnterprise(
+    LoginCE,
+    async () => (await import('../../../../ee/admin/pages/AuthPage/components/Login')).LoginEE
+  );
   const forms = useEnterprise(
     FORMS,
     async () => (await import('../../../../ee/admin/pages/AuthPage/constants')).FORMS,
@@ -50,7 +55,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   );
   const CancelToken = axios.CancelToken;
   const source = CancelToken.source();
-  const { Component, endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } =
+  const { endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } =
     forms?.[authType] ?? {};
 
   useEffect(() => {
@@ -274,6 +279,18 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     );
   }
 
+  if (Login) {
+    // Assign the component to render for the login form
+    forms.login.Component = Login;
+  }
+
+  // block rendering until the Login EE component is fully loaded
+  if (!Login) {
+    return null;
+  }
+
+  const { Component } = forms?.[authType] ?? {};
+
   return (
     <Component
       {...rest}

packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js

@@ -14,7 +14,7 @@ const DividerFull = styled(Divider)`
   flex: 1;
 `;
 
-const Login = (loginProps) => {
+export const LoginEE = (loginProps) => {
   const ssoEnabled = window.strapi.features.isEnabled(window.strapi.features.SSO);
   const { isLoading, data: providers } = useAuthProviders({ ssoEnabled });
   const { formatMessage } = useIntl();
@@ -49,17 +49,15 @@ const Login = (loginProps) => {
   );
 };
 
-Login.defaultProps = {
+LoginEE.defaultProps = {
   onSubmit: (e) => e.preventDefault(),
   requestError: null,
 };
 
-Login.propTypes = {
+LoginEE.propTypes = {
   formErrors: PropTypes.object.isRequired,
   modifiedData: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   onSubmit: PropTypes.func,
   requestError: PropTypes.object,
 };
-
-export default Login;