NORY-36: add error page for unauthorised users

dashboard/src/app/(inside)/layout.tsx

@@ -0,0 +1,37 @@
+import '../globals.css';
+import { Toaster } from '@/components/ui/sonner';
+import React from 'react';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
+import { AppSidebar } from '@/components/app-sidebar';
+import { Separator } from '@/components/ui/separator';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
+
+export default function InsideLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <SidebarProvider className="max-h-screen min-h-screen">
+            <AppSidebar className="mx-1"/>
+            <SidebarInset className="overflow-hidden p-6 space-y-6">
+                <header className="flex h-4 items-center gap-2">
+                    <SidebarTrigger className="-ml-1 p-1"/>
+                    <Separator orientation="vertical" className="mr-2 h-4"/>
+                    {
+                        // TODO: implement dynamic Breadcrumbs
+                    }
+                    <Breadcrumb>
+                        <BreadcrumbList>
+                            <BreadcrumbItem className="hidden md:block">
+                                <BreadcrumbLink href="/">
+                                    Ory Dashboard
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </header>
+                <div className="flex-1 overflow-scroll">
+                    {children}
+                </div>
+            </SidebarInset>
+            <Toaster/>
+        </SidebarProvider>
+    );
+}

dashboard/src/app/(inside)/user/data-table.tsx

@@ -6,7 +6,7 @@ import { DataTable } from '@/components/ui/data-table';
 import { CircleCheck, CircleX, Copy, MoreHorizontal, Trash, UserCheck, UserMinus, UserPen, UserX } from 'lucide-react';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import React, { useEffect, useRef, useState } from 'react';
-import { FetchIdentityPageProps } from '@/app/user/page';
+import { FetchIdentityPageProps } from '@/app/(inside)/user/page';
 import { Spinner } from '@/components/ui/spinner';
 import {
     DropdownMenu,
@@ -29,7 +29,7 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { blockIdentity, deleteIdentity, deleteIdentitySessions, unblockIdentity } from '@/app/user/action';
+import { blockIdentity, deleteIdentity, deleteIdentitySessions, unblockIdentity } from '@/app/(inside)/user/action';
 
 interface IdentityDataTableProps {
     data: Identity[];

dashboard/src/app/(inside)/user/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IdentityDataTable } from '@/app/user/data-table';
+import { IdentityDataTable } from '@/app/(inside)/user/data-table';
 import { getIdentityApi } from '@/ory/sdk/server';
 import { SearchInput } from '@/components/search-input';
 

dashboard/src/app/(outside)/unauthorised/page.tsx

@@ -0,0 +1,11 @@
+import { ErrorDisplay } from '@/components/error';
+
+export default async function UnauthorizedPage() {
+    return (
+        <div className="bg-background min-h-screen p-16">
+            <ErrorDisplay
+                title="Unauthorised"
+                message="You are unauthorised to access this application!"/>
+        </div>
+    );
+}

dashboard/src/app/layout.tsx

@@ -2,13 +2,8 @@ import type { Viewport } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { cn } from '@/lib/utils';
-import { Toaster } from '@/components/ui/sonner';
 import React from 'react';
 import { ThemeProvider } from 'next-themes';
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
-import { AppSidebar } from '@/components/app-sidebar';
-import { Separator } from '@/components/ui/separator';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -56,31 +51,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
             enableSystem
             disableTransitionOnChange
         >
-            <SidebarProvider className="max-h-screen min-h-screen">
+            {children}
-                <AppSidebar className="mx-1"/>
-                <SidebarInset className="overflow-hidden p-6 space-y-6">
-                    <header className="flex h-4 items-center gap-2">
-                        <SidebarTrigger className="-ml-1 p-1"/>
-                        <Separator orientation="vertical" className="mr-2 h-4"/>
-                        {
-                            // TODO: implement dynamic Breadcrumbs
-                        }
-                        <Breadcrumb>
-                            <BreadcrumbList>
-                                <BreadcrumbItem className="hidden md:block">
-                                    <BreadcrumbLink href="/">
-                                        Ory Dashboard
-                                    </BreadcrumbLink>
-                                </BreadcrumbItem>
-                            </BreadcrumbList>
-                        </Breadcrumb>
-                    </header>
-                    <div className="flex-1 overflow-scroll">
-                        {children}
-                    </div>
-                </SidebarInset>
-                <Toaster/>
-            </SidebarProvider>
         </ThemeProvider>
         </body>
         </html>

dashboard/src/components/error.tsx

@@ -5,9 +5,9 @@ interface ErrorDisplayProps {
 
 export async function ErrorDisplay({ title, message }: ErrorDisplayProps) {
     return (
-        <div className="space-y-4">
+        <>
             <p className="text-3xl font-bold leading-tight tracking-tight">{title}</p>
             <p className="text-lg font-light">{message}</p>
-        </div>
+        </>
     );
 }