fixup! fixup! feat: Add plugin slot for login page

Author: xitij2000

src/logistration/Logistration.jsx

@@ -25,7 +25,7 @@ import {
   getTpaHint, getTpaProvider, updatePathWithQueryParams,
 } from '../data/utils';
 import { backupLoginForm } from '../login/data/actions';
-import LoginPageSlot from '../plugin-slots/LoginPage';
+import LoginComponentSlot from '../plugin-slots/LoginComponentSlot';
 import { RegistrationPage } from '../register';
 import { backupRegistrationForm } from '../register/data/actions';
 
@@ -116,7 +116,7 @@ const Logistration = ({
                 {!institutionLogin && (
                   <h3 className="mb-4.5">{formatMessage(messages['logistration.sign.in'])}</h3>
                 )}
-                <LoginPageSlot institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
+                <LoginComponentSlot institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
               </div>
             </>
           )
@@ -149,7 +149,7 @@ const Logistration = ({
                 )}
                 {selectedPage === LOGIN_PAGE
                   ? (
-                    <LoginPageSlot
+                    <LoginComponentSlot
                       institutionLogin={institutionLogin}
                       handleInstitutionLogin={handleInstitutionLogin}
                     />

src/plugin-slots/LoginComponentSlot/README.md

@@ -0,0 +1,50 @@
+# Login Component Slot
+
+### Slot ID: `org.openedx.frontend.authn.login_component.v1`
+
+### Slot ID Aliases
+* `login_component_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the login component.
+
+## Example
+
+### Default content
+![Default Login Page](./default_component.png)
+
+### With a prepended message
+![Login Page with ](./component_with_prefix.png)
+
+The following `env.config.jsx` will add a message before the login component.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+// Load environment variables from .env file
+const config = {
+  ...process.env,
+  pluginSlots: {
+    'org.openedx.frontend.authn.login_component.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'test_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: () => (
+              <h2>You're logging into TEST Instance.</h2>
+            )
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+
+```

src/plugin-slots/LoginComponentSlot/component_with_prefix.png

@@ -1,16 +1,22 @@
 import React from 'react';
 
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import PropTypes from 'prop-types';
 
 import LoginPage from '../../login/LoginPage';
 
-const LoginPageSlot = ({
+const LoginComponentSlot = ({
   institutionLogin,
   handleInstitutionLogin,
+}: {
+  institutionLogin: boolean,
+  handleInstitutionLogin: (value: boolean) => void,
 }) => (
   <PluginSlot
-    id="login_page_slot"
+    id="org.openedx.frontend.authn.login_component.v1"
+    pluginProps={{
+      isInstitutionLogin: institutionLogin,
+      setInstitutionLogin: handleInstitutionLogin,
+    }}
   >
     <LoginPage
       institutionLogin={institutionLogin}
@@ -19,9 +25,4 @@ const LoginPageSlot = ({
   </PluginSlot>
 );
 
-LoginPageSlot.propTypes = {
-  institutionLogin: PropTypes.bool.isRequired,
-  handleInstitutionLogin: PropTypes.func.isRequired,
-};
-
-export default LoginPageSlot;
+export default LoginComponentSlot;