From ba1af5eaf0669d6248eb3f1b59a88e50505ae031 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sun, 26 May 2024 18:14:34 +0530
Subject: [PATCH] Move

---
 web/packages/accounts/components/Login.tsx  |   0
 web/packages/accounts/components/SignUp.tsx | 316 --------------------
 web/packages/accounts/pages/signup.tsx      | 316 +++++++++++++++++++-
 3 files changed, 314 insertions(+), 318 deletions(-)
 delete mode 100644 web/packages/accounts/components/Login.tsx
 delete mode 100644 web/packages/accounts/components/SignUp.tsx

diff --git a/web/packages/accounts/components/Login.tsx b/web/packages/accounts/components/Login.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/packages/accounts/components/SignUp.tsx b/web/packages/accounts/components/SignUp.tsx
deleted file mode 100644
index af63f4991..000000000
--- a/web/packages/accounts/components/SignUp.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import log from "@/next/log";
-import { sendOtt } from "@ente/accounts/api/user";
-import { PasswordStrengthHint } from "@ente/accounts/components/PasswordStrength";
-import { PAGES } from "@ente/accounts/constants/pages";
-import { isWeakPassword } from "@ente/accounts/utils";
-import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
-import { APPS } from "@ente/shared/apps/constants";
-import { VerticallyCentered } from "@ente/shared/components//Container";
-import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
-import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
-import ShowHidePassword from "@ente/shared/components/Form/ShowHidePassword";
-import LinkButton from "@ente/shared/components/LinkButton";
-import SubmitButton from "@ente/shared/components/SubmitButton";
-import {
-    generateAndSaveIntermediateKeyAttributes,
-    saveKeyInSessionStore,
-} from "@ente/shared/crypto/helpers";
-import { LS_KEYS, setData } from "@ente/shared/storage/localStorage";
-import {
-    setJustSignedUp,
-    setLocalReferralSource,
-} from "@ente/shared/storage/localStorage/helpers";
-import { SESSION_KEYS } from "@ente/shared/storage/sessionStorage";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import {
-    Box,
-    Checkbox,
-    FormControlLabel,
-    FormGroup,
-    IconButton,
-    InputAdornment,
-    Link,
-    TextField,
-    Tooltip,
-    Typography,
-} from "@mui/material";
-import { Formik, type FormikHelpers } from "formik";
-import { t } from "i18next";
-import type { NextRouter } from "next/router";
-import React, { useState } from "react";
-import { Trans } from "react-i18next";
-import * as Yup from "yup";
-
-interface FormValues {
-    email: string;
-    passphrase: string;
-    confirm: string;
-    referral: string;
-}
-
-interface SignUpProps {
-    router: NextRouter;
-    login: () => void;
-    appName: APPS;
-}
-
-export default function SignUp({ router, appName, login }: SignUpProps) {
-    const [acceptTerms, setAcceptTerms] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
-
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = (
-        event: React.MouseEvent<HTMLButtonElement>,
-    ) => {
-        event.preventDefault();
-    };
-
-    const registerUser = async (
-        { email, passphrase, confirm, referral }: FormValues,
-        { setFieldError }: FormikHelpers<FormValues>,
-    ) => {
-        try {
-            if (passphrase !== confirm) {
-                setFieldError("confirm", t("PASSPHRASE_MATCH_ERROR"));
-                return;
-            }
-            setLoading(true);
-            try {
-                setData(LS_KEYS.USER, { email });
-                setLocalReferralSource(referral);
-                await sendOtt(appName, email);
-            } catch (e) {
-                const message = e instanceof Error ? e.message : "";
-                setFieldError("confirm", `${t("UNKNOWN_ERROR")} ${message}`);
-                throw e;
-            }
-            try {
-                const { keyAttributes, masterKey, srpSetupAttributes } =
-                    await generateKeyAndSRPAttributes(passphrase);
-
-                setData(LS_KEYS.ORIGINAL_KEY_ATTRIBUTES, keyAttributes);
-                setData(LS_KEYS.SRP_SETUP_ATTRIBUTES, srpSetupAttributes);
-                await generateAndSaveIntermediateKeyAttributes(
-                    passphrase,
-                    keyAttributes,
-                    masterKey,
-                );
-
-                await saveKeyInSessionStore(
-                    SESSION_KEYS.ENCRYPTION_KEY,
-                    masterKey,
-                );
-                setJustSignedUp(true);
-                router.push(PAGES.VERIFY);
-            } catch (e) {
-                setFieldError("confirm", t("PASSWORD_GENERATION_FAILED"));
-                throw e;
-            }
-        } catch (e) {
-            log.error("signup failed", e);
-        }
-        setLoading(false);
-    };
-
-    return (
-        <>
-            <FormPaperTitle> {t("SIGN_UP")}</FormPaperTitle>
-            <Formik<FormValues>
-                initialValues={{
-                    email: "",
-                    passphrase: "",
-                    confirm: "",
-                    referral: "",
-                }}
-                validationSchema={Yup.object().shape({
-                    email: Yup.string()
-                        .email(t("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,
-                }): JSX.Element => (
-                    <form noValidate onSubmit={handleSubmit}>
-                        <VerticallyCentered sx={{ mb: 1 }}>
-                            <TextField
-                                fullWidth
-                                id="email"
-                                name="email"
-                                autoComplete="username"
-                                type="email"
-                                label={t("ENTER_EMAIL")}
-                                value={values.email}
-                                onChange={handleChange("email")}
-                                error={Boolean(errors.email)}
-                                helperText={errors.email}
-                                autoFocus
-                                disabled={loading}
-                            />
-
-                            <TextField
-                                fullWidth
-                                id="password"
-                                name="password"
-                                autoComplete="new-password"
-                                type={showPassword ? "text" : "password"}
-                                label={t("PASSPHRASE_HINT")}
-                                value={values.passphrase}
-                                onChange={handleChange("passphrase")}
-                                error={Boolean(errors.passphrase)}
-                                helperText={errors.passphrase}
-                                disabled={loading}
-                                InputProps={{
-                                    endAdornment: (
-                                        <ShowHidePassword
-                                            showPassword={showPassword}
-                                            handleClickShowPassword={
-                                                handleClickShowPassword
-                                            }
-                                            handleMouseDownPassword={
-                                                handleMouseDownPassword
-                                            }
-                                        />
-                                    ),
-                                }}
-                            />
-
-                            <TextField
-                                fullWidth
-                                id="confirm-password"
-                                name="confirm-password"
-                                autoComplete="new-password"
-                                type="password"
-                                label={t("CONFIRM_PASSPHRASE")}
-                                value={values.confirm}
-                                onChange={handleChange("confirm")}
-                                error={Boolean(errors.confirm)}
-                                helperText={errors.confirm}
-                                disabled={loading}
-                            />
-                            <PasswordStrengthHint
-                                password={values.passphrase}
-                            />
-
-                            <Box sx={{ width: "100%" }}>
-                                <Typography
-                                    textAlign={"left"}
-                                    color="text.secondary"
-                                    mt={"24px"}
-                                >
-                                    {t("REFERRAL_CODE_HINT")}
-                                </Typography>
-                                <TextField
-                                    hiddenLabel
-                                    InputProps={{
-                                        endAdornment: (
-                                            <InputAdornment position="end">
-                                                <Tooltip
-                                                    title={t("REFERRAL_INFO")}
-                                                >
-                                                    <IconButton
-                                                        tabIndex={-1}
-                                                        color="secondary"
-                                                        edge={"end"}
-                                                    >
-                                                        <InfoOutlined />
-                                                    </IconButton>
-                                                </Tooltip>
-                                            </InputAdornment>
-                                        ),
-                                    }}
-                                    fullWidth
-                                    name="referral"
-                                    type="text"
-                                    value={values.referral}
-                                    onChange={handleChange("referral")}
-                                    error={Boolean(errors.referral)}
-                                    disabled={loading}
-                                />
-                            </Box>
-                            <FormGroup sx={{ width: "100%" }}>
-                                <FormControlLabel
-                                    sx={{
-                                        color: "text.muted",
-                                        ml: 0,
-                                        mt: 2,
-                                        mb: 0,
-                                    }}
-                                    control={
-                                        <Checkbox
-                                            size="small"
-                                            disabled={loading}
-                                            checked={acceptTerms}
-                                            onChange={(e) =>
-                                                setAcceptTerms(e.target.checked)
-                                            }
-                                            color="accent"
-                                        />
-                                    }
-                                    label={
-                                        <Typography variant="small">
-                                            <Trans
-                                                i18nKey={"TERMS_AND_CONDITIONS"}
-                                                components={{
-                                                    a: (
-                                                        <Link
-                                                            href="https://ente.io/terms"
-                                                            target="_blank"
-                                                        />
-                                                    ),
-                                                    b: (
-                                                        <Link
-                                                            href="https://ente.io/privacy"
-                                                            target="_blank"
-                                                        />
-                                                    ),
-                                                }}
-                                            />
-                                        </Typography>
-                                    }
-                                />
-                            </FormGroup>
-                        </VerticallyCentered>
-                        <Box mb={4}>
-                            <SubmitButton
-                                sx={{ my: 0 }}
-                                buttonText={t("CREATE_ACCOUNT")}
-                                loading={loading}
-                                disabled={
-                                    !acceptTerms ||
-                                    isWeakPassword(values.passphrase)
-                                }
-                            />
-                            {loading && (
-                                <Typography
-                                    mt={1}
-                                    textAlign={"center"}
-                                    color="text.muted"
-                                    variant="small"
-                                >
-                                    {t("KEY_GENERATION_IN_PROGRESS_MESSAGE")}
-                                </Typography>
-                            )}
-                        </Box>
-                    </form>
-                )}
-            </Formik>
-
-            <FormPaperFooter>
-                <LinkButton onClick={login}>{t("ACCOUNT_EXISTS")}</LinkButton>
-            </FormPaperFooter>
-        </>
-    );
-}
diff --git a/web/packages/accounts/pages/signup.tsx b/web/packages/accounts/pages/signup.tsx
index fe86df3e7..c99f6e3b0 100644
--- a/web/packages/accounts/pages/signup.tsx
+++ b/web/packages/accounts/pages/signup.tsx
@@ -1,12 +1,50 @@
-import SignUp from "@ente/accounts/components/SignUp";
+import log from "@/next/log";
+import { sendOtt } from "@ente/accounts/api/user";
+import { PasswordStrengthHint } from "@ente/accounts/components/PasswordStrength";
 import { PAGES } from "@ente/accounts/constants/pages";
+import { isWeakPassword } from "@ente/accounts/utils";
+import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
 import { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
+import { APPS } from "@ente/shared/apps/constants";
 import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
+import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
+import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
+import ShowHidePassword from "@ente/shared/components/Form/ShowHidePassword";
+import LinkButton from "@ente/shared/components/LinkButton";
+import SubmitButton from "@ente/shared/components/SubmitButton";
+import {
+    generateAndSaveIntermediateKeyAttributes,
+    saveKeyInSessionStore,
+} from "@ente/shared/crypto/helpers";
+import { setData } from "@ente/shared/storage/localStorage";
+import {
+    setJustSignedUp,
+    setLocalReferralSource,
+} from "@ente/shared/storage/localStorage/helpers";
+import { SESSION_KEYS } from "@ente/shared/storage/sessionStorage";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import {
+    Box,
+    Checkbox,
+    FormControlLabel,
+    FormGroup,
+    IconButton,
+    InputAdornment,
+    Link,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import { Formik, type FormikHelpers } from "formik";
+import { t } from "i18next";
+import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { Trans } from "react-i18next";
+import * as Yup from "yup";
 
 export default function SignUpPage({ appContext, appName }: PageProps) {
     const [loading, setLoading] = useState(true);
@@ -38,3 +76,277 @@ export default function SignUpPage({ appContext, appName }: PageProps) {
         </VerticallyCentered>
     );
 }
+
+interface FormValues {
+    email: string;
+    passphrase: string;
+    confirm: string;
+    referral: string;
+}
+
+interface SignUpProps {
+    router: NextRouter;
+    login: () => void;
+    appName: APPS;
+}
+
+function SignUp({ router, appName, login }: SignUpProps) {
+    const [acceptTerms, setAcceptTerms] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        event: React.MouseEvent<HTMLButtonElement>,
+    ) => {
+        event.preventDefault();
+    };
+
+    const registerUser = async (
+        { email, passphrase, confirm, referral }: FormValues,
+        { setFieldError }: FormikHelpers<FormValues>,
+    ) => {
+        try {
+            if (passphrase !== confirm) {
+                setFieldError("confirm", t("PASSPHRASE_MATCH_ERROR"));
+                return;
+            }
+            setLoading(true);
+            try {
+                setData(LS_KEYS.USER, { email });
+                setLocalReferralSource(referral);
+                await sendOtt(appName, email);
+            } catch (e) {
+                const message = e instanceof Error ? e.message : "";
+                setFieldError("confirm", `${t("UNKNOWN_ERROR")} ${message}`);
+                throw e;
+            }
+            try {
+                const { keyAttributes, masterKey, srpSetupAttributes } =
+                    await generateKeyAndSRPAttributes(passphrase);
+
+                setData(LS_KEYS.ORIGINAL_KEY_ATTRIBUTES, keyAttributes);
+                setData(LS_KEYS.SRP_SETUP_ATTRIBUTES, srpSetupAttributes);
+                await generateAndSaveIntermediateKeyAttributes(
+                    passphrase,
+                    keyAttributes,
+                    masterKey,
+                );
+
+                await saveKeyInSessionStore(
+                    SESSION_KEYS.ENCRYPTION_KEY,
+                    masterKey,
+                );
+                setJustSignedUp(true);
+                router.push(PAGES.VERIFY);
+            } catch (e) {
+                setFieldError("confirm", t("PASSWORD_GENERATION_FAILED"));
+                throw e;
+            }
+        } catch (e) {
+            log.error("signup failed", e);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <>
+            <FormPaperTitle> {t("SIGN_UP")}</FormPaperTitle>
+            <Formik<FormValues>
+                initialValues={{
+                    email: "",
+                    passphrase: "",
+                    confirm: "",
+                    referral: "",
+                }}
+                validationSchema={Yup.object().shape({
+                    email: Yup.string()
+                        .email(t("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,
+                }): JSX.Element => (
+                    <form noValidate onSubmit={handleSubmit}>
+                        <VerticallyCentered sx={{ mb: 1 }}>
+                            <TextField
+                                fullWidth
+                                id="email"
+                                name="email"
+                                autoComplete="username"
+                                type="email"
+                                label={t("ENTER_EMAIL")}
+                                value={values.email}
+                                onChange={handleChange("email")}
+                                error={Boolean(errors.email)}
+                                helperText={errors.email}
+                                autoFocus
+                                disabled={loading}
+                            />
+
+                            <TextField
+                                fullWidth
+                                id="password"
+                                name="password"
+                                autoComplete="new-password"
+                                type={showPassword ? "text" : "password"}
+                                label={t("PASSPHRASE_HINT")}
+                                value={values.passphrase}
+                                onChange={handleChange("passphrase")}
+                                error={Boolean(errors.passphrase)}
+                                helperText={errors.passphrase}
+                                disabled={loading}
+                                InputProps={{
+                                    endAdornment: (
+                                        <ShowHidePassword
+                                            showPassword={showPassword}
+                                            handleClickShowPassword={
+                                                handleClickShowPassword
+                                            }
+                                            handleMouseDownPassword={
+                                                handleMouseDownPassword
+                                            }
+                                        />
+                                    ),
+                                }}
+                            />
+
+                            <TextField
+                                fullWidth
+                                id="confirm-password"
+                                name="confirm-password"
+                                autoComplete="new-password"
+                                type="password"
+                                label={t("CONFIRM_PASSPHRASE")}
+                                value={values.confirm}
+                                onChange={handleChange("confirm")}
+                                error={Boolean(errors.confirm)}
+                                helperText={errors.confirm}
+                                disabled={loading}
+                            />
+                            <PasswordStrengthHint
+                                password={values.passphrase}
+                            />
+
+                            <Box sx={{ width: "100%" }}>
+                                <Typography
+                                    textAlign={"left"}
+                                    color="text.secondary"
+                                    mt={"24px"}
+                                >
+                                    {t("REFERRAL_CODE_HINT")}
+                                </Typography>
+                                <TextField
+                                    hiddenLabel
+                                    InputProps={{
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                <Tooltip
+                                                    title={t("REFERRAL_INFO")}
+                                                >
+                                                    <IconButton
+                                                        tabIndex={-1}
+                                                        color="secondary"
+                                                        edge={"end"}
+                                                    >
+                                                        <InfoOutlined />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                    fullWidth
+                                    name="referral"
+                                    type="text"
+                                    value={values.referral}
+                                    onChange={handleChange("referral")}
+                                    error={Boolean(errors.referral)}
+                                    disabled={loading}
+                                />
+                            </Box>
+                            <FormGroup sx={{ width: "100%" }}>
+                                <FormControlLabel
+                                    sx={{
+                                        color: "text.muted",
+                                        ml: 0,
+                                        mt: 2,
+                                        mb: 0,
+                                    }}
+                                    control={
+                                        <Checkbox
+                                            size="small"
+                                            disabled={loading}
+                                            checked={acceptTerms}
+                                            onChange={(e) =>
+                                                setAcceptTerms(e.target.checked)
+                                            }
+                                            color="accent"
+                                        />
+                                    }
+                                    label={
+                                        <Typography variant="small">
+                                            <Trans
+                                                i18nKey={"TERMS_AND_CONDITIONS"}
+                                                components={{
+                                                    a: (
+                                                        <Link
+                                                            href="https://ente.io/terms"
+                                                            target="_blank"
+                                                        />
+                                                    ),
+                                                    b: (
+                                                        <Link
+                                                            href="https://ente.io/privacy"
+                                                            target="_blank"
+                                                        />
+                                                    ),
+                                                }}
+                                            />
+                                        </Typography>
+                                    }
+                                />
+                            </FormGroup>
+                        </VerticallyCentered>
+                        <Box mb={4}>
+                            <SubmitButton
+                                sx={{ my: 0 }}
+                                buttonText={t("CREATE_ACCOUNT")}
+                                loading={loading}
+                                disabled={
+                                    !acceptTerms ||
+                                    isWeakPassword(values.passphrase)
+                                }
+                            />
+                            {loading && (
+                                <Typography
+                                    mt={1}
+                                    textAlign={"center"}
+                                    color="text.muted"
+                                    variant="small"
+                                >
+                                    {t("KEY_GENERATION_IN_PROGRESS_MESSAGE")}
+                                </Typography>
+                            )}
+                        </Box>
+                    </form>
+                )}
+            </Formik>
+
+            <FormPaperFooter>
+                <LinkButton onClick={login}>{t("ACCOUNT_EXISTS")}</LinkButton>
+            </FormPaperFooter>
+        </>
+    );
+}