mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 09:48:44 +00:00
signup source working
This commit is contained in:
Brandon Thomas committed
1 parent
25fb4b6b50
commit
b2d11a351a
7 files changed
+4
-329
No files matched your search
@@ -1,11 +0,0 @@
|
||||
BASE_API="https://api.storyteller.ai"
|
||||
GOOGLE_API="https://storage.googleapis.com"
|
||||
FUNNEL_API="https://style.storyteller.ai"
|
||||
CDN_API="https://cdn.storyteller.ai"
|
||||
GRAVATAR_API="https://www.gravatar.com"
|
||||
DEPLOY_PRIME_URL="https://studio-staging.studio.storyteller.ai"
|
||||
REACT_APP_PUBLIC_POSTHOG_KEY="phc_jBFgac0mVALAFk3negnSfYCcHgvkT00yBLQDmCDYNBb"
|
||||
REACT_APP_PUBLIC_POSTHOG_UI="https://us.i.posthog.com"
|
||||
DEPLOY_CONTEXT="DEVELOPMENT"
|
||||
CONTEXT="DEVELOPMENT"
|
||||
UPLOAD_API_VIDEO="https://upload.storyteller.ai"
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Signup | ArtCraft 3D</title>
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<!-- <link rel="stylesheet" href="/src/styles.css" /> -->
|
||||
</head>
|
||||
<body className="overflow-hidden bg-ui-background">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/signup.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,200 +0,0 @@
|
||||
import { faEnvelope, faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
|
||||
import { GlobalSettingsManager } from "./pages/PageEnigma/GlobalSettingsManager";
|
||||
import { Input } from "@storyteller/ui-input";
|
||||
import { Button } from "@storyteller/ui-button";
|
||||
import { addToast, authentication, signUp } from "~/signals";
|
||||
import { FormEvent, useRef, useState, StrictMode } from "react";
|
||||
import { AUTH_STATUS, ToastTypes } from "~/enums";
|
||||
import { useSignalEffect, useSignals } from "@preact/signals-react/runtime";
|
||||
import { useNavigate, useSearchParams, BrowserRouter } from "react-router-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
import "./styles/normalize.css";
|
||||
import "./styles/tailwind.css";
|
||||
import "./styles/base.css";
|
||||
import "@fortawesome/fontawesome-svg-core/styles.css";
|
||||
|
||||
import { config } from "@fortawesome/fontawesome-svg-core";
|
||||
|
||||
config.autoAddCss = false; /* eslint-disable import/first */
|
||||
|
||||
const regEx =
|
||||
/^(([^<>()[\].,;:\s@"]+(.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
|
||||
|
||||
// TODO(bt,2025-04-19): Make these configurable
|
||||
const ENV = {
|
||||
GOOGLE_API: "https://studio.storyteller.ai",
|
||||
FUNNEL_API: "https://studio.storyteller.ai",
|
||||
CDN_API: "https://cdn-2.fakeyou.com",
|
||||
GRAVATAR_API: "https://studio.storyteller.ai",
|
||||
DEPLOY_PRIME_URL: "https://studio.storyteller.ai",
|
||||
};
|
||||
|
||||
const SIGNUP_SOURCE = "artcraft";
|
||||
|
||||
export default function SignUpScreen() {
|
||||
useSignals();
|
||||
const navigate = useNavigate();
|
||||
const formRef = useRef<HTMLFormElement | null>(null);
|
||||
const [usernameError, setUsernameError] = useState("");
|
||||
const [emailError, setEmailError] = useState("");
|
||||
const [passwordError, setPasswordError] = useState("");
|
||||
const [passwordConfirmationError, setPasswordConfirmationError] =
|
||||
useState("");
|
||||
const [searchParams] = useSearchParams();
|
||||
const { status: authStatus } = authentication;
|
||||
|
||||
const handleOnSubmit = (ev: FormEvent<HTMLFormElement>) => {
|
||||
ev.preventDefault();
|
||||
if (formRef.current) {
|
||||
const form = new FormData(formRef.current);
|
||||
const email = form.get("email")?.toString();
|
||||
const password = form.get("password")?.toString();
|
||||
const passwordConfirmation = form
|
||||
.get("password-confirmation")
|
||||
?.toString();
|
||||
const username = form.get("username")?.toString();
|
||||
setUsernameError("");
|
||||
if (!username || username.length < 6) {
|
||||
setUsernameError("Username must be at least 6 characters long");
|
||||
}
|
||||
setEmailError("");
|
||||
if (!email || !email.match(regEx)) {
|
||||
setEmailError("Email must be a valid email address");
|
||||
}
|
||||
setPasswordError("");
|
||||
if (!password || password.length < 8) {
|
||||
setPasswordError("Password must be at least 8 characters long");
|
||||
}
|
||||
setPasswordConfirmationError("");
|
||||
if (!passwordError && passwordConfirmation !== password) {
|
||||
setPasswordConfirmationError("Passwords do not match");
|
||||
}
|
||||
|
||||
if (
|
||||
!usernameError &&
|
||||
!passwordError &&
|
||||
!emailError &&
|
||||
!passwordConfirmationError &&
|
||||
signUp
|
||||
) {
|
||||
signUp({
|
||||
username: username!,
|
||||
email: email!,
|
||||
password: password!,
|
||||
passwordConfirmation: passwordConfirmation!,
|
||||
signupSource: SIGNUP_SOURCE,
|
||||
}).then((error) => {
|
||||
console.log("Error occured", error);
|
||||
if (error) {
|
||||
addToast(ToastTypes.ERROR, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}; // end handleOnSubmit
|
||||
|
||||
useSignalEffect(() => {
|
||||
const redirectPath = searchParams.get("redirect");
|
||||
if (authStatus.value === AUTH_STATUS.LOGGED_IN) {
|
||||
navigate(redirectPath ? redirectPath : "/");
|
||||
return;
|
||||
}
|
||||
if (authStatus.value === AUTH_STATUS.NO_ACCESS) {
|
||||
window.open("https://storyteller.ai/", "_self");
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="fixed flex h-full w-full flex-col items-center justify-center overflow-auto bg-[#1b1b1f] bg-center bg-repeat">
|
||||
<div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
|
||||
<img
|
||||
src="/resources/images/artcraft-logo-3.png"
|
||||
alt="ArtCraft Logo"
|
||||
className="h-9 select-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full max-w-xl rounded-xl shadow-lg">
|
||||
<div className="glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none">
|
||||
<h1 className="mb-8 text-center text-2xl font-bold">Sign up</h1>
|
||||
<form
|
||||
ref={formRef}
|
||||
onSubmit={handleOnSubmit}
|
||||
className="flex flex-col gap-4"
|
||||
>
|
||||
<Input
|
||||
label="Username"
|
||||
icon={faUser}
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
errorMessage={usernameError}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
label="Email"
|
||||
icon={faEnvelope}
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
errorMessage={emailError}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
label="Password"
|
||||
icon={faKey}
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
autoComplete="current-password"
|
||||
errorMessage={passwordError}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
label="Password Confirmation"
|
||||
icon={faKey}
|
||||
placeholder="Password Confirmation"
|
||||
name="password-confirmation"
|
||||
errorMessage={passwordConfirmationError}
|
||||
required
|
||||
/>
|
||||
<Button className="mt-4 py-3">Sign up</Button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
|
||||
<div className="flex w-full justify-start gap-1 text-sm">
|
||||
<p className="opacity-75"></p>
|
||||
<a
|
||||
href="/"
|
||||
className="font-medium text-brand-primary-400 hover:text-brand-primary-300"
|
||||
>
|
||||
Back
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex w-full justify-end gap-1 text-sm">
|
||||
<p className="opacity-75">Already have an account?</p>
|
||||
<a
|
||||
href="/login"
|
||||
className="font-medium text-brand-primary-400 hover:text-brand-primary-300"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: Replace environment variables from `root.tsx`
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<>
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<GlobalSettingsManager env={ENV} />
|
||||
<SignUpScreen />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
</>,
|
||||
);
|
||||
@@ -1,69 +0,0 @@
|
||||
#!/bin/bash
|
||||
# NB: This file is executed by Netlify to build the website
|
||||
|
||||
# Verbose printing, exit on failure.
|
||||
set -euxo pipefail
|
||||
|
||||
# Echo env vars
|
||||
env
|
||||
|
||||
# Add the GIT SHA to the build
|
||||
# This must be done before everything else, or it will get cached with the build.
|
||||
# (This might be making the builds less performant?)
|
||||
# COMMIT_REF is defined by Netlify to be the commit SHA
|
||||
# We want a short 8 character reference.
|
||||
echo "Labelling build with short SHA..."
|
||||
SHORT_SHA=$(echo "${COMMIT_REF}" | cut -c1-8)
|
||||
|
||||
echo "Baking current git SHA to code";
|
||||
|
||||
find . -type f -exec sed -i "s/%CURRENT_STORYTELLER_GIT_VERSION%/${SHORT_SHA}/g" {} +
|
||||
|
||||
####
|
||||
# Expressions hack
|
||||
####
|
||||
|
||||
echo "Baking expressions feature flag ENV to code";
|
||||
|
||||
echo "Value of EXPRESSIONS env var is: ${EXPRESSIONS}"
|
||||
|
||||
if [ "$EXPRESSIONS" = "TRUE" ] || [ "$EXPRESSIONS" = "true" ] ; then
|
||||
expressions_value="true"
|
||||
else
|
||||
expressions_value="false"
|
||||
fi
|
||||
|
||||
echo "Value of expressions is: ${expressions_value}"
|
||||
|
||||
find . -type f -exec sed -i "s/%EXPRESSIONS_VALUE%/${expressions_value}/g" {} +
|
||||
|
||||
echo "Baking URL/API ENV configs to code";
|
||||
|
||||
# NB: We can't use slashes as the sed escape character:
|
||||
# https://stackoverflow.com/a/27787551
|
||||
d=$'\03'
|
||||
find . -type f -exec sed -i "s${d}%BUILD_BASE_API%${d}${BASE_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%BUILD_GOOGLE_API%${d}${GOOGLE_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%BUILD_FUNNEL_API%${d}${FUNNEL_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%BUILD_CDN_API%${d}${CDN_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%BUILD_UPLOAD_VIDEO%${d}${UPLOAD_VIDEO_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%BUILD_MEDIA_VIDEO%${d}${MEDIA_VIDEO_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%BUILD_GRAVATAR_VIDEO%${d}${GRAVATAR_API}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%DEPLOY_PRIME_URL%${d}${DEPLOY_PRIME_URL}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%DEPLOY_CONTEXT%${d}${DEPLOY_CONTEXT}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%CONTEXT%${d}${CONTEXT}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%UPLOAD_API_VIDEO%${d}${UPLOAD_API_VIDEO}${d}g" {} +
|
||||
|
||||
# Replace Posthog env variables in the code
|
||||
find . -type f -exec sed -i "s${d}%REACT_APP_PUBLIC_POSTHOG_KEY%${d}${REACT_APP_PUBLIC_POSTHOG_KEY}${d}g" {} +
|
||||
find . -type f -exec sed -i "s${d}%REACT_APP_PUBLIC_POSTHOG_UI%${d}${REACT_APP_PUBLIC_POSTHOG_UI}${d}g" {} +
|
||||
|
||||
# TODO: Run tests when we add them.
|
||||
|
||||
# Ensure the environment variables are exported
|
||||
export REACT_APP_PUBLIC_POSTHOG_KEY
|
||||
export REACT_APP_PUBLIC_POSTHOG_UI
|
||||
export CONTEXT
|
||||
# Run build.x
|
||||
npm run build
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -euxo pipefail
|
||||
|
||||
# Kill any process running on port 5741, which will block startup
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -euxo pipefail
|
||||
|
||||
# Add the GIT SHA to the build
|
||||
# This must be done before everything else, or it will get cached with the build.
|
||||
# (This might be making the builds less performant?)
|
||||
# COMMIT_REF is defined by Netlify to be the commit SHA
|
||||
# We want a short 8 character reference.
|
||||
echo "Labelling build with short SHA..."
|
||||
SHORT_SHA=$(echo "${COMMIT_REF}" | cut -c1-8)
|
||||
|
||||
echo "Baking current git SHA to code";
|
||||
find . -type f -exec sed -i "s/%CURRENT_STORYTELLER_GIT_VERSION%/${SHORT_SHA}/g" {} +
|
||||
|
||||
echo "Install packages"
|
||||
npm install
|
||||
|
||||
echo "Build Editor 3D"
|
||||
nx build editor3d --verbose
|
||||
|
||||
echo "Change to project dir"
|
||||
pushd apps/editor3d/
|
||||
|
||||
echo "Copy files to putput directory"
|
||||
cp _headers dist/
|
||||
#cp _redirects dist/
|
||||
#cp "404.html" dist/
|
||||
|
||||
echo "List final files in build"
|
||||
find dist/
|
||||
@@ -11,6 +11,9 @@ import {
|
||||
import { ArtCraftSignUp } from "./artcraft-signup";
|
||||
import { UsersApi } from "@storyteller/api";
|
||||
import { useLoginModalStore } from "./useLoginModalStore";
|
||||
|
||||
const SIGNUP_SOURCE_ARTCRAFT = "artcraft";
|
||||
|
||||
interface LoginModalProps {
|
||||
onClose?: () => void;
|
||||
videoSrc2D?: string;
|
||||
@@ -249,6 +252,7 @@ export function LoginModal({
|
||||
email,
|
||||
password,
|
||||
passwordConfirmation,
|
||||
signupSource: SIGNUP_SOURCE_ARTCRAFT,
|
||||
});
|
||||
console.log(signupResponse);
|
||||
|
||||
|
||||
Reference in new issue
Block a user