feat: implements unauthorized user view

src/admin/components/Routes.tsx

@@ -21,6 +21,7 @@ const Edit = lazy(() => import('./views/collections/Edit'));
 const EditGlobal = lazy(() => import('./views/Global'));
 const ResetPassword = lazy(() => import('./views/ResetPassword'));
 const Unauthorized = lazy(() => import('./views/Unauthorized'));
+const UnauthorizedUser = lazy(() => import('./views/UnauthorizedUser'));
 const Account = lazy(() => import('./views/Account'));
 
 const Routes = () => {
@@ -75,9 +76,12 @@ const Routes = () => {
                 <Route path={`${match.url}/reset/:token`}>
                   <ResetPassword />
                 </Route>
-                <Route path={`${match.url}/unlicensed`}>
+                <Route path={`${match.url}/unlicensed-domain`}>
                   <Unlicensed />
                 </Route>
+                <Route path={`${match.url}/unauthorized-user`}>
+                  <UnauthorizedUser />
+                </Route>
 
                 {collections.map((collection) => {
                   if (collection?.auth?.verify) {

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

@@ -0,0 +1,15 @@
+@import '../../../scss/styles.scss';
+
+.unauthorized-user {
+  &__plan-name {
+    text-transform: capitalize;
+  }
+
+  &__button-group {
+    display: flex;
+
+    > *:first-child {
+      margin-right: base(.5);
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useAuth, useConfig } from '@payloadcms/config-provider';
+import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
+import Banner from '../../elements/Banner';
+import MinimalTemplate from '../../templates/Minimal';
+import X from '../../icons/X';
+
+import './index.scss';
+
+const baseClass = 'unauthorized-user';
+
+const UnauthorizedUser: React.FC = () => {
+  const { licenseType, user } = useAuth();
+  const {
+    routes: {
+      admin,
+    },
+  } = useConfig();
+
+  return (
+    <MinimalTemplate className={baseClass}>
+      <Meta
+        title="Unauthorized User"
+        description="Unauthorized User"
+        keywords="Unauthorized, Payload, CMS"
+      />
+      <h2>Your user account is unauthorized</h2>
+      <Banner
+        type="error"
+        alignIcon="left"
+        icon={<X />}
+      >
+        Sorry, the
+        {' '}
+        <strong className={`${baseClass}__plan-name`}>
+          {licenseType}
+        </strong>
+        {' '}
+        license associated with this domain does not grant access to your email address (
+        <strong>{user?.email}</strong>
+        ).
+      </Banner>
+      <p>
+        Don&apos;t worry&mdash;your Payload API is still accessible, but you can only access the Payload admin panel with user(s) that are specifically whitelisted by the owner of this Payload license.
+      </p>
+      <p>The user accounts that are granted access can be configured within the Payload CMS website. Contact the owner of the license to learn more.</p>
+      <div className={`${baseClass}__button-group`}>
+        <Button
+          el="link"
+          url={`${admin}/logout`}
+        >
+          Log out
+        </Button>
+        <Button
+          el="anchor"
+          url="https://payloadcms.com/login"
+          buttonStyle="secondary"
+          newTab
+        >
+          Go to the Payload CMS website
+        </Button>
+      </div>
+    </MinimalTemplate>
+  );
+};
+
+export default UnauthorizedUser;

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

@@ -33,6 +33,7 @@ const Unlicensed: React.FC = () => (
     <Button
       el="anchor"
       url="https://payloadcms.com/login"
+      newTab
     >
       Review your licenses
     </Button>