From 5591eeafca1aa6e8abcc2d8276f7478e00b75ef2 Mon Sep 17 00:00:00 2001 From: Dan Ribbens Date: Mon, 31 Jan 2022 21:26:12 -0500 Subject: [PATCH] feat: add before and after login components (#427) --- demo/client/components/BeforeLogin/index.tsx | 24 ++++++++++++++++++++ demo/payload.config.ts | 4 ++++ docs/admin/components.mdx | 8 ++++--- src/admin/components/views/Login/index.scss | 10 -------- src/admin/components/views/Login/index.tsx | 20 ++++++++++++---- src/config/schema.ts | 2 ++ src/config/types.ts | 2 ++ 7 files changed, 53 insertions(+), 17 deletions(-) create mode 100644 demo/client/components/BeforeLogin/index.tsx delete mode 100644 src/admin/components/views/Login/index.scss diff --git a/demo/client/components/BeforeLogin/index.tsx b/demo/client/components/BeforeLogin/index.tsx new file mode 100644 index 0000000000..dd7455d65d --- /dev/null +++ b/demo/client/components/BeforeLogin/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +const BeforeLogin: React.FC = () => { + return ( +
+

Welcome

+

+ 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: + {' '} + + demo.payloadcms.com + + . +

+
+ ); +}; + +export default BeforeLogin; diff --git a/demo/payload.config.ts b/demo/payload.config.ts index 018b10d893..b984825b80 100644 --- a/demo/payload.config.ts +++ b/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, ], diff --git a/docs/admin/components.mdx b/docs/admin/components.mdx index 32e5876c7a..c1a4171d79 100644 --- a/docs/admin/components.mdx +++ b/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. | diff --git a/src/admin/components/views/Login/index.scss b/src/admin/components/views/Login/index.scss deleted file mode 100644 index e05eabc5d3..0000000000 --- a/src/admin/components/views/Login/index.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../../scss/styles'; - -.login { - &__brand { - display: flex; - justify-content: center; - width: 100%; - margin-bottom: base(2); - } -} diff --git a/src/admin/components/views/Login/index.tsx b/src/admin/components/views/Login/index.tsx index 9ab34ce830..964629aae8 100644 --- a/src/admin/components/views/Login/index.tsx +++ b/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 = () => {
+ {Array.isArray(beforeLogin) && beforeLogin.map((Component, i) => )}
{ Login
+ {Array.isArray(afterLogin) && afterLogin.map((Component, i) => )} ); }; diff --git a/src/config/schema.ts b/src/config/schema.ts index 5850a8f833..dbff53e280 100644 --- a/src/config/schema.ts +++ b/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, diff --git a/src/config/types.ts b/src/config/types.ts index 49999c739f..68d34d4880 100644 --- a/src/config/types.ts +++ b/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