From 431f2efcf0f4897310dbdbca3c80a5f4e872d78c Mon Sep 17 00:00:00 2001 From: Michael Chung Date: Thu, 1 May 2025 23:30:05 -0400 Subject: [PATCH] Fix login and signup back button links --- frontend/apps/editor3d/app/src/login.tsx | 8 +- .../apps/editor3d/app/src/routes/Login.tsx | 148 --------- .../apps/editor3d/app/src/routes/Signup.tsx | 284 +++++++++--------- frontend/apps/editor3d/app/src/signup.tsx | 9 + 4 files changed, 160 insertions(+), 289 deletions(-) delete mode 100644 frontend/apps/editor3d/app/src/routes/Login.tsx diff --git a/frontend/apps/editor3d/app/src/login.tsx b/frontend/apps/editor3d/app/src/login.tsx index a9f3220d6f..f788f37af7 100644 --- a/frontend/apps/editor3d/app/src/login.tsx +++ b/frontend/apps/editor3d/app/src/login.tsx @@ -124,11 +124,17 @@ export default function LoginScreen() { )}
- Forgot your password? + */} + + Back

Don't have an account?

diff --git a/frontend/apps/editor3d/app/src/routes/Login.tsx b/frontend/apps/editor3d/app/src/routes/Login.tsx deleted file mode 100644 index a53d27aa9c..0000000000 --- a/frontend/apps/editor3d/app/src/routes/Login.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { useRef } from "react"; -import { useNavigate, useSearchParams } from "react-router-dom"; -import { useSignalEffect, useSignals } from "@preact/signals-react/runtime"; - -import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons"; - -import { AUTH_STATUS } from "~/enums"; -import { authentication, login, logout } from "~/signals"; - -import { - Button, - H1, - Input, - Link, - P, - LoadingDots, - ConfirmationModal, -} from "~/components"; - -export default function LoginScreen() { - useSignals(); - const navigate = useNavigate(); - const [searchParams] = useSearchParams(); - - const formRef = useRef(null); - const { status: authStatus } = authentication; - const authLoaderMessage = getAuthLoaderMessage(); - const shouldShowLoader = checkShouldShowLoader(); - - const showNoAccessModal = authStatus.value === AUTH_STATUS.NO_ACCESS; - - const handleOnSumbit = (ev: React.FormEvent) => { - ev.preventDefault(); - if (formRef.current) { - const form = new FormData(formRef.current); - const usernameOrEmail = form.get("usernameOrEmail")?.toString(); - const password = form.get("password")?.toString(); - if (usernameOrEmail && password && login) { - login({ - usernameOrEmail, - password, - }); - } - } - }; // end handleOnSubmit - - useSignalEffect(() => { - const redirectPath = searchParams.get("redirect"); - if (authStatus.value === AUTH_STATUS.LOGGED_IN) { - navigate(redirectPath ? redirectPath : "/"); - } - }); - - return ( -
-
-

- Login to Storyteller -

-
-
-
- - -
- - Forgot your password? - -
-

Don't have an account?

- Sign Up -
-
- - -
- - { - handleClose(); - if (window) { - window.open("https://storyteller.ai/beta-key/redeem", "_blank"); - } - }} - /> -
-
- ); -} - -const handleClose = () => { - if (authentication.status.value !== AUTH_STATUS.LOGGED_OUT) { - logout(); - } -}; - -const checkShouldShowLoader = () => { - return ( - authentication.status.value === AUTH_STATUS.LOGGING || - authentication.status.value === AUTH_STATUS.LOGGED_IN - ); -}; -const getAuthLoaderMessage = () => { - if (authentication.status.value === AUTH_STATUS.LOGGED_IN) { - return "Authenticated, Redirecting..."; - } - if (authentication.status.value === AUTH_STATUS.GET_USER_INFO) { - return "Getting User Info..."; - } - return "Getting Session..."; -}; diff --git a/frontend/apps/editor3d/app/src/routes/Signup.tsx b/frontend/apps/editor3d/app/src/routes/Signup.tsx index d91c42132f..54f743f432 100644 --- a/frontend/apps/editor3d/app/src/routes/Signup.tsx +++ b/frontend/apps/editor3d/app/src/routes/Signup.tsx @@ -1,146 +1,150 @@ -import { faEnvelope, faKey, faUser } from "@fortawesome/pro-solid-svg-icons"; -import { Button, H1, Input, Link, P } from "~/components"; -import { addToast, authentication, signUp } from "~/signals"; -import { FormEvent, useRef, useState } from "react"; -import { AUTH_STATUS, ToastTypes } from "~/enums"; -import { useSignalEffect, useSignals } from "@preact/signals-react/runtime"; -import { useNavigate, useSearchParams } from "react-router-dom"; +// import { faEnvelope, faKey, faUser } from "@fortawesome/pro-solid-svg-icons"; +// import { Button, H1, Input, Link, P } from "~/components"; +// import { addToast, authentication, signUp } from "~/signals"; +// import { FormEvent, useRef, useState } from "react"; +// import { AUTH_STATUS, ToastTypes } from "~/enums"; +// import { useSignalEffect, useSignals } from "@preact/signals-react/runtime"; +// import { useNavigate, useSearchParams } from "react-router-dom"; -const regEx = - /^(([^<>()[\].,;:\s@"]+(.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i; +// const regEx = +// /^(([^<>()[\].,;:\s@"]+(.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i; -export default function SignUpScreen() { - useSignals(); - const navigate = useNavigate(); - const formRef = useRef(null); - const [usernameError, setUsernameError] = useState(""); - const [emailError, setEmailError] = useState(""); - const [passwordError, setPasswordError] = useState(""); - const [passwordConfirmationError, setPasswordConfirmationError] = - useState(""); - const [searchParams] = useSearchParams(); - const { status: authStatus } = authentication; +// export default function SignUpScreen() { +// useSignals(); +// const navigate = useNavigate(); +// const formRef = useRef(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) => { - 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"); - } +// const handleOnSubmit = (ev: FormEvent) => { +// 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!, - }).then((error) => { - console.log("Error occured", error); - if (error) { - addToast(ToastTypes.ERROR, error); - } - }); - } - } - }; // end handleOnSubmit +// if ( +// !usernameError && +// !passwordError && +// !emailError && +// !passwordConfirmationError && +// signUp +// ) { +// signUp({ +// username: username!, +// email: email!, +// password: password!, +// passwordConfirmation: passwordConfirmation!, +// }).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; - } - }); +// 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 ( -
-
-

Sign Up to Storyteller

-
-
-
- -
- -
- -
- -
-
- -
-
-

Already have an account?

- Log in instead -
-
-
-
- ); -} +// return ( +//
+//
+//

Sign Up to Storyteller

+//
+//
+//
+// +//
+// +//
+// +//
+// +//
+//
+// +//
+//

Back to home

+// Back +//
+//
+//
+//

Already have an account?

+// Log in instead +//
+//
+//
+//
+// ); +// } diff --git a/frontend/apps/editor3d/app/src/signup.tsx b/frontend/apps/editor3d/app/src/signup.tsx index 0a8e23ca45..d5046fcb5f 100644 --- a/frontend/apps/editor3d/app/src/signup.tsx +++ b/frontend/apps/editor3d/app/src/signup.tsx @@ -160,6 +160,15 @@ export default function SignUpScreen() {
+
+

+ + Back + +

Already have an account?