Implementing auth

src/components/layout/AccountDropdown.tsx

@@ -1,6 +1,13 @@
+import { useEffect, useState } from "react";
 import { User, LogOut } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Props } from "./props";
+import { authList, authRemove, authCreateLink } from "@/lib/auth";
+
+interface Account {
+  uuid: string;
+  username: string;
+}
 
 function UserComponent({
   username,
@@ -36,63 +43,120 @@ export default function AccountDropdown({
   setIsAccountDropdownOpen,
   accountRef,
 }: Props) {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [active, setActive] = useState<Account | null>(null);
+
+  // Load accounts
+  useEffect(() => {
+    loadAccounts();
+  }, []);
+
+  async function loadAccounts() {
+    const accs = await authList();
+    setAccounts(accs);
+
+    if (accs.length && !active) {
+      setActive(accs[0]); // default
+    }
+  }
+
+  // Switch account
+  function switchAccount(acc: Account) {
+    setActive(acc);
+    setIsAccountDropdownOpen(false);
+  }
+
+  // Logout (remove account)
+  async function logout() {
+    if (!active) return;
+
+    await authRemove(active.uuid);
+
+    const updated = await authList();
+    setAccounts(updated);
+    setActive(updated[0] || null);
+  }
+
+  // Add account (open Microsoft login)
+  async function addAccount() {
+    const url = await authCreateLink();
+    console.log("Opening auth URL:", url);
+  }
+
+  const otherAccounts = accounts.filter((a) => a.uuid !== active?.uuid);
+
   return (
     <div ref={accountRef} className="relative group overflow-visible">
+      {/* Glow */}
       <div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition pointer-events-none duration-700" />
 
+      {/* Button */}
       <button
         className="relative z-10 flex items-center gap-3 pl-20 pr-4 py-2 rounded-lg btn-primary"
         onClick={() => setIsAccountDropdownOpen((prev: boolean) => !prev)}
       >
         <div className="absolute -top-2 left-4 group-hover:scale-110 transition-transform duration-700 w-12 overflow-hidden z-20">
-          <img
-            src="https://render.crafty.gg/3d/bust/swight"
-            className="w-full h-full object-cover"
-          />
+          {active && (
+            <img
+              src={`https://render.crafty.gg/3d/bust/${active.uuid}`}
+              className="w-full h-full object-cover"
+            />
+          )}
+          {!active && (
+            <img
+              src={`https://render.crafty.gg/3d/bust/MHF_Steve`}
+              className="w-full h-full object-cover"
+            />
+          )}
         </div>
 
         <div className="leading-tight">
           <p className="text-[10px] text-white/80 uppercase tracking-wide">
             Playing as
           </p>
-          <p className="text-sm font-bold text-white">SaturnDev</p>
+          <p className="text-sm font-bold text-white">
+            {active?.username || "No Account"}
+          </p>
         </div>
       </button>
 
+      {/* Dropdown */}
       <div
         className={cn(
-          "absolute top-full right-0 mt-2 w-48 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
+          "absolute top-full right-0 mt-2 w-56 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
           isAccountDropdownOpen
             ? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
             : "opacity-0 scale-95 -translate-y-2 pointer-events-none",
         )}
       >
         {/* Current account */}
-        <div>
+        {active && (
+          <UserComponent username={active.username} uuid={active.uuid} />
+        )}
+
+        {/* Other accounts */}
+        {otherAccounts.map((acc) => (
           <UserComponent
-            username="SaturnDev"
-            uuid="123e4567-e89b-12d3-a456-426614174000"
+            key={acc.uuid}
+            username={acc.username}
+            uuid={acc.uuid}
+            onClick={() => switchAccount(acc)}
           />
-        </div>
+        ))}
 
-        {/* Accounts (current account should be filtered) */}
-
-        <div>
-          <UserComponent
-            username="SaturnDev2"
-            uuid="123e4567-e89b-12d3-a456-426614174000"
-            onClick={() => {}}
-          />
-        </div>
-
-        {/* Account Options */}
-
-        <button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5 transition-colors">
+        {/* Actions */}
+        <button
+          onClick={addAccount}
+          className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5 transition-colors"
+        >
           <User size={14} />
           <span>Add Account</span>
         </button>
 
-        <button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-red-500/10 text-red-400 transition-colors">
+        <button
+          onClick={logout}
+          className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-red-500/10 text-red-400 transition-colors"
+        >
           <LogOut size={14} />
           <span>Logout</span>
         </button>