From 642c9e611b38d2cf53e30dcec06c8002a7f8cc6f Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 10 Jan 2025 12:53:55 +0530 Subject: [PATCH] Conv --- web/apps/auth/src/pages/signup.tsx | 5 +- web/apps/photos/src/pages/signup.tsx | 5 +- web/packages/accounts/components/Login.tsx | 14 +- web/packages/accounts/components/SignUp.tsx | 447 +++++++++++--------- web/packages/accounts/pages/login.tsx | 6 +- web/packages/accounts/pages/signup.tsx | 30 +- 6 files changed, 261 insertions(+), 246 deletions(-) diff --git a/web/apps/auth/src/pages/signup.tsx b/web/apps/auth/src/pages/signup.tsx index e1bb54b598..23ed3fa02b 100644 --- a/web/apps/auth/src/pages/signup.tsx +++ b/web/apps/auth/src/pages/signup.tsx @@ -1,6 +1,3 @@ -import Page_ from "@/accounts/pages/signup"; -import { useAppContext } from "types/context"; - -const Page = () => ; +import Page from "@/accounts/pages/signup"; export default Page; diff --git a/web/apps/photos/src/pages/signup.tsx b/web/apps/photos/src/pages/signup.tsx index 99eae32ae0..23ed3fa02b 100644 --- a/web/apps/photos/src/pages/signup.tsx +++ b/web/apps/photos/src/pages/signup.tsx @@ -1,6 +1,3 @@ -import Page_ from "@/accounts/pages/signup"; -import { useAppContext } from "@/new/photos/types/context"; - -const Page = () => ; +import Page from "@/accounts/pages/signup"; export default Page; diff --git a/web/packages/accounts/components/Login.tsx b/web/packages/accounts/components/Login.tsx index 12ab84a54c..873580442b 100644 --- a/web/packages/accounts/components/Login.tsx +++ b/web/packages/accounts/components/Login.tsx @@ -1,3 +1,10 @@ +import { + AccountsPageFooter, + AccountsPageTitle, +} from "@/accounts/components/layouts/centered-paper"; +import { PAGES } from "@/accounts/constants/pages"; +import { getSRPAttributes } from "@/accounts/services/srp-remote"; +import { sendOTT } from "@/accounts/services/user"; import { FormPaperFooter, FormPaperTitle } from "@/base/components/FormPaper"; import { isMuseumHTTPError } from "@/base/http"; import log from "@/base/log"; @@ -9,13 +16,6 @@ import { LS_KEYS, setData, setLSUser } from "@ente/shared/storage/localStorage"; import { Input, Stack, Typography } from "@mui/material"; import { t } from "i18next"; import { useRouter } from "next/router"; -import { PAGES } from "../constants/pages"; -import { getSRPAttributes } from "../services/srp-remote"; -import { sendOTT } from "../services/user"; -import { - AccountsPageFooter, - AccountsPageTitle, -} from "./layouts/centered-paper"; interface LoginProps { signUp: () => void; diff --git a/web/packages/accounts/components/SignUp.tsx b/web/packages/accounts/components/SignUp.tsx index a44e418f84..04757aef96 100644 --- a/web/packages/accounts/components/SignUp.tsx +++ b/web/packages/accounts/components/SignUp.tsx @@ -1,3 +1,7 @@ +import { PAGES } from "@/accounts/constants/pages"; +import { generateKeyAndSRPAttributes } from "@/accounts/services/srp"; +import { sendOTT } from "@/accounts/services/user"; +import { isWeakPassword } from "@/accounts/utils/password"; import { FormPaperFooter, FormPaperTitle } from "@/base/components/FormPaper"; import { LoadingButton } from "@/base/components/mui/LoadingButton"; import { isMuseumHTTPError } from "@/base/http"; @@ -36,11 +40,11 @@ import type { NextRouter } from "next/router"; import React, { useState } from "react"; import { Trans } from "react-i18next"; import * as Yup from "yup"; -import { PAGES } from "../constants/pages"; -import { generateKeyAndSRPAttributes } from "../services/srp"; -import { sendOTT } from "../services/user"; -import { isWeakPassword } from "../utils/password"; import { PasswordStrengthHint } from "./PasswordStrength"; +import { + AccountsPageFooter, + AccountsPageTitle, +} from "./layouts/centered-paper"; interface FormValues { email: string; @@ -54,9 +58,20 @@ interface SignUpProps { login: () => void; /** Reactive value of {@link customAPIHost}. */ host: string | undefined; + /** + * If true, return the "newer" variant. + * + * TODO: Remove the branching. + */ + useV2Layout?: boolean; } -export const SignUp: React.FC = ({ router, login, host }) => { +export const SignUp: React.FC = ({ + router, + login, + host, + useV2Layout, +}) => { const [acceptTerms, setAcceptTerms] = useState(false); const [loading, setLoading] = useState(false); const [showPassword, setShowPassword] = useState(false); @@ -124,224 +139,236 @@ export const SignUp: React.FC = ({ router, login, host }) => { setLoading(false); }; - return ( - <> - {t("sign_up")} - - initialValues={{ - email: "", - passphrase: "", - confirm: "", - referral: "", - }} - validationSchema={Yup.object().shape({ - email: Yup.string() - .email(t("invalid_email_error")) - .required(t("required")), - passphrase: Yup.string().required(t("required")), - confirm: Yup.string().required(t("required")), - })} - validateOnChange={false} - validateOnBlur={false} - onSubmit={registerUser} - > - {({ - values, - errors, - handleChange, - handleSubmit, - }): React.JSX.Element => ( -
- - + const form = ( + + initialValues={{ + email: "", + passphrase: "", + confirm: "", + referral: "", + }} + validationSchema={Yup.object().shape({ + email: Yup.string() + .email(t("invalid_email_error")) + .required(t("required")), + passphrase: Yup.string().required(t("required")), + confirm: Yup.string().required(t("required")), + })} + validateOnChange={false} + validateOnBlur={false} + onSubmit={registerUser} + > + {({ + values, + errors, + handleChange, + handleSubmit, + }): React.JSX.Element => ( + + + + + ), + }, + }} + /> + + + + + + + {t("referral_source_hint")} + + + + + + + + ), }, }} /> - - - - - - - {t("referral_source_hint")} - - - - - - - - - ), - }, - }} - /> - - - - setAcceptTerms(e.target.checked) - } - color="accent" - /> - } - label={ - - - ), - b: ( - - ), - }} - /> - - } - /> - - - - - {t("create_account")} - - {loading && ( - - {t("key_generation_in_progress")} - - )} - - )} - - - - - {t("existing_account")} - + + + setAcceptTerms(e.target.checked) + } + color="accent" + /> + } + label={ + + + ), + b: ( + + ), + }} + /> + + } + /> + +
+ + + {t("create_account")} + + {loading && ( + + {t("key_generation_in_progress")} + + )} + + + )} + + ); - - {host ?? "" /* prevent layout shift with a minHeight */} - - - + const footerContents = ( + + {t("existing_account")} + + + {host ?? "" /* prevent layout shift with a minHeight */} + + + ); + + if (useV2Layout) { + return ( + <> + {t("sign_up")} + {form} + {footerContents} + + ); + } + + return ( + <> + {t("sign_up")} + {form} + {footerContents} ); }; diff --git a/web/packages/accounts/pages/login.tsx b/web/packages/accounts/pages/login.tsx index 3aeb92dc78..52745a1a3d 100644 --- a/web/packages/accounts/pages/login.tsx +++ b/web/packages/accounts/pages/login.tsx @@ -1,12 +1,12 @@ +import { AccountsPageContents } from "@/accounts/components/layouts/centered-paper"; +import { Login } from "@/accounts/components/Login"; +import { PAGES } from "@/accounts/constants/pages"; import { Stack100vhCenter } from "@/base/components/containers"; import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator"; import { customAPIHost } from "@/base/origins"; import { LS_KEYS, getData } from "@ente/shared/storage/localStorage"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; -import { AccountsPageContents } from "../components/layouts/centered-paper"; -import { Login } from "../components/Login"; -import { PAGES } from "../constants/pages"; const Page: React.FC = () => { const [loading, setLoading] = useState(true); diff --git a/web/packages/accounts/pages/signup.tsx b/web/packages/accounts/pages/signup.tsx index 8f60d9986c..65008c4fb1 100644 --- a/web/packages/accounts/pages/signup.tsx +++ b/web/packages/accounts/pages/signup.tsx @@ -1,17 +1,14 @@ +import { AccountsPageContents } from "@/accounts/components/layouts/centered-paper"; +import { SignUp } from "@/accounts/components/SignUp"; import { PAGES } from "@/accounts/constants/pages"; -import { FormPaper } from "@/base/components/FormPaper"; +import { Stack100vhCenter } from "@/base/components/containers"; import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator"; import { customAPIHost } from "@/base/origins"; import { LS_KEYS, getData } from "@ente/shared//storage/localStorage"; -import { VerticallyCentered } from "@ente/shared/components/Container"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; -import { SignUp } from "../components/SignUp"; -import type { PageProps } from "../types/page"; - -const Page: React.FC = ({ appContext }) => { - const { showNavBar } = appContext; +const Page: React.FC = () => { const [loading, setLoading] = useState(true); const [host, setHost] = useState(); @@ -24,23 +21,20 @@ const Page: React.FC = ({ appContext }) => { void router.push(PAGES.VERIFY); } setLoading(false); - showNavBar(true); }, []); const login = () => { void router.push(PAGES.LOGIN); }; - return ( - - {loading ? ( - - ) : ( - - - - )} - + return loading ? ( + + + + ) : ( + + + ); };