NORY-7: add dashboard application with basic authentication routing

2025-07-01 04:29:18 +00:00 · 2024-11-28 23:48:45 +01:00 · 2024-11-28 23:48:45 +01:00 · f1cc58a651
commit f1cc58a651
parent 3b05405363
48 changed files with 1713 additions and 0 deletions
--- a/dashboard/src/app/globals.css
+++ b/dashboard/src/app/globals.css
@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 20 14.3% 4.1%;
+        --card: 0 0% 100%;
+        --card-foreground: 20 14.3% 4.1%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 20 14.3% 4.1%;
+        --primary: 24.6 95% 53.1%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 60 4.8% 95.9%;
+        --secondary-foreground: 24 9.8% 10%;
+        --muted: 60 4.8% 95.9%;
+        --muted-foreground: 25 5.3% 44.7%;
+        --accent: 60 4.8% 95.9%;
+        --accent-foreground: 24 9.8% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
+        --ring: 24.6 95% 53.1%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 20 14.3% 4.1%;
+        --foreground: 60 9.1% 97.8%;
+        --card: 20 14.3% 4.1%;
+        --card-foreground: 60 9.1% 97.8%;
+        --popover: 20 14.3% 4.1%;
+        --popover-foreground: 60 9.1% 97.8%;
+        --primary: 20.5 90.2% 48.2%;
+        --primary-foreground: 60 9.1% 97.8%;
+        --secondary: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
+        --muted: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 60 9.1% 97.8%;
+        --destructive: 0 72.2% 50.6%;
+        --destructive-foreground: 60 9.1% 97.8%;
+        --border: 12 6.5% 15.1%;
+        --input: 12 6.5% 15.1%;
+        --ring: 20.5 90.2% 48.2%;
+    }
+}
+
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
--- a/dashboard/src/app/layout.tsx
+++ b/dashboard/src/app/layout.tsx
@ -0,0 +1,63 @@
+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';
+
+const inter = Inter({ subsets: ['latin'] });
+
+const APP_NAME = 'Next Ory';
+const APP_DEFAULT_TITLE = 'Next Ory';
+const APP_TITLE_TEMPLATE = `%s | ${APP_DEFAULT_TITLE}`;
+const APP_DESCRIPTION = 'Get started with ORY authentication quickly and easily.';
+
+export const metadata = {
+    applicationName: APP_NAME,
+    title: {
+        default: APP_DEFAULT_TITLE,
+        template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+    appleWebApp: {
+        capable: true,
+        statusBarStyle: 'default',
+        title: APP_DEFAULT_TITLE,
+    },
+    formatDetection: {
+        telephone: false,
+    },
+};
+
+export const viewport: Viewport = {
+    themeColor: '#0B0908',
+    width: 'device-width',
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <html lang="en">
+        <head>
+            <link crossOrigin="use-credentials" rel="manifest" href="/manifest.json"/>
+            <link
+                rel="icon"
+                href="/favicon.png"
+            />
+        </head>
+        <body className={cn(inter.className)}>
+        <main>
+            <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+            >
+                {children}
+                <Toaster/>
+            </ThemeProvider>
+        </main>
+        </body>
+        </html>
+    );
+}
--- a/dashboard/src/app/page.tsx
+++ b/dashboard/src/app/page.tsx
@ -0,0 +1,53 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { kratos, LogoutLink } from '@/ory';
+import { useRouter } from 'next/navigation';
+import { ThemeToggle } from '@/components/themeToggle';
+import { Session } from '@ory/client';
+import { LogOut } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export default function Page() {
+
+    const router = useRouter();
+
+    const [session, setSession] = useState<Session>();
+    const loadSession = useCallback(async () => {
+        console.log(kratos.toSession());
+        return kratos.toSession();
+    }, [router]);
+
+    useEffect(() => {
+
+        if (session) {
+            return;
+        }
+
+        loadSession()
+            .then((response) => {
+                console.log(response.data);
+                response.data && setSession(response.data);
+            })
+            .catch(() => {
+                const authentication_url = process.env.NEXT_PUBLIC_AUTHENTICATION_NODE_URL;
+                const dashboard_url = process.env.NEXT_PUBLIC_AUTHENTICATION_NODE_URL;
+                authentication_url && dashboard_url &&
+                router.push(authentication_url + '/flow/login?return_to=' + dashboard_url);
+            });
+
+    }, [router, session]);
+
+    const onLogout = LogoutLink();
+
+    return (
+        <div className="flex flex-col min-h-screen items-center text-3xl relative space-y-4">
+            <div className="absolute flex flex-row w-fit items-center space-x-4 top-4 right-4">
+                <ThemeToggle/>
+                <Button variant="outline" size="icon" onClick={onLogout}>
+                    <LogOut className="h-[1.2rem] w-[1.2rem]"/>
+                </Button>
+            </div>
+        </div>
+    );
+}
--- a/dashboard/src/app/service-worker.ts
+++ b/dashboard/src/app/service-worker.ts
@ -0,0 +1,18 @@
+import type { PrecacheEntry } from '@serwist/precaching';
+import { installSerwist } from '@serwist/sw';
+import { defaultCache } from '@serwist/next/worker';
+
+declare const self: ServiceWorkerGlobalScope & {
+    // Change this attribute's name to your `injectionPoint`.
+    // `injectionPoint` is an InjectManifest option.
+    // See https://serwist.pages.dev/docs/build/inject-manifest/configuring
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+};
+
+installSerwist({
+    precacheEntries: self.__SW_MANIFEST,
+    skipWaiting: true,
+    clientsClaim: true,
+    navigationPreload: true,
+    runtimeCaching: defaultCache,
+});