migrated change email
This commit is contained in:
Abhinav
parent
073d10f4d7
commit
c36d322433
|
|
@ -1,30 +1,17 @@
|
|||
import { VerticallyCentered } from 'components/Container';
|
||||
import React, { useEffect } from 'react';
|
||||
import { t } from 'i18next';
|
||||
|
||||
import router from 'next/router';
|
||||
import ChangeEmailForm from 'components/ChangeEmail';
|
||||
import { PAGES } from 'constants/pages';
|
||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||
import FormPaper from 'components/Form/FormPaper';
|
||||
import FormPaperTitle from 'components/Form/FormPaper/Title';
|
||||
|
||||
function ChangeEmailPage() {
|
||||
useEffect(() => {
|
||||
const user = getData(LS_KEYS.USER);
|
||||
if (!user?.token) {
|
||||
router.push(PAGES.ROOT);
|
||||
}
|
||||
}, []);
|
||||
import ChangeEmailPage from '@ente/accounts/pages/change-email';
|
||||
import { useRouter } from 'next/router';
|
||||
import { AppContext } from 'pages/_app';
|
||||
import { useContext } from 'react';
|
||||
import { APPS } from '@ente/shared/apps/constants';
|
||||
|
||||
export default function ChangeEmail() {
|
||||
const appContext = useContext(AppContext);
|
||||
const router = useRouter();
|
||||
return (
|
||||
<VerticallyCentered>
|
||||
<FormPaper>
|
||||
<FormPaperTitle>{t('CHANGE_EMAIL')}</FormPaperTitle>
|
||||
<ChangeEmailForm />
|
||||
</FormPaper>
|
||||
</VerticallyCentered>
|
||||
<ChangeEmailPage
|
||||
appContext={appContext}
|
||||
router={router}
|
||||
appName={APPS.PHOTOS}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChangeEmailPage;
|
||||
|
|
|
|||
|
|
@ -82,3 +82,31 @@ export const removeTwoFactor = async (sessionID: string, secret: string) => {
|
|||
});
|
||||
return resp.data as TwoFactorVerificationResponse;
|
||||
};
|
||||
|
||||
export const changeEmail = async (email: string, ott: string) => {
|
||||
if (!getToken()) {
|
||||
return null;
|
||||
}
|
||||
await HTTPService.post(
|
||||
`${ENDPOINT}/users/change-email`,
|
||||
{
|
||||
email,
|
||||
ott,
|
||||
},
|
||||
null,
|
||||
{
|
||||
'X-Auth-Token': getToken(),
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const sendOTTForEmailChange = async (email: string) => {
|
||||
if (!getToken()) {
|
||||
return null;
|
||||
}
|
||||
await HTTPService.post(`${ENDPOINT}/users/ott`, {
|
||||
email,
|
||||
client: 'web',
|
||||
purpose: 'change',
|
||||
});
|
||||
};
|
||||
|
|
|
|||
164
packages/accounts/components/ChangeEmail.tsx
Normal file
164
packages/accounts/components/ChangeEmail.tsx
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
import { Formik, FormikHelpers } from 'formik';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import SubmitButton from '@ente/shared/components/SubmitButton';
|
||||
import router from 'next/router';
|
||||
import { changeEmail, sendOTTForEmailChange } from '@ente/accounts/api/user';
|
||||
import { getData, LS_KEYS, setData } from '@ente/shared/storage/localStorage';
|
||||
import { PAGES } from '@ente/accounts/constants/pages';
|
||||
import { Alert, Box, TextField } from '@mui/material';
|
||||
import { VerticallyCentered } from '@ente/shared/components/Container';
|
||||
import LinkButton from '@ente/shared/components/LinkButton';
|
||||
import FormPaperFooter from '@ente/shared/components/Form/FormPaper/Footer';
|
||||
import { sleep } from '@ente/shared/utils';
|
||||
import { Trans } from 'react-i18next';
|
||||
import { t } from 'i18next';
|
||||
|
||||
interface formValues {
|
||||
email: string;
|
||||
ott?: string;
|
||||
}
|
||||
|
||||
function ChangeEmailForm() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [ottInputVisible, setShowOttInputVisibility] = useState(false);
|
||||
const ottInputRef = useRef(null);
|
||||
const [email, setEmail] = useState(null);
|
||||
const [showMessage, setShowMessage] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const requestOTT = async (
|
||||
{ email }: formValues,
|
||||
{ setFieldError }: FormikHelpers<formValues>
|
||||
) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await sendOTTForEmailChange(email);
|
||||
setEmail(email);
|
||||
setShowOttInputVisibility(true);
|
||||
setShowMessage(true);
|
||||
setTimeout(() => {
|
||||
ottInputRef.current?.focus();
|
||||
}, 250);
|
||||
} catch (e) {
|
||||
setFieldError('email', t('EMAIl_ALREADY_OWNED'));
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const requestEmailChange = async (
|
||||
{ email, ott }: formValues,
|
||||
{ setFieldError }: FormikHelpers<formValues>
|
||||
) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await changeEmail(email, ott);
|
||||
setData(LS_KEYS.USER, { ...getData(LS_KEYS.USER), email });
|
||||
setLoading(false);
|
||||
setSuccess(true);
|
||||
await sleep(1000);
|
||||
router.push(PAGES.GALLERY);
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
setFieldError('ott', t('INCORRECT_CODE'));
|
||||
}
|
||||
};
|
||||
|
||||
const goToGallery = () => router.push(PAGES.GALLERY);
|
||||
|
||||
return (
|
||||
<Formik<formValues>
|
||||
initialValues={{ email: '' }}
|
||||
validationSchema={Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email(t('EMAIL_ERROR'))
|
||||
.required(t('REQUIRED')),
|
||||
ott: ottInputVisible && Yup.string().required(t('REQUIRED')),
|
||||
})}
|
||||
validateOnChange={false}
|
||||
validateOnBlur={false}
|
||||
onSubmit={!ottInputVisible ? requestOTT : requestEmailChange}>
|
||||
{({ values, errors, handleChange, handleSubmit }) => (
|
||||
<>
|
||||
{showMessage && (
|
||||
<Alert
|
||||
color="success"
|
||||
onClose={() => setShowMessage(false)}>
|
||||
<Trans
|
||||
i18nKey="EMAIL_SENT"
|
||||
components={{
|
||||
a: (
|
||||
<Box
|
||||
color="text.muted"
|
||||
component={'span'}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
values={{ email }}
|
||||
/>
|
||||
</Alert>
|
||||
)}
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
<VerticallyCentered>
|
||||
<TextField
|
||||
fullWidth
|
||||
InputProps={{
|
||||
readOnly: ottInputVisible,
|
||||
}}
|
||||
type="email"
|
||||
label={t('ENTER_EMAIL')}
|
||||
value={values.email}
|
||||
onChange={handleChange('email')}
|
||||
error={Boolean(errors.email)}
|
||||
helperText={errors.email}
|
||||
autoFocus
|
||||
disabled={loading}
|
||||
/>
|
||||
{ottInputVisible && (
|
||||
<TextField
|
||||
fullWidth
|
||||
type="text"
|
||||
label={t('ENTER_OTT')}
|
||||
value={values.ott}
|
||||
onChange={handleChange('ott')}
|
||||
error={Boolean(errors.ott)}
|
||||
helperText={errors.ott}
|
||||
disabled={loading}
|
||||
/>
|
||||
)}
|
||||
<SubmitButton
|
||||
success={success}
|
||||
sx={{ mt: 2 }}
|
||||
loading={loading}
|
||||
buttonText={
|
||||
!ottInputVisible
|
||||
? t('SEND_OTT')
|
||||
: t('VERIFY')
|
||||
}
|
||||
/>
|
||||
</VerticallyCentered>
|
||||
</form>
|
||||
|
||||
<FormPaperFooter
|
||||
style={{
|
||||
justifyContent: ottInputVisible && 'space-between',
|
||||
}}>
|
||||
{ottInputVisible && (
|
||||
<LinkButton
|
||||
onClick={() =>
|
||||
setShowOttInputVisibility(false)
|
||||
}>
|
||||
{t('CHANGE_EMAIL')}?
|
||||
</LinkButton>
|
||||
)}
|
||||
<LinkButton onClick={goToGallery}>
|
||||
{t('GO_BACK')}
|
||||
</LinkButton>
|
||||
</FormPaperFooter>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChangeEmailForm;
|
||||
30
packages/accounts/pages/change-email.tsx
Normal file
30
packages/accounts/pages/change-email.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { VerticallyCentered } from '@ente/shared/components/Container';
|
||||
import React, { useEffect } from 'react';
|
||||
import { t } from 'i18next';
|
||||
|
||||
import ChangeEmailForm from '@ente/accounts/components/ChangeEmail';
|
||||
import { PAGES } from '@ente/accounts/constants/pages';
|
||||
import { getData, LS_KEYS } from '@ente/shared/storage/localStorage';
|
||||
import FormPaper from '@ente/shared/components/Form/FormPaper';
|
||||
import FormPaperTitle from '@ente/shared/components/Form/FormPaper/Title';
|
||||
import { PageProps } from '@ente/shared/apps/types';
|
||||
|
||||
function ChangeEmailPage({ router }: PageProps) {
|
||||
useEffect(() => {
|
||||
const user = getData(LS_KEYS.USER);
|
||||
if (!user?.token) {
|
||||
router.push(PAGES.ROOT);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<VerticallyCentered>
|
||||
<FormPaper>
|
||||
<FormPaperTitle>{t('CHANGE_EMAIL')}</FormPaperTitle>
|
||||
<ChangeEmailForm />
|
||||
</FormPaper>
|
||||
</VerticallyCentered>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChangeEmailPage;
|
||||
Loading…
Reference in a new issue