diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/AuthButtons.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/AuthButtons.tsx index 116af809ee..5355a90d1b 100644 --- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/AuthButtons.tsx +++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/AuthButtons.tsx @@ -3,18 +3,9 @@ import { AUTH_STATUS } from "~/enums"; import { authentication } from "~/signals"; import { Button } from "@storyteller/ui-button"; import ProfileDropdown from "./ProfileDropdown"; -import { LoginModal } from "@storyteller/ui-login-modal"; -import { useState } from "react"; -import { - disableHotkeyInput, - DomLevels, - enableHotkeyInput, -} from "~/pages/PageEnigma/signals"; -export const AuthButtons = () => { +export const AuthButtons = ({ loginSignUpPressed }: { loginSignUpPressed: () => void }) => { useSignals(); - const [showLoginModal, setShowLoginModal] = useState(false); - const [isSignUp, setIsSignUp] = useState(false); const { status, userInfo } = authentication; @@ -31,35 +22,13 @@ export const AuthButtons = () => { - - {showLoginModal && ( - setShowLoginModal(false)} - isSignUp={isSignUp} - videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4" - videoSrc3D="/resources/videos/artcraft-3d-demo.mp4" - onArtCraftAuthSuccess={(userInfo_value) => { - userInfo.value = userInfo_value; - status.value = AUTH_STATUS.LOGGED_IN; - setShowLoginModal(false); - }} - onOpenChange={(isOpen: boolean) => { - if (isOpen) { - disableHotkeyInput(DomLevels.DIALOGUE); - } else { - enableHotkeyInput(DomLevels.DIALOGUE); - } - }} - /> - )} ); } -}; +}; \ No newline at end of file diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx index f5c39d3bd9..3b7948e93f 100644 --- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx +++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx @@ -36,6 +36,7 @@ import { } from "~/pages/PageEnigma/Editor/editor"; interface Props { pageName: string; + loginSignUpPressed: () => void; } const appMenuTabs: MenuIconItem[] = [ @@ -70,7 +71,7 @@ const appMenuTabs: MenuIconItem[] = [ export const topNavMediaId = signal(""); export const topNavMediaUrl = signal(""); -export const TopBar = ({ pageName }: Props) => { +export const TopBar = ({ pageName,loginSignUpPressed }: Props) => { useSignals(); const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); @@ -160,7 +161,7 @@ export const TopBar = ({ pageName }: Props) => {
- +
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx index 46fec9ce4f..c917fb4f40 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { useSignals } from "@preact/signals-react/runtime"; import { TopBar } from "~/components"; import { Controls3D } from "./comps/Controls3D"; @@ -10,6 +10,7 @@ import { authentication, pageHeight, pageWidth } from "~/signals"; import { PoseModeSelector } from "./comps/PoseModeSelector"; import ImageToVideo from "../PageVideo/ImageToVideo"; import TextToImage from "../PageImage/TextToImage"; + import { timelineHeight, sidePanelWidth, @@ -78,7 +79,15 @@ import { useTabStore } from "../Stores/TabState"; export const PageEditor = () => { useSignals(); + const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); + const { status } = authentication; + useEffect(() => { + if (status.value !== AUTH_STATUS.LOGGED_OUT) { + setIsLoginModalOpen(true); + } + }, [status.value]); + const tabStore = useTabStore(); const handleOverlayClick = (event: React.MouseEvent) => { event.stopPropagation(); @@ -406,9 +415,33 @@ export const PageEditor = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [tabStore.activeTabId, editorEngine]); + + + return (
- + { + console.log("PRESSED") + setIsLoginModalOpen(true) + }} pageName="Edit Scene" /> + {isLoginModalOpen && ( + setIsLoginModalOpen(false)} + videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4" + videoSrc3D="/resources/videos/artcraft-3d-demo.mp4" + onOpenChange={(isOpen: boolean) => { + if (isOpen) { + disableHotkeyInput(DomLevels.DIALOGUE); + } else { + enableHotkeyInput(DomLevels.DIALOGUE); + } + }} + onArtCraftAuthSuccess={(userInfo: any) => { + authentication.status.value = AUTH_STATUS.LOGGED_IN; + authentication.userInfo.value = userInfo; + }} + /> + )} {tabStore.activeTabId == "3D" && (
@@ -542,23 +575,7 @@ export const PageEditor = () => {
)} - {}} - videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4" - videoSrc3D="/resources/videos/artcraft-3d-demo.mp4" - openAiLogo="/resources/images/openai-logo.png" - onOpenChange={(isOpen: boolean) => { - if (isOpen) { - disableHotkeyInput(DomLevels.DIALOGUE); - } else { - enableHotkeyInput(DomLevels.DIALOGUE); - } - }} - onArtCraftAuthSuccess={(userInfo: any) => { - authentication.status.value = AUTH_STATUS.LOGGED_IN; - authentication.userInfo.value = userInfo; - }} - /> +
); }; diff --git a/frontend/libs/api/src/lib/UsersApi.ts b/frontend/libs/api/src/lib/UsersApi.ts index 9a16ef906e..f1ce54f37d 100644 --- a/frontend/libs/api/src/lib/UsersApi.ts +++ b/frontend/libs/api/src/lib/UsersApi.ts @@ -98,6 +98,7 @@ export class UsersApi extends ApiManager { }; try { + console.log("calling auth fetch") const response = await this.authFetch< { username_or_email: string; password: string }, { @@ -110,7 +111,8 @@ export class UsersApi extends ApiManager { method: "POST", body: body, }); - + console.log(response) + console.log("Auth fetch response!!! above") return { success: response.success, data: response.success diff --git a/frontend/libs/components/login-modal/src/lib/login-modal.tsx b/frontend/libs/components/login-modal/src/lib/login-modal.tsx index 13976503c7..be6f396836 100644 --- a/frontend/libs/components/login-modal/src/lib/login-modal.tsx +++ b/frontend/libs/components/login-modal/src/lib/login-modal.tsx @@ -1,26 +1,21 @@ import { Button } from "@storyteller/ui-button"; import { Transition, TransitionChild } from "@headlessui/react"; -import { createPortal } from "react-dom"; import { useState, useEffect, useRef } from "react"; import { faArrowRight, - faRightToBracket, } from "@fortawesome/pro-solid-svg-icons"; import { faDiscord } from "@fortawesome/free-brands-svg-icons"; -import { IsDesktopApp } from "@storyteller/tauri-utils"; import { CheckSoraSession, SoraSessionState, useSoraLoginListener, } from "@storyteller/tauri-api"; -import { invoke } from "@tauri-apps/api/core"; import { ArtCraftSignUp } from "./artcraft-signup"; import { UsersApi } from "@storyteller/api"; interface LoginModalProps { onClose: () => void; videoSrc2D?: string; videoSrc3D?: string; - openAiLogo?: string; onOpenChange?: (isOpen: boolean) => void; onArtCraftAuthSuccess?: (userInfo: any) => void; isSignUp?: boolean; @@ -30,14 +25,13 @@ export function LoginModal({ onClose, videoSrc2D, videoSrc3D, - openAiLogo, onOpenChange, onArtCraftAuthSuccess, isSignUp: initialIsSignUp = true, }: LoginModalProps) { const [step, setStep] = useState(1); const [isLoading, setIsLoading] = useState(false); - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen] = useState(true); const [isLoggedInArtCraft, setIsLoggedInArtCraft] = useState(false); const [isSignUp, setIsSignUp] = useState(initialIsSignUp); const [errorMessage, setErrorMessage] = useState(""); @@ -257,15 +251,19 @@ export function LoginModal({ setIsLoading(false); return; } + console.log("Path 1") loginResponse = await usersApi.Login({ usernameOrEmail: username || email, password, }); + console.log(loginResponse) } else { + console.log("Path 2") loginResponse = await usersApi.Login({ usernameOrEmail: username || email, password, }); + console.log(loginResponse) } if (!loginResponse.success) { @@ -336,8 +334,7 @@ export function LoginModal({ ); }; - return createPortal( - + return
-
, - document.body - ); +
} export default LoginModal;