Setup admin dashboard

.env.local.template

@@ -0,0 +1,5 @@
+GOOGLE_CLIENT_ID=your-google-client-id
+GOOGLE_CLIENT_SECRET=your-google-client-secret
+
+NEXTAUTH_SECRET=your-secret-key
+NEXTAUTH_URL=http://localhost:3000

app/admin/applications/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+import Custom404 from '@/app/not-found';
+import { useSession } from 'next-auth/react';
+
+const ApplicationsPage = () => {
+  const { data: session } = useSession();
+
+  if (!session || session.user?.role != 'admin') return <Custom404 />;
+
+  return (
+    <div className="flex flex-col min-h-screen items-center pt-8">
+      <h1 className="text-4xl">Søknader</h1>
+    </div>
+  );
+};
+
+export default ApplicationsPage;

app/admin/members/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+import Custom404 from '@/app/not-found';
+import { useSession } from 'next-auth/react';
+
+const MembersPage = () => {
+  const { data: session } = useSession();
+
+  if (!session || session.user?.role != 'admin') return <Custom404 />;
+
+  return (
+    <div className="flex flex-col min-h-screen items-center pt-8">
+      <h1 className="text-4xl">Medlemmer</h1>
+    </div>
+  );
+};
+
+export default MembersPage;

app/admin/page.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useSession, signIn, signOut } from 'next-auth/react';
+import Button from '@/components/all/Button';
+import Link from 'next/link';
+import { CircleDollarSignIcon, PaperclipIcon, UserIcon } from 'lucide-react';
+
+const AdminPage = () => {
+  const { data: session } = useSession();
+
+  const handleLogin = () =>
+    signIn('google', {
+      callbackUrl: '/admin',
+    });
+
+  const handleLogout = () => signOut({ callbackUrl: '/' });
+
+  const routes = [
+    {
+      title: 'Portfølje',
+      href: '/admin/portfolio',
+      icon: CircleDollarSignIcon,
+    },
+    {
+      title: 'Medlemmer',
+      href: '/admin/members',
+      icon: UserIcon,
+    },
+    {
+      title: 'Søknader',
+      href: '/admin/applications',
+      icon: PaperclipIcon,
+    },
+  ];
+
+  if (!session) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <div className="flex flex-col items-center justify-center px-6 gap-5">
+          <h1 className="text-3xl">Vennligst logg inn</h1>
+          <Button
+            color="orange"
+            title="Logg inn"
+            onClick={() => handleLogin()}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (session?.user?.role !== 'admin') {
+    console.log(session.user);
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <div className="flex flex-col items-center justify-center px-6 gap-5">
+          <h1 className="text-3xl">Du har ikke tilgang til denne siden</h1>
+          <h1>{session.user?.name}</h1>
+          <Button
+            color="orange"
+            title="Logg ut"
+            onClick={() => handleLogout()}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (session?.user?.role === 'admin') {
+    return (
+      <div className="flex flex-col items-center py-8 min-h-screen">
+        <div className="flex flex-col items-center  px-6 gap-5">
+          <h1 className="text-3xl">{`Velkommen ${session.user.name}`}</h1>
+
+          <div className="flex flex-col sm:flex-row gap-5 pt-4 pb-12">
+            {routes.map((route, index) => (
+              <div key={index}>
+                <Link href={route.href} className="">
+                  <div className="border-2 border-white rounded-md px-8 hover:scale-110">
+                    <div className="flex flex-col items-center justify-between w-full shadow-md min-h-48 p-4">
+                      <h1 className="mb-4 text-2xl font-semibold">
+                        {route.title}
+                      </h1>
+                      <div className="flex-grow flex items-center justify-center">
+                        <route.icon size={96} />
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            ))}
+          </div>
+
+          <Button
+            color="orange"
+            title="Logg ut"
+            onClick={() => handleLogout()}
+          />
+        </div>
+      </div>
+    );
+  }
+};
+
+export default AdminPage;

app/admin/portfolio/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+import Custom404 from '@/app/not-found';
+import { useSession } from 'next-auth/react';
+
+const PortfolioPage = () => {
+  const { data: session } = useSession();
+
+  if (!session || session.user?.role != 'admin') return <Custom404 />;
+
+  return (
+    <div className="flex flex-col min-h-screen items-center pt-8">
+      <h1 className="text-4xl">Portfølje</h1>
+    </div>
+  );
+};
+
+export default PortfolioPage;

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,54 @@
+import { getUserGroups } from '@/lib/auth/getUserGroups';
+import NextAuth from 'next-auth';
+import GoogleProvider from 'next-auth/providers/google';
+
+const handler = NextAuth({
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID || '',
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
+      authorization: {
+        params: {
+          scope:
+            'openid email profile https://www.googleapis.com/auth/admin.directory.group.readonly',
+        },
+      },
+    }),
+  ],
+  pages: {
+    signIn: '/auth/signin',
+    signOut: '/auth/signout',
+  },
+  callbacks: {
+    async jwt({ token, account, user }) {
+      if (account) {
+        token.accessToken = account.access_token;
+      }
+
+      if (token.accessToken && user?.email) {
+        token.groups = await getUserGroups(
+          token.accessToken as string,
+          user.email,
+        );
+      }
+
+      return token;
+    },
+    async session({ session, token }) {
+      session.user = {
+        id: token.sub ? parseInt(token.sub, 10) : 0,
+        name: session.user?.name || '',
+        role:
+          session.user?.email == '[email protected]' ||
+          '[email protected] '
+            ? 'admin'
+            : 'user', //TODO vente på dotkom
+        email: session.user?.email || '',
+        groups: (token.groups as string[]) || [],
+      };
+      return session;
+    },
+  },
+});
+
+export { handler as GET, handler as POST };

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import './globals.css';
 import Navbar from '@/components/all/Navbar';
 import Footer from '@/components/all/Footer';
+import SessionWrapper from '@/lib/auth/sessionProvider';
 
 // TODO: add favicon, and maybe dynamic title and description based on page
 export const metadata: Metadata = {
@@ -19,11 +20,13 @@ export default function RootLayout({
       <head>
         <link rel="icon" href="public/icon-256.png" sizes="any" />
       </head>
-      <body className="antialiased">
-        <Navbar />
-        {children}
-        <Footer />
-      </body>
+      <SessionWrapper>
+        <body className="antialiased">
+          <Navbar />
+          {children}
+          <Footer />
+        </body>
+      </SessionWrapper>
     </html>
   );
 }

app/not-found.tsx

@@ -0,0 +1,25 @@
+import Button from '@/components/all/Button';
+import Image from 'next/image';
+
+export default function Custom404() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen text-center px-6 gap-12">
+      <h2 className="text-3xl sm:text-3xl lg:text-5xl font-bold text-online-darkBlue dark:text-white">
+        Fant ikke siden du lette etter
+      </h2>
+
+      <div>
+        <Image
+          src="/not-found.svg"
+          alt="Not Found Illustrasjon"
+          width={500}
+          height={500}
+        />
+      </div>
+
+      <div className="py-10">
+        <Button title="Gå tilbake til hjem siden" color="orange" href="/" />
+      </div>
+    </div>
+  );
+}

components/all/Button.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import Link from 'next/link';
+
+interface Props {
+  title: string;
+  onClick?: () => void;
+  href?: string;
+  color: 'orange';
+}
+
+const Button = ({ title, onClick, color, href }: Props) => {
+  const colorStyle =
+    color === 'orange'
+      ? 'border border-onlineyellow text-onlineyellow hover:border-orange-600 hover:text-orange-600'
+      : '';
+
+  const buttonStyle = `px-4 py-3 rounded-md  ${colorStyle}`;
+
+  if (onClick) {
+    return (
+      <button className={`${buttonStyle}`} onClick={onClick}>
+        {title}
+      </button>
+    );
+  }
+  if (href) {
+    return (
+      <Link className={`${buttonStyle}`} href={href}>
+        {title}
+      </Link>
+    );
+  }
+};
+
+export default Button;