Revert reimportability

This commit is contained in:
Manav Rathi 2024-05-26 20:40:48 +05:30
parent b28f6c3d8c
commit 7d497b5ae1
No known key found for this signature in database
5 changed files with 400 additions and 391 deletions

View file

@ -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";

View 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>
</>
);
}

View 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>
</>
);
}

View file

@ -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>
</>
);
}

View file

@ -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>
</>
);
}