From 4485303c1d6af4f229f51237ba3b227c7e5a527d Mon Sep 17 00:00:00 2001
From: Michael Foster <hingobway@users.noreply.github.com>
Date: Mon, 24 Jun 2024 18:17:57 -0400
Subject: [PATCH] Allow scoped pages (#66)

* allow scoped pages

* fix imports
---
 .../_base/LoginBoundary/LoginBoundary.tsx      | 15 +++++++++++++--
 .../_base/LoginBoundary/ScopeError.tsx         | 17 +++++++++++++++++
 client/src/app/page.template.tsx               | 18 ++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 client/src/app/_components/_base/LoginBoundary/ScopeError.tsx
 create mode 100644 client/src/app/page.template.tsx

diff --git a/client/src/app/_components/_base/LoginBoundary/LoginBoundary.tsx b/client/src/app/_components/_base/LoginBoundary/LoginBoundary.tsx
index 33115aa..c5ce38a 100644
--- a/client/src/app/_components/_base/LoginBoundary/LoginBoundary.tsx
+++ b/client/src/app/_components/_base/LoginBoundary/LoginBoundary.tsx
@@ -1,12 +1,23 @@
 import { Children } from '@/util/propTypes';
-import { getUser } from '@/app/_ctx/user/provider';
+import { type AuthUser, getUser } from '@/app/_ctx/user/provider';
 import LoginBoundaryRedirect from './LoginBoundaryRedirect';
+import ScopeError from './ScopeError';
 
 /** redirect all users who aren't logged in */
-export default async function LoginBoundary({ children }: Children) {
+export default async function LoginBoundary({
+  scope,
+  children,
+}: { scope?: AuthUser['scope'] & {} } & Children) {
   const user = await getUser();
 
   if (!user) return <LoginBoundaryRedirect />;
 
+  // check scope if requested
+  scope?.push('ADMIN');
+  const isAllowed = !scope
+    ? true
+    : scope.length > scope.filter((s) => !user.scope?.includes(s)).length;
+  if (!isAllowed) return <ScopeError />;
+
   return <>{children}</>;
 }
diff --git a/client/src/app/_components/_base/LoginBoundary/ScopeError.tsx b/client/src/app/_components/_base/LoginBoundary/ScopeError.tsx
new file mode 100644
index 0000000..08a467f
--- /dev/null
+++ b/client/src/app/_components/_base/LoginBoundary/ScopeError.tsx
@@ -0,0 +1,17 @@
+import { IconUserScan } from '@tabler/icons-react';
+
+export default function ScopeError() {
+  return (
+    <>
+      <div className="relative flex flex-col items-center justify-center p-6">
+        <div className="flex flex-col items-center gap-2">
+          <div className="size-16 rounded-full p-2 text-red-600">
+            <IconUserScan className="size-full" stroke={1.5} />
+          </div>
+          <h3 className="text-lg font-black text-slate-500">Access denied</h3>
+          <p className='text-slate-800'>This page requires special permission to view.</p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/client/src/app/page.template.tsx b/client/src/app/page.template.tsx
new file mode 100644
index 0000000..c9cdd2e
--- /dev/null
+++ b/client/src/app/page.template.tsx
@@ -0,0 +1,18 @@
+export default function Page() {
+  return (
+    <>
+      <div className="flex flex-1 flex-col space-y-2">
+        <h1 className="mb-6 flex flex-col items-center justify-center text-4xl">
+          Page Title
+        </h1>
+        <div className="container flex-1 rounded-lg bg-slate-100">
+          <h2 className="p-6 text-center text-2xl">Subheading</h2>
+
+          <div className="mx-auto flex max-w-screen-lg flex-col gap-4 p-6">
+            <p className="">content</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}