Added basic user roles

components/auth/role-gate.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { UserRole } from "@prisma/client";
+import { useSession } from "next-auth/react";
+import React from "react";
+
+
+interface RoleGateProps {
+  children: React.ReactNode
+  roles: UserRole[]
+}
+
+export const RoleGate = ({
+  children,
+  roles,
+}: RoleGateProps) => {
+  const session = useSession()
+  const role = session?.data?.user.role as UserRole
+
+  if (roles.includes(role)) {
+    return (
+      <div>
+        { children }
+      </div>
+    );
+  }
+  return <div />
+}
+ 
+export default RoleGate

components/navigation/adminprofile.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import axios from "axios";
+import * as React from 'react';
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { cn } from "@/lib/utils";
+
+const AdminProfile = () => {
+  const session = useSession();
+  const [user, setUser] = useState<{ id: string, username: string }>()
+
+
+  return ( 
+    <div className={"px-10 py-6 rounded-md bg-red-300 overflow-hidden wrap m-[10px]"}>
+      <p className="text-xs text-gray-400">Role:</p>
+      <p>{session?.data?.user?.role}</p>
+    </div>
+   );
+}
+ 
+export default AdminProfile;

components/navigation/settings.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import { Button } from "../ui/button";
 import UserProfile from "./userprofile";
+import AdminProfile from "./adminprofile";
+import RoleGate from "../auth/role-gate";
 
 const SettingsNavigation = async () => {
   return ( 
@@ -8,7 +10,12 @@ const SettingsNavigation = async () => {
       <div className="text-4xl flex pl-[15px] pb-[33px]">Hermes</div>
 
       <div className="w-full pl-[30px] pr-[30px] pb-[50px]">
-        <UserProfile />
+        <div className="gap-5">
+          <UserProfile />
+          <RoleGate roles={["ADMIN"]}>
+            <AdminProfile />
+          </RoleGate>
+        </div>
       </div>
 
       <div className="flex h-full z-20 inset-y-1/3 w-full">

components/navigation/userprofile.tsx

@@ -20,14 +20,13 @@ const UserProfile = () => {
       previousUsername = session.user?.name || ""
       if (session.user) {
         const fetchData = async () => {
+          if (user) return
+
           var userData = (await axios.get("/api/account")).data
           setUser(userData)
-          console.log(userData)
         }
 
         fetchData().catch(console.error)
-
-        // TODO: check session if impersonation is in use.
       }
   }, [session])