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

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