Allow scoped pages (#66)

* allow scoped pages

* fix imports

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}</>;
 }

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>
+    </>
+  );
+}

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>
+    </>
+  );
+}