+
{/* Custom visual button - shown behind */}
-
+ — toggling between the two no longer
+ * reloads the showcase video from the start. Each page renders its own header
+ * (AuthHeader) and footer (AuthFooter) into the outlet.
+ */
+export const AuthLayout = () => {
+ // Only mount the showcase on wide screens (matches the `lg` breakpoint) so
+ // mobile never downloads the demo videos.
+ const showShowcase = useMediaQuery("(min-width: 1024px)");
+ const navigate = useNavigate();
+
+ const handleBack = () => {
+ navigate("/");
+ };
+
+ return (
+ (null);
const requestOpen = (section: EditingSection) => setEditing(section);
@@ -44,6 +45,7 @@ export function AccountSection({ user }: AccountSectionProps) {
requestOpen("password")}
onClose={close}
@@ -130,7 +132,9 @@ function UsernameForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
await refreshSession(true);
onClose();
} else {
- setError(humanizeError(response.errorMessage, "Could not update username."));
+ setError(
+ humanizeError(response.errorMessage, "Could not update username."),
+ );
}
};
@@ -280,15 +284,22 @@ function EmailForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
);
}
-function PasswordForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
+function PasswordForm({
+ user,
+ passwordNotSet,
+ isEditing,
+ onOpen,
+ onClose,
+}: SectionFormProps & { passwordNotSet: boolean }) {
const [oldPassword, setOldPassword] = useState("");
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState("");
const [error, setError] = useState(null);
const [submitting, setSubmitting] = useState(false);
- const canSubmit =
- oldPassword.length > 0 && password.length > 0 && confirm.length > 0;
+ const canSubmit = passwordNotSet
+ ? password.length > 0 && confirm.length > 0
+ : oldPassword.length > 0 && password.length > 0 && confirm.length > 0;
const reset = () => {
setOldPassword("");
@@ -311,32 +322,32 @@ function PasswordForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
e.preventDefault();
setError(null);
- if (oldPassword.length === 0) {
- setError("Enter your current password.");
- return;
- }
const reason = validatePassword(password, confirm);
if (reason) {
setError(reason);
return;
}
- if (oldPassword === password) {
- setError("New password must be different from the current password.");
- return;
- }
setSubmitting(true);
const usersApi = new UsersApi();
- const verify = await usersApi.Login({
- usernameOrEmail: user.username,
- password: oldPassword,
- });
-
- if (!verify.success) {
- setSubmitting(false);
- setError("Current password is incorrect.");
- return;
+ // When the account already has a password, confirm the current one before
+ // changing it. A new SSO account with no password set skips this step.
+ if (!passwordNotSet) {
+ if (oldPassword === password) {
+ setSubmitting(false);
+ setError("New password must be different from the current password.");
+ return;
+ }
+ const verify = await usersApi.Login({
+ usernameOrEmail: user.username,
+ password: oldPassword,
+ });
+ if (!verify.success) {
+ setSubmitting(false);
+ setError("Current password is incorrect.");
+ return;
+ }
}
const response = await usersApi.ChangePassword({
@@ -346,46 +357,59 @@ function PasswordForm({ user, isEditing, onOpen, onClose }: SectionFormProps) {
setSubmitting(false);
if (response.success) {
- toast.success("Password updated.");
+ toast.success(passwordNotSet ? "Password set." : "Password updated.");
+ await refreshSession(true);
handleClose();
} else {
- setError(humanizeError(response.errorMessage, "Could not update password."));
+ setError(
+ humanizeError(response.errorMessage, "Could not update password."),
+ );
}
};
return (
{isLoading ? (
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
new file mode 100644
index 0000000000..65de77fda7
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-layout.tsx
@@ -0,0 +1,109 @@
+import { ReactNode } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { TruchetPattern } from "@storyteller/ui-vfx";
+import { AuthShowcase } from "./auth-showcase";
+import { useMediaQuery } from "../ui/use-media-query";
+
+/**
+ * Persistent shell for the auth pages. Rendered as a layout route so the
+ * showcase pane (and its video) stays mounted while the form pane swaps
+ * between login and signup via
+
+ );
+};
+
+interface AuthHeaderProps {
+ title: string;
+ subtitle: string;
+}
+
+export const AuthHeader = ({ title, subtitle }: AuthHeaderProps) => (
+
+
+
+
+
+
+ {/* Form pane — only the inner content swaps per route (via Outlet), so
+ this pane and the showcase beside it stay mounted across the
+ login/signup toggle. */}
+
+
+
+
+
+
+ {/* Showcase pane (desktop only) */}
+ {showShowcase && (
+
+
+
+
+
+
+ © {new Date().getFullYear()} ArtCraft. All rights reserved.
+
+
+
+ )}
+
+ 
+
+);
+
+export const AuthFooter = ({ children }: { children: ReactNode }) => (
+
+ {title}
+{subtitle}
+{children}
+);
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
new file mode 100644
index 0000000000..9335fe28ed
--- /dev/null
+++ b/frontend/apps/artcraft-webapp/src/components/auth/auth-showcase.tsx
@@ -0,0 +1,45 @@
+const FEATURED_VIDEO_URL =
+ "https://player.vimeo.com/video/1169289718?background=1&autoplay=1&loop=1&muted=1";
+
+export const AuthShowcase = () => {
+ return (
+
+ {/* Vimeo background embed (no controls) scaled to cover the pane. The
+ iframe is forced to 16:9 and sized to the larger cover dimension via
+ container-query units, then centered so the overflow crops evenly. */}
+
+
+ {/* Legibility gradient behind the caption */}
+
+
+ {/* Caption */}
+
+ );
+};
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/index.ts b/frontend/apps/artcraft-webapp/src/components/auth/index.ts
index 1b970188c8..fbe2826eb6 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/index.ts
+++ b/frontend/apps/artcraft-webapp/src/components/auth/index.ts
@@ -1,2 +1,4 @@
export * from "./signup-form";
export * from "./GoogleLoginButton";
+export * from "./auth-layout";
+export * from "./auth-showcase";
diff --git a/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx b/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
index f529ae7aed..830f844ea8 100644
--- a/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/auth/signup-form.tsx
@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button } from "@storyteller/ui-button";
import { Input } from "@storyteller/ui-input";
import { useState } from "react";
+import { useNavigate } from "react-router-dom";
import { UsersApi } from "@storyteller/api";
import {
getLandingUrl,
@@ -14,6 +15,8 @@ import {
getReferralUsername,
getReferrer,
} from "@storyteller/common";
+import { refreshSession, useSessionStore } from "../../lib/session";
+import { GoogleLoginButton } from "./GoogleLoginButton";
interface SignupFormProps {
onSuccess: (isNewUser?: boolean) => void;
@@ -28,6 +31,7 @@ export const SignupForm = ({
className = "",
autoFocus = false,
}: SignupFormProps) => {
+ const navigate = useNavigate();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
@@ -81,36 +85,24 @@ export const SignupForm = ({
}
};
- //const handleGoogleSuccess = (isNewUser: boolean) => {
- // onSuccess(isNewUser);
- //};
+ const handleGoogleSuccess = async () => {
+ // Refresh so the session reflects the new cookie (and whether the account
+ // still needs a password), then route accordingly. New SSO users with no
+ // password go set one; everyone else goes home.
+ await refreshSession(true);
+ if (useSessionStore.getState().passwordNotSet) {
+ navigate("/set-password");
+ } else {
+ navigate("/");
+ }
+ };
- //const handleGoogleError = (errorMessage: string) => {
- // setError(errorMessage);
- //};
+ const handleGoogleError = (message: string) => {
+ setError(message);
+ };
return (
+
+ + One of the cheapest +
++ Seedance 2.0 Video Generation +
++ Generate jaw-dropping AI videos with Seedance 2.0. +
+
- {/* {showGoogleButton && (
- <>
-
-
-
- )}
- */}
-
-
-
-
- or
-
-
-
+
);
};
diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
index f954fcec37..c3196bda08 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/AccountSection.tsx
@@ -18,9 +18,10 @@ type EditingSection = "username" | "email" | "password" | null;
interface AccountSectionProps {
user: UserInfo;
+ passwordNotSet: boolean;
}
-export function AccountSection({ user }: AccountSectionProps) {
+export function AccountSection({ user, passwordNotSet }: AccountSectionProps) {
const [editing, setEditing] = useState
+
+
setPassword(e.target.value)}
placeholder="Min. 8 characters"
- inputClassName="w-full bg-black/20 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
+ inputClassName="w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors pr-12"
/>
) : (
- "Create Account"
+ "Create account"
)}
+
+
+
+
+
+
+
+
+ or
+
+