Added impersonation for admins

components/navigation/adminprofile.tsx

@@ -5,16 +5,116 @@ import * as React from 'react';
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
 import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "../ui/button";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { User } from "@prisma/client";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "../ui/command";
+
 
 const AdminProfile = () => {
   const session = useSession();
-  const [user, setUser] = useState<{ id: string, username: string }>()
+  const [impersonation, setImpersonation] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
 
+  const [users, setUsers] = useState<User[]>([])
+
+  useEffect(() => {
+    const fetch = async (userId: string | undefined) => {
+      if (!userId) return
+
+      await axios.get<User>("/api/users?id=" + userId)
+        .then(u => {
+          setImpersonation(u.data?.name)
+        })
+    }
+
+    console.log(session)
+    fetch(session?.data?.user?.impersonation?.id)
+  }, [])
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      await axios.get<User[]>("/api/users")
+        .then((u) => {
+          setUsers(u.data.filter(x => x.id != session.data?.user.id))
+        })
+    }
+
+    fetchUsers()
+  }, [])
+
+  const onImpersonationChange = async (userId: string, name: string) => {
+    if (impersonation) {
+      if (impersonation == session.data?.user.impersonation?.name) {
+        await axios.delete("/api/account/impersonate")
+          .then(() => {
+            setImpersonation(null)
+            window.location.reload()
+          })
+      } else {
+        await axios.put("/api/account/impersonate", { targetId: userId })
+          .then(() => {
+            setImpersonation(name)
+            window.location.reload()
+          })
+      }
+    } else {
+      await axios.post("/api/account/impersonate", { targetId: userId })
+        .then(() => {
+          setImpersonation(name)
+          window.location.reload()
+        }) 
+    }
+  }
 
   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 className={"px-5 py-3 rounded-md bg-red-300 overflow-hidden wrap my-[10px] flex flex-grow flex-col gap-y-3"}>
+      <div>
+        <p className="text-xs text-gray-200">Role:</p>
+        <p>{session?.data?.user?.role}</p>
+      </div>
+      <div>
+        <p className="text-xs text-gray-200">Impersonation:</p>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              className="flex flex-grow justify-between text-xs">
+              {impersonation ? impersonation : "Select a user"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search users by name" />
+              <CommandEmpty>No voices found.</CommandEmpty>
+              <CommandGroup>
+                {users.map((user) => (
+                  <CommandItem
+                    key={user.id}
+                    value={user.name ?? undefined}
+                    onSelect={(currentValue) => {
+                      onImpersonationChange(user.id, user.name ?? "")
+                      setOpen(false)
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        user.name == impersonation ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {user.name}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
     </div>
    );
 }

components/navigation/settings.tsx

@@ -10,28 +10,26 @@ const SettingsNavigation = async () => {
       <div className="text-4xl flex pl-[15px] pb-[33px]">Hermes</div>
 
       <div className="w-full pl-[30px] pr-[30px] pb-[50px]">
-        <div className="gap-5">
-          <UserProfile />
-          <RoleGate roles={["ADMIN"]}>
-            <AdminProfile />
-          </RoleGate>
-        </div>
+        <UserProfile />
+        <RoleGate roles={["ADMIN"]}>
+          <AdminProfile />
+        </RoleGate>
       </div>
 
-      <div className="flex h-full z-20 inset-y-1/3 w-full">
-        <ul className="rounded-lg shadow-md pl-[25px] flex flex-col w-full justify-between text-center align-center">
-          <li className="text-xs text-gray-400">
+      <div className="flex flex-grow h-full w-full">
+        <ul className="rounded-lg shadow-md flex flex-col w-full justify-between text-center align-center">
+          <li className="text-xs text-gray-200">
             Settings
           </li>
-          <li className="">
-            <Link href={"/settings/connections"}>
+          <li>
+            <Link href={"/settings/connections"} className="m-0 p-0 gap-0">
               <Button variant="ghost" className="w-full text-lg">
                 Connections
               </Button>
             </Link>
           </li>
 
-          <li className="text-xs text-gray-400">
+          <li className="text-xs text-gray-200">
             Text to Speech
           </li>
           <li className="">
@@ -49,7 +47,7 @@ const SettingsNavigation = async () => {
             </Link>
           </li>
 
-          <li className="text-xs text-gray-400">
+          <li className="text-xs text-gray-200">
             API
           </li>
           <li className="">

components/navigation/userprofile.tsx

@@ -32,7 +32,7 @@ const UserProfile = () => {
 
   return ( 
     <div className={cn("px-10 py-6 rounded-md bg-blue-300 overflow-hidden wrap", user == null && "hidden")}>
-      <p className="text-xs text-gray-400">Logged in as:</p>
+      <p className="text-xs text-gray-200">Logged in as:</p>
       <p>{user?.username}</p>
     </div>
    );