daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-08 02:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

log in and sign up page

Browse Source
This commit is contained in:
BFlat committed 2024-02-07 03:07:22 +07:00
1 parent c6830cf9e3
commit 9802a68c69
5 files changed
+132 -131
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou.com/src/components/common/Container/Container.tsx
+1 -2
View File
@@ -29,8 +29,7 @@ export default function PageContainer({
}
// Merge the classNames
const mergedClassNames =
`${containerClass} ${className} min-height-100vh`.trim();
const mergedClassNames = `${containerClass} ${className}`.trim();
return <div className={mergedClassNames}>{children}</div>;
}
packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
+1 -10
View File
@@ -206,16 +206,7 @@ function FooterNav(props: Props) {
</div>
<div className="d-flex flex-column flex-lg-row pt-2 align-items-center gap-2 gap-xl-4 flex-wrap">
{domain.title === "FakeYou" ? (
<span className="flex-grow-1">
© 2023 {domain.title} by{" "}
<a href={domain.link} target="_blank" rel="noreferrer">
Storyteller.ai
</a>
</span>
) : (
<span className="flex-grow-1">© 2023 {domain.title}</span>
)}
<span className="flex-grow-1 opacity-75">© {domain.title} 2023</span>
<div className="d-flex flex-column flex-lg-row align-items-center mt-4 mt-lg-0">
{moderationLink}
packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+107 -102
View File
@@ -1,26 +1,21 @@
import React, { useMemo, useState } from "react";
import React from "react";
import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
import { Link } from "react-router-dom";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
import { useLocalize, useModal } from "hooks";
import { useLocalize } from "hooks";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faStar,
faArrowRight,
faUser,
} from "@fortawesome/free-solid-svg-icons";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { WebUrl } from "../../../../common/WebUrl";
import {
faCompass,
faFileArrowUp,
faFlask,
faSearch,
faSparkles,
} from "@fortawesome/pro-solid-svg-icons";
import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
import Alert from "components/common/Alert/Alert";
import { Button, Container, Panel } from "components/common";
// import Alert from "components/common/Alert/Alert";
import { Button, Container, Modal, Panel } from "components/common";
interface Props {
sessionWrapper: SessionWrapper;
@@ -32,66 +27,65 @@ function LandingPage(props: Props) {
PosthogClient.recordPageview();
const { t } = useLocalize("LandingPage");
const isLoggedIn = props.sessionWrapper.isLoggedIn();
const isSubscribed = props.sessionSubscriptionsWrapper.hasPaidFeatures();
// const isSubscribed = props.sessionSubscriptionsWrapper.hasPaidFeatures();
// const [isFocused, setIsFocused] = useState(false);
const { open, close } = useModal();
let signUpButton = <></>;
let viewPricingButton = <></>;
let upgradeButton = <></>;
let myProfileButton = <></>;
// let signUpButton = <></>;
// let viewPricingButton = <></>;
// let upgradeButton = <></>;
// let myProfileButton = <></>;
let uploadModelSection = <></>;
if (!isLoggedIn) {
signUpButton = (
<>
<Link
to="/signup"
// onClick={() => {
// Analytics.ttsClickHeroSignup();
// }}
>
<button type="button" className="btn btn-primary w-100">
{t("heroButtonSignUp")}
<FontAwesomeIcon icon={faArrowRight} className="ms-2" />
</button>
</Link>
</>
);
viewPricingButton = (
<>
<Link
to={WebUrl.pricingPageWithReferer("tts_hero_new")}
// onClick={() => {
// Analytics.ttsClickHeroViewPricing();
// }}
>
<button type="button" className="btn btn-secondary w-100">
<FontAwesomeIcon icon={faStar} className="me-2" />
{t("heroButtonPricing")}
</button>
</Link>
</>
);
}
// if (!isLoggedIn) {
// signUpButton = (
// <>
// <Link
// to="/signup"
// // onClick={() => {
// // Analytics.ttsClickHeroSignup();
// // }}
// >
// <button type="button" className="btn btn-primary w-100">
// {t("heroButtonSignUp")}
// <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
// </button>
// </Link>
// </>
// );
// viewPricingButton = (
// <>
// <Link
// to={WebUrl.pricingPageWithReferer("tts_hero_new")}
// // onClick={() => {
// // Analytics.ttsClickHeroViewPricing();
// // }}
// >
// <button type="button" className="btn btn-secondary w-100">
// <FontAwesomeIcon icon={faStar} className="me-2" />
// {t("heroButtonPricing")}
// </button>
// </Link>
// </>
// );
// }
if (isLoggedIn) {
let displayName = props.sessionWrapper.getDisplayName() as string; // NB: If logged in, should be string
let url = WebUrl.userProfilePage(displayName);
myProfileButton = (
<>
<Link
to={url}
// onClick={() => {
// Analytics.ttsClickHeroViewProfile();
// }}
>
<button type="button" className="btn btn-secondary w-100">
<FontAwesomeIcon icon={faUser} className="me-2" />
{t("heroButtonProfile")}
</button>
</Link>
</>
);
// let displayName = props.sessionWrapper.getDisplayName() as string; // NB: If logged in, should be string
// let url = WebUrl.userProfilePage(displayName);
// myProfileButton = (
// <>
// <Link
// to={url}
// // onClick={() => {
// // Analytics.ttsClickHeroViewProfile();
// // }}
// >
// <button type="button" className="btn btn-secondary w-100">
// <FontAwesomeIcon icon={faUser} className="me-2" />
// {t("heroButtonProfile")}
// </button>
// </Link>
// </>
// );
uploadModelSection = (
<>
@@ -121,41 +115,41 @@ function LandingPage(props: Props) {
</>
);
if (!isSubscribed) {
upgradeButton = (
<>
<Link
to={WebUrl.pricingPageWithReferer("tts_hero_user")}
// onClick={() => {
// Analytics.ttsClickHeroUpgradePlan();
// }}
>
<button type="button" className="btn btn-primary w-100">
<FontAwesomeIcon icon={faStar} className="me-2" />
{t("heroButtonUpgradePlan")}
</button>
</Link>
</>
);
}
// if (!isSubscribed) {
// upgradeButton = (
// <>
// <Link
// to={WebUrl.pricingPageWithReferer("tts_hero_user")}
// // onClick={() => {
// // Analytics.ttsClickHeroUpgradePlan();
// // }}
// >
// <button type="button" className="btn btn-primary w-100">
// <FontAwesomeIcon icon={faStar} className="me-2" />
// {t("heroButtonUpgradePlan")}
// </button>
// </Link>
// </>
// );
// }
}
const randomHeroImage = useMemo(() => {
const images = [
// Main Images:
"mascot/kitsune_pose2.webp",
// "mascot/may4th.webp",
// "mascot/halloween_1.webp",
// "mascot/halloween_2.webp",
// "mascot/halloween_3.webp",
// "mascot/xmas_1.webp",
// "mascot/xmas_2.webp",
// "mascot/xmas_3.webp",
// "mascot/xmas_4.webp",
];
// const randomHeroImage = useMemo(() => {
// const images = [
// // Main Images:
// "mascot/kitsune_pose2.webp",
// // "mascot/may4th.webp",
// // "mascot/halloween_1.webp",
// // "mascot/halloween_2.webp",
// // "mascot/halloween_3.webp",
// // "mascot/xmas_1.webp",
// // "mascot/xmas_2.webp",
// // "mascot/xmas_3.webp",
// // "mascot/xmas_4.webp",
// ];
return images[Math.floor(Math.random() * images.length)];
}, []);
// return images[Math.floor(Math.random() * images.length)];
// }, []);
// const onFocusHandler = () => {
// setIsFocused(true);
@@ -386,19 +380,22 @@ function LandingPage(props: Props) {
icon={faArrowRight}
iconFlip={true}
label="Sign Up"
to="/tts"
to="/signup"
/>
<Button
icon={faSearch}
label="Search for a weight model..."
icon={faCompass}
label="Explore"
variant="secondary"
className="opacity-75 ps-3 pe-5 d-none d-lg-flex"
to="/explore"
/>
</div>
</div>
</div>
</Panel>
<div className="section"> </div>
<div className="section"> </div>
<div className="d-flex flex-column section align-items-center rounded-0 mb-5">
<div className="d-flex flex-column align-items-center text-center cta-container">
<div className="d-flex d-lg-none align-items-center mb-4 cta-mobile">
@@ -489,6 +486,14 @@ function LandingPage(props: Props) {
</div>
</Container>
)}
<Modal
title="Login to FakeYou"
show={false}
handleClose={function (): void {
throw new Error("Function not implemented.");
}}
/>
</>
);
}
packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx
+16 -10
View File
@@ -14,7 +14,7 @@ import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocument
import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
import Container from "components/common/Container";
import Panel from "components/common/Panel";
import PageHeader from "components/layout/PageHeader";
import { useDomainConfig } from "context/DomainConfigContext";
interface Props {
sessionWrapper: SessionWrapper;
@@ -25,7 +25,7 @@ interface Props {
function LoginPage(props: Props) {
let history = useHistory();
PosthogClient.recordPageview();
const domain = useDomainConfig();
const [password, setPassword] = useState("");
const [usernameOrEmail, setUsernameOrEmail] = useState("");
const [errorMessage, setErrorMessage] = useState("");
@@ -90,12 +90,12 @@ function LoginPage(props: Props) {
}
return (
<Container type="panel" className="login-panel">
<PageHeader
title="Login"
subText="Log into your account."
panel={false}
/>
<Container
type="panel"
className="login-panel d-flex flex-column align-items-center"
>
<h2 className="fw-bold mb-0 mt-5 mb-4">Login to {domain.title}</h2>
<Panel padding={true}>
{errorWarning}
@@ -132,10 +132,16 @@ function LoginPage(props: Props) {
onChange={handlePasswordChange}
/>
</div>
<p className="d-flex flex-column flex-lg-row gap-2">
<Link to="/password-reset" className="text-link form-text">
<p className="d-flex flex-lg-row gap-2">
<Link
to="/password-reset"
className="text-link form-text flex-grow-1"
>
Forgot your password?
</Link>
<span className="form-text text-link">
Don't have an account? <Link to="/signup">Sign up</Link>
</span>
</p>
</div>
</div>
packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx
+7 -7
View File
@@ -18,8 +18,8 @@ import { BeginStripeCheckoutFlow } from "../../../../common/BeginStripeCheckoutF
import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
import Container from "components/common/Container";
import PageHeader from "components/layout/PageHeader";
import Panel from "components/common/Panel";
import { useDomainConfig } from "context/DomainConfigContext";
enum FieldTriState {
EMPTY_FALSE,
@@ -34,6 +34,7 @@ interface Props {
function SignupPage(props: Props) {
let history = useHistory();
const domain = useDomainConfig();
const parsedQueryString = queryString.parse(window.location.search);
@@ -349,12 +350,11 @@ function SignupPage(props: Props) {
}
return (
<Container type="panel" className="login-panel">
<PageHeader
title="Sign Up"
subText="Create a new account."
panel={false}
/>
<Container
type="panel"
className="login-panel d-flex flex-column align-items-center"
>
<h2 className="fw-bold mb-0 mt-5 mb-4">Sign Up for {domain.title}</h2>
<Panel padding={true}>
<form onSubmit={handleFormSubmit}>