feat: add before and after login components (#427)

demo/client/components/BeforeLogin/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const BeforeLogin: React.FC = () => {
+  return (
+    <div>
+      <h3>Welcome</h3>
+      <p>
+        This demo is a set up to configure Payload for the develop and testing of features. To see a product demo of a Payload project
+        please visit:
+        {' '}
+        <a
+          href="https://demo.payloadcms.com"
+          target="_blank"
+          rel="noreferrer"
+        >
+          demo.payloadcms.com
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
+
+export default BeforeLogin;

demo/payload.config.ts

@@ -37,6 +37,7 @@ import CustomRouteWithMinimalTemplate from './client/components/views/CustomMini
 import CustomRouteWithDefaultTemplate from './client/components/views/CustomDefault';
 import AfterDashboard from './client/components/AfterDashboard';
 import AfterNavLinks from './client/components/AfterNavLinks';
+import BeforeLogin from './client/components/BeforeLogin';
 
 export default buildConfig({
   cookiePrefix: 'payload',
@@ -68,6 +69,9 @@ export default buildConfig({
       afterDashboard: [
         AfterDashboard,
       ],
+      beforeLogin: [
+        BeforeLogin,
+      ],
       afterNavLinks: [
         AfterNavLinks,
       ],

docs/admin/components.mdx

@@ -22,10 +22,12 @@ You can override a set of admin panel-wide components by providing a component t
 | Path                  | Description  |
 | --------------------- | -------------|
 | **`Nav`**             | Contains the sidebar and mobile Nav in its entirety. |
+| **`BeforeDashboard`** | Array of components to inject into the built-in Dashboard, _before_ the default dashboard contents. [Demo](https://github.com/payloadcms/payload/tree/master/demo/client/components/AfterDashboard) |
+| **`AfterDashboard`**  | Array of components to inject into the built-in Dashboard, _after_ the default dashboard contents. |
+| **`BeforeLogin`**     | Array of components to inject into the built-in Login, _before_ the default login form. |
+| **`AfterLogin`**      | Array of components to inject into the built-in Login, _after_ the default login form. |
 | **`BeforeNavLinks`**  | Array of components to inject into the built-in Nav, _before_ the links themselves. |
-| **`AfterNavLinks`**   | Array of components to inject into the built-in Nav, _after_ the links themselves. [Demo](https://github.com/payloadcms/payload/tree/master/demo/client/components/AfterNavLinks) |
-| **`BeforeDashboard`** | Array of components to inject into the built-in Dashboard, _before_ the default dashboard contents. |
-| **`AfterNavLinks`**   | Array of components to inject into the built-in Nav, _after_ the default dashboard contents. [Demo](https://github.com/payloadcms/payload/tree/master/demo/client/components/AfterDashboard) |
+| **`AfterNavLinks`**   | Array of components to inject into the built-in Nav, _after_ the links. |
 | **`views.Account`**   | The Account view is used to show the currently logged in user's Account page. |
 | **`views.Dashboard`** | The main landing page of the Admin panel. |
 | **`graphics.Icon`**   | Used as a graphic within the `Nav` component. Often represents a condensed version of a full logo. |

src/admin/components/views/Login/index.scss

@@ -1,10 +0,0 @@
-@import '../../../scss/styles';
-
-.login {
-  &__brand {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: base(2);
-  }
-}

src/admin/components/views/Login/index.tsx

@@ -10,15 +10,25 @@ import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
 
-
-import './index.scss';
-
 const baseClass = 'login';
 
 const Login: React.FC = () => {
   const history = useHistory();
   const { user, setToken } = useAuth();
-  const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = useConfig();
+  const {
+    admin: {
+      user: userSlug,
+      components: {
+        beforeLogin,
+        afterLogin,
+      } = {},
+    },
+    serverURL,
+    routes: {
+      admin,
+      api,
+    },
+  } = useConfig();
 
   const onSuccess = (data) => {
     if (data.token) {
@@ -67,6 +77,7 @@ const Login: React.FC = () => {
       <div className={`${baseClass}__brand`}>
         <Logo />
       </div>
+      {Array.isArray(beforeLogin) && beforeLogin.map((Component, i) => <Component key={i} />)}
       <Form
         disableSuccessStatus
         waitForAutocomplete
@@ -91,6 +102,7 @@ const Login: React.FC = () => {
         </Link>
         <FormSubmit>Login</FormSubmit>
       </Form>
+      {Array.isArray(afterLogin) && afterLogin.map((Component, i) => <Component key={i} />)}
     </MinimalTemplate>
   );
 };

src/config/schema.ts

@@ -61,6 +61,8 @@ export default joi.object({
           ),
         beforeDashboard: joi.array().items(component),
         afterDashboard: joi.array().items(component),
+        beforeLogin: joi.array().items(component),
+        afterLogin: joi.array().items(component),
         beforeNavLinks: joi.array().items(component),
         afterNavLinks: joi.array().items(component),
         Nav: component,

src/config/types.ts

@@ -103,6 +103,8 @@ export type Config = {
       routes?: AdminRoute[]
       beforeDashboard?: React.ComponentType[]
       afterDashboard?: React.ComponentType[]
+      beforeLogin?: React.ComponentType[]
+      afterLogin?: React.ComponentType[]
       beforeNavLinks?: React.ComponentType[]
       afterNavLinks?: React.ComponentType[]
       Nav?: React.ComponentType