mirror of
https://github.com/ente-io/ente.git
synced 2025-08-05 05:24:26 +00:00
Conv
This commit is contained in:
Manav Rathi
parent
fdded49bda
commit
642c9e611b
@ -1,6 +1,3 @@
|
||||
import Page_ from "@/accounts/pages/signup";
|
||||
import { useAppContext } from "types/context";
|
||||
|
||||
const Page = () => <Page_ appContext={useAppContext()} />;
|
||||
import Page from "@/accounts/pages/signup";
|
||||
|
||||
export default Page;
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import Page_ from "@/accounts/pages/signup";
|
||||
import { useAppContext } from "@/new/photos/types/context";
|
||||
|
||||
const Page = () => <Page_ appContext={useAppContext()} />;
|
||||
import Page from "@/accounts/pages/signup";
|
||||
|
||||
export default Page;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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<SignUpProps> = ({ router, login, host }) => {
|
||||
export const SignUp: React.FC<SignUpProps> = ({
|
||||
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<SignUpProps> = ({ router, login, host }) => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormPaperTitle> {t("sign_up")}</FormPaperTitle>
|
||||
<Formik<FormValues>
|
||||
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 => (
|
||||
<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}
|
||||
/>
|
||||
const form = (
|
||||
<Formik<FormValues>
|
||||
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 => (
|
||||
<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("password")}
|
||||
value={values.passphrase}
|
||||
onChange={handleChange("passphrase")}
|
||||
error={Boolean(errors.passphrase)}
|
||||
helperText={errors.passphrase}
|
||||
disabled={loading}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<ShowHidePassword
|
||||
showPassword={showPassword}
|
||||
handleClickShowPassword={
|
||||
handleClickShowPassword
|
||||
}
|
||||
handleMouseDownPassword={
|
||||
handleMouseDownPassword
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="confirm-password"
|
||||
name="confirm-password"
|
||||
autoComplete="new-password"
|
||||
type="password"
|
||||
label={t("confirm_password")}
|
||||
value={values.confirm}
|
||||
onChange={handleChange("confirm")}
|
||||
error={Boolean(errors.confirm)}
|
||||
helperText={errors.confirm}
|
||||
disabled={loading}
|
||||
/>
|
||||
<PasswordStrengthHint password={values.passphrase} />
|
||||
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: "left",
|
||||
color: "text.secondary",
|
||||
mt: "24px",
|
||||
}}
|
||||
>
|
||||
{t("referral_source_hint")}
|
||||
</Typography>
|
||||
<TextField
|
||||
hiddenLabel
|
||||
fullWidth
|
||||
id="password"
|
||||
name="password"
|
||||
autoComplete="new-password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
label={t("password")}
|
||||
value={values.passphrase}
|
||||
onChange={handleChange("passphrase")}
|
||||
error={Boolean(errors.passphrase)}
|
||||
helperText={errors.passphrase}
|
||||
name="referral"
|
||||
type="text"
|
||||
value={values.referral}
|
||||
onChange={handleChange("referral")}
|
||||
error={Boolean(errors.referral)}
|
||||
disabled={loading}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<ShowHidePassword
|
||||
showPassword={showPassword}
|
||||
handleClickShowPassword={
|
||||
handleClickShowPassword
|
||||
}
|
||||
handleMouseDownPassword={
|
||||
handleMouseDownPassword
|
||||
}
|
||||
/>
|
||||
<InputAdornment position="end">
|
||||
<Tooltip
|
||||
title={t(
|
||||
"referral_source_info",
|
||||
)}
|
||||
>
|
||||
<IconButton
|
||||
tabIndex={-1}
|
||||
color="secondary"
|
||||
edge={"end"}
|
||||
>
|
||||
<InfoOutlinedIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</InputAdornment>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="confirm-password"
|
||||
name="confirm-password"
|
||||
autoComplete="new-password"
|
||||
type="password"
|
||||
label={t("confirm_password")}
|
||||
value={values.confirm}
|
||||
onChange={handleChange("confirm")}
|
||||
error={Boolean(errors.confirm)}
|
||||
helperText={errors.confirm}
|
||||
disabled={loading}
|
||||
/>
|
||||
<PasswordStrengthHint
|
||||
password={values.passphrase}
|
||||
/>
|
||||
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: "left",
|
||||
color: "text.secondary",
|
||||
mt: "24px",
|
||||
}}
|
||||
>
|
||||
{t("referral_source_hint")}
|
||||
</Typography>
|
||||
<TextField
|
||||
hiddenLabel
|
||||
fullWidth
|
||||
name="referral"
|
||||
type="text"
|
||||
value={values.referral}
|
||||
onChange={handleChange("referral")}
|
||||
error={Boolean(errors.referral)}
|
||||
disabled={loading}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<Tooltip
|
||||
title={t(
|
||||
"referral_source_info",
|
||||
)}
|
||||
>
|
||||
<IconButton
|
||||
tabIndex={-1}
|
||||
color="secondary"
|
||||
edge={"end"}
|
||||
>
|
||||
<InfoOutlinedIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</InputAdornment>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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 sx={{ mb: 4 }}>
|
||||
<LoadingButton
|
||||
fullWidth
|
||||
color="accent"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
disabled={
|
||||
!acceptTerms ||
|
||||
isWeakPassword(values.passphrase)
|
||||
}
|
||||
>
|
||||
{t("create_account")}
|
||||
</LoadingButton>
|
||||
{loading && (
|
||||
<Typography
|
||||
variant="small"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textAlign: "center",
|
||||
color: "text.muted",
|
||||
}}
|
||||
>
|
||||
{t("key_generation_in_progress")}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
<FormPaperFooter>
|
||||
<Stack sx={{ gap: 4 }}>
|
||||
<LinkButton onClick={login}>
|
||||
{t("existing_account")}
|
||||
</LinkButton>
|
||||
<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 sx={{ mb: 3 }}>
|
||||
<LoadingButton
|
||||
fullWidth
|
||||
color="accent"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
disabled={
|
||||
!acceptTerms ||
|
||||
isWeakPassword(values.passphrase)
|
||||
}
|
||||
>
|
||||
{t("create_account")}
|
||||
</LoadingButton>
|
||||
{loading && (
|
||||
<Typography
|
||||
variant="small"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textAlign: "center",
|
||||
color: "text.muted",
|
||||
}}
|
||||
>
|
||||
{t("key_generation_in_progress")}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
|
||||
<Typography
|
||||
variant="mini"
|
||||
sx={{ color: "text.faint", minHeight: "32px" }}
|
||||
>
|
||||
{host ?? "" /* prevent layout shift with a minHeight */}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</FormPaperFooter>
|
||||
const footerContents = (
|
||||
<Stack sx={{ gap: 3, textAlign: "center" }}>
|
||||
<LinkButton onClick={login}>{t("existing_account")}</LinkButton>
|
||||
|
||||
<Typography
|
||||
variant="mini"
|
||||
sx={{ color: "text.faint", minHeight: "16px" }}
|
||||
>
|
||||
{host ?? "" /* prevent layout shift with a minHeight */}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
if (useV2Layout) {
|
||||
return (
|
||||
<>
|
||||
<AccountsPageTitle>{t("sign_up")}</AccountsPageTitle>
|
||||
{form}
|
||||
<AccountsPageFooter>{footerContents}</AccountsPageFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormPaperTitle>{t("sign_up")}</FormPaperTitle>
|
||||
{form}
|
||||
<FormPaperFooter>{footerContents}</FormPaperFooter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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<PageProps> = ({ appContext }) => {
|
||||
const { showNavBar } = appContext;
|
||||
|
||||
const Page: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [host, setHost] = useState<string | undefined>();
|
||||
|
||||
@ -24,23 +21,20 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
|
||||
void router.push(PAGES.VERIFY);
|
||||
}
|
||||
setLoading(false);
|
||||
showNavBar(true);
|
||||
}, []);
|
||||
|
||||
const login = () => {
|
||||
void router.push(PAGES.LOGIN);
|
||||
};
|
||||
|
||||
return (
|
||||
<VerticallyCentered>
|
||||
{loading ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<FormPaper>
|
||||
<SignUp {...{ login, router, host }} />
|
||||
</FormPaper>
|
||||
)}
|
||||
</VerticallyCentered>
|
||||
return loading ? (
|
||||
<Stack100vhCenter>
|
||||
<ActivityIndicator />
|
||||
</Stack100vhCenter>
|
||||
) : (
|
||||
<AccountsPageContents>
|
||||
<SignUp {...{ login, router, host }} useV2Layout />
|
||||
</AccountsPageContents>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user