Revert reimportability
This commit is contained in:
Manav Rathi
parent
b28f6c3d8c
commit
7d497b5ae1
5 changed files with 400 additions and 391 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
import log from "@/next/log";
|
import log from "@/next/log";
|
||||||
import Login from "@ente/accounts/components/Login";
|
import { Login } from "@ente/accounts/components/Login";
|
||||||
import SignUp from "@ente/accounts/components/SignUp";
|
import { SignUp } from "@ente/accounts/components/SignUp";
|
||||||
import { APPS } from "@ente/shared/apps/constants";
|
import { APPS } from "@ente/shared/apps/constants";
|
||||||
import { EnteLogo } from "@ente/shared/components/EnteLogo";
|
import { EnteLogo } from "@ente/shared/components/EnteLogo";
|
||||||
import EnteSpinner from "@ente/shared/components/EnteSpinner";
|
import EnteSpinner from "@ente/shared/components/EnteSpinner";
|
||||||
|
|
|
||||||
75
web/packages/accounts/components/Login.tsx
Normal file
75
web/packages/accounts/components/Login.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
import log from "@/next/log";
|
||||||
|
import { appNameToAppNameOld } from "@ente/shared/apps/constants";
|
||||||
|
import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
|
||||||
|
import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
|
||||||
|
import LinkButton from "@ente/shared/components/LinkButton";
|
||||||
|
import SingleInputForm, {
|
||||||
|
type SingleInputFormProps,
|
||||||
|
} from "@ente/shared/components/SingleInputForm";
|
||||||
|
import { LS_KEYS, setData } from "@ente/shared/storage/localStorage";
|
||||||
|
import { Input } from "@mui/material";
|
||||||
|
import { t } from "i18next";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import type { AppName } from "packages/next/types/app";
|
||||||
|
import { getSRPAttributes } from "../api/srp";
|
||||||
|
import { sendOtt } from "../api/user";
|
||||||
|
import { PAGES } from "../constants/pages";
|
||||||
|
|
||||||
|
interface LoginProps {
|
||||||
|
signUp: () => void;
|
||||||
|
appName: AppName;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Login(props: LoginProps) {
|
||||||
|
const appNameOld = appNameToAppNameOld(props.appName);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const loginUser: SingleInputFormProps["callback"] = async (
|
||||||
|
email,
|
||||||
|
setFieldError,
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
setData(LS_KEYS.USER, { email });
|
||||||
|
const srpAttributes = await getSRPAttributes(email);
|
||||||
|
log.debug(() => ` srpAttributes: ${JSON.stringify(srpAttributes)}`);
|
||||||
|
if (!srpAttributes || srpAttributes.isEmailMFAEnabled) {
|
||||||
|
await sendOtt(appNameOld, email);
|
||||||
|
router.push(PAGES.VERIFY);
|
||||||
|
} else {
|
||||||
|
setData(LS_KEYS.SRP_ATTRIBUTES, srpAttributes);
|
||||||
|
router.push(PAGES.CREDENTIALS);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof Error) {
|
||||||
|
setFieldError(`${t("UNKNOWN_ERROR")} (reason:${e.message})`);
|
||||||
|
} else {
|
||||||
|
setFieldError(
|
||||||
|
`${t("UNKNOWN_ERROR")} (reason:${JSON.stringify(e)})`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FormPaperTitle>{t("LOGIN")}</FormPaperTitle>
|
||||||
|
<SingleInputForm
|
||||||
|
callback={loginUser}
|
||||||
|
fieldType="email"
|
||||||
|
placeholder={t("ENTER_EMAIL")}
|
||||||
|
buttonText={t("LOGIN")}
|
||||||
|
autoComplete="username"
|
||||||
|
hiddenPostInput={
|
||||||
|
<Input sx={{ display: "none" }} type="password" value="" />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormPaperFooter>
|
||||||
|
<LinkButton onClick={props.signUp}>
|
||||||
|
{t("NO_ACCOUNT")}
|
||||||
|
</LinkButton>
|
||||||
|
</FormPaperFooter>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
320
web/packages/accounts/components/SignUp.tsx
Normal file
320
web/packages/accounts/components/SignUp.tsx
Normal file
|
|
@ -0,0 +1,320 @@
|
||||||
|
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 } from "@ente/shared//storage/localStorage";
|
||||||
|
import { appNameToAppNameOld } 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 { 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 type { AppName } from "packages/next/types/app";
|
||||||
|
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: AppName;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SignUp({ router, appName, login }: SignUpProps) {
|
||||||
|
const appNameOld = appNameToAppNameOld(appName);
|
||||||
|
|
||||||
|
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(appNameOld, 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,23 +1,11 @@
|
||||||
import log from "@/next/log";
|
|
||||||
import { appNameToAppNameOld } from "@ente/shared/apps/constants";
|
|
||||||
import type { PageProps } from "@ente/shared/apps/types";
|
import type { PageProps } from "@ente/shared/apps/types";
|
||||||
import { VerticallyCentered } from "@ente/shared/components/Container";
|
import { VerticallyCentered } from "@ente/shared/components/Container";
|
||||||
import EnteSpinner from "@ente/shared/components/EnteSpinner";
|
import EnteSpinner from "@ente/shared/components/EnteSpinner";
|
||||||
import FormPaper from "@ente/shared/components/Form/FormPaper";
|
import FormPaper from "@ente/shared/components/Form/FormPaper";
|
||||||
import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
|
import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
|
||||||
import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
|
|
||||||
import LinkButton from "@ente/shared/components/LinkButton";
|
|
||||||
import SingleInputForm, {
|
|
||||||
type SingleInputFormProps,
|
|
||||||
} from "@ente/shared/components/SingleInputForm";
|
|
||||||
import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
|
|
||||||
import { Input } from "@mui/material";
|
|
||||||
import { t } from "i18next";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import type { AppName } from "packages/next/types/app";
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { getSRPAttributes } from "../api/srp";
|
import { Login } from "../components/Login";
|
||||||
import { sendOtt } from "../api/user";
|
|
||||||
import { PAGES } from "../constants/pages";
|
import { PAGES } from "../constants/pages";
|
||||||
|
|
||||||
const Page: React.FC<PageProps> = ({ appContext }) => {
|
const Page: React.FC<PageProps> = ({ appContext }) => {
|
||||||
|
|
@ -54,62 +42,3 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Page;
|
export default Page;
|
||||||
|
|
||||||
interface LoginProps {
|
|
||||||
signUp: () => void;
|
|
||||||
appName: AppName;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Login(props: LoginProps) {
|
|
||||||
const appNameOld = appNameToAppNameOld(props.appName);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const loginUser: SingleInputFormProps["callback"] = async (
|
|
||||||
email,
|
|
||||||
setFieldError,
|
|
||||||
) => {
|
|
||||||
try {
|
|
||||||
setData(LS_KEYS.USER, { email });
|
|
||||||
const srpAttributes = await getSRPAttributes(email);
|
|
||||||
log.debug(() => ` srpAttributes: ${JSON.stringify(srpAttributes)}`);
|
|
||||||
if (!srpAttributes || srpAttributes.isEmailMFAEnabled) {
|
|
||||||
await sendOtt(appNameOld, email);
|
|
||||||
router.push(PAGES.VERIFY);
|
|
||||||
} else {
|
|
||||||
setData(LS_KEYS.SRP_ATTRIBUTES, srpAttributes);
|
|
||||||
router.push(PAGES.CREDENTIALS);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
setFieldError(`${t("UNKNOWN_ERROR")} (reason:${e.message})`);
|
|
||||||
} else {
|
|
||||||
setFieldError(
|
|
||||||
`${t("UNKNOWN_ERROR")} (reason:${JSON.stringify(e)})`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<FormPaperTitle>{t("LOGIN")}</FormPaperTitle>
|
|
||||||
<SingleInputForm
|
|
||||||
callback={loginUser}
|
|
||||||
fieldType="email"
|
|
||||||
placeholder={t("ENTER_EMAIL")}
|
|
||||||
buttonText={t("LOGIN")}
|
|
||||||
autoComplete="username"
|
|
||||||
hiddenPostInput={
|
|
||||||
<Input sx={{ display: "none" }} type="password" value="" />
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormPaperFooter>
|
|
||||||
<LinkButton onClick={props.signUp}>
|
|
||||||
{t("NO_ACCOUNT")}
|
|
||||||
</LinkButton>
|
|
||||||
</FormPaperFooter>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,12 @@
|
||||||
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 { 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 { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
|
||||||
import { appNameToAppNameOld } from "@ente/shared/apps/constants";
|
|
||||||
import type { PageProps } from "@ente/shared/apps/types";
|
import type { PageProps } from "@ente/shared/apps/types";
|
||||||
import { VerticallyCentered } from "@ente/shared/components/Container";
|
import { VerticallyCentered } from "@ente/shared/components/Container";
|
||||||
import EnteSpinner from "@ente/shared/components/EnteSpinner";
|
import EnteSpinner from "@ente/shared/components/EnteSpinner";
|
||||||
import FormPaper from "@ente/shared/components/Form/FormPaper";
|
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 { useRouter } from "next/router";
|
||||||
import type { AppName } from "packages/next/types/app";
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Trans } from "react-i18next";
|
import { SignUp } from "../components/SignUp";
|
||||||
import * as Yup from "yup";
|
|
||||||
|
|
||||||
const Page: React.FC<PageProps> = ({ appContext }) => {
|
const Page: React.FC<PageProps> = ({ appContext }) => {
|
||||||
const { appName } = appContext;
|
const { appName } = appContext;
|
||||||
|
|
@ -81,279 +42,3 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Page;
|
export default Page;
|
||||||
|
|
||||||
interface FormValues {
|
|
||||||
email: string;
|
|
||||||
passphrase: string;
|
|
||||||
confirm: string;
|
|
||||||
referral: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SignUpProps {
|
|
||||||
router: NextRouter;
|
|
||||||
login: () => void;
|
|
||||||
appName: AppName;
|
|
||||||
}
|
|
||||||
|
|
||||||
function SignUp({ router, appName, login }: SignUpProps) {
|
|
||||||
const appNameOld = appNameToAppNameOld(appName);
|
|
||||||
|
|
||||||
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(appNameOld, 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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue