multi-account management

frontend/libs/api/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./lib/enums/index.js";
+export * from "./lib/models/Users.js";
 export * from "./lib/AnalyticsApi.js";
 export * from "./lib/BillingApi.js";
 export * from "./lib/EngineApi.js";

frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/AccountSettingsPane.tsx

@@ -3,6 +3,7 @@ import { Button } from "@storyteller/ui-button";
 import { Input } from "@storyteller/ui-input";
 import { SoraAccountButton } from "./SoraAccountButton";
 import { SoraAccountBlock } from "./SoraAccountBlock";
+import { ArtcraftAccountBlock } from "./ArtcraftAccountBlock";
 
 interface AccountInfo {
   username: string;
@@ -48,8 +49,11 @@ export const AccountSettingsPane = () => {
         </div>
         */}
 
+        <ArtcraftAccountBlock />
+        
         <SoraAccountBlock />
 
+
         {/*
         <hr />
 

frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/ArtcraftAccountBlock.tsx

@@ -0,0 +1,77 @@
+import { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
+import { Button } from "@storyteller/ui-button";
+
+import { UsersApi } from "@storyteller/api";
+import { UserInfo } from "@storyteller/api";
+
+const usersApi = new UsersApi();
+
+export const ArtcraftAccountBlock = () => {
+  const [artcraftSession, setArtcraftSession] = useState<UserInfo| undefined>(undefined);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [isCheckingArtcraftSession, setIsCheckingArtcraftSession] = useState(false);
+
+  useEffect(() => {
+    const fetchSession = async () => {
+      setIsCheckingArtcraftSession(true);
+      try {
+        const result = await usersApi.GetSession();
+        console.log(">>> result", result);
+        setArtcraftSession(result?.data?.user);
+        setIsLoggedIn(result?.data?.loggedIn || false);
+      } catch (e) {
+        console.error("Error fetching Artcraft session", e);
+        setArtcraftSession(undefined);
+        setIsLoggedIn(false);
+      } finally {
+        setIsCheckingArtcraftSession(false);
+      }
+    };
+    fetchSession();
+  }, []);
+
+  const handleArtcraftButton = async () => {
+    if (isCheckingArtcraftSession) return;
+    if (isLoggedIn) {
+      setIsCheckingArtcraftSession(true);
+      await usersApi.Logout();
+      setArtcraftSession(undefined);
+      setIsLoggedIn(false);
+      setIsCheckingArtcraftSession(false);
+    } else {
+      console.log("TODO");
+    }
+  };
+
+  return (
+    <div className="flex justify-between items-center">
+      <span>ArtCraft Account:</span>
+      <pre>{artcraftSession?.display_name}</pre>
+      <Button
+        variant={
+          isLoggedIn && !isCheckingArtcraftSession
+            ? "destructive"
+            : !isLoggedIn
+            ? "primary"
+            : "secondary"
+        }
+        className="h-[30px]"
+        onClick={handleArtcraftButton}
+        disabled={isCheckingArtcraftSession}
+      >
+        {isCheckingArtcraftSession ? (
+          <FontAwesomeIcon
+            icon={faSpinnerThird}
+            className="animate-spin text-sm"
+          />
+        ) : isLoggedIn ? (
+          "Log Out"
+        ) : (
+          "Log In"
+        )}
+      </Button>
+    </div>
+  )
+}