beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update change email form

Browse source
This commit is contained in:
Abhinav 2022-05-20 19:26:21 +05:30
parent 7a64c45fd1
commit 8ef740e02e
3 changed files with 48 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/ChangeEmail.tsx
View file

@ -1,5 +1,5 @@
import { Formik, FormikHelpers } from 'formik';
import React, { useContext, useEffect, useRef, useState } from 'react';
import React, { useContext, useRef, useState } from 'react';
import * as Yup from 'yup';
import constants from 'utils/strings/constants';
import SubmitButton from 'components/SubmitButton';
@ -8,30 +8,24 @@ import { changeEmail, getOTTForEmailChange } from 'services/userService';
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
import { PAGES } from 'constants/pages';
import { TextField } from '@mui/material';
import { Divider, TextField } from '@mui/material';
import Container from './Container';
import LinkButton from './pages/gallery/LinkButton';
import { Alert } from 'react-bootstrap';
import FormPaperFooter from './Form/FormPaper/Footer';
interface formValues {
email: string;
ott?: string;
}
interface Props {
showMessage: (value: boolean) => void;
setEmail: (email: string) => void;
}
function ChangeEmailForm(props: Props) {
function ChangeEmailForm() {
const [loading, setLoading] = useState(false);
const [ottInputVisible, setShowOttInputVisibility] = useState(false);
const ottInputRef = useRef(null);
const appContext = useContext(AppContext);
useEffect(() => {
if (!ottInputVisible) {
props.showMessage(false);
}
}, [ottInputVisible]);
const [email, setEmail] = useState(null);
const [showMessage, setShowMessage] = useState(false);
const requestOTT = async (
{ email }: formValues,
@ -40,9 +34,9 @@ function ChangeEmailForm(props: Props) {
try {
setLoading(true);
await getOTTForEmailChange(email);
props.setEmail(email);
setEmail(email);
setShowOttInputVisibility(true);
props.showMessage(true);
setShowMessage(true);
setTimeout(() => {
ottInputRef.current?.focus();
}, 250);
@ -71,6 +65,8 @@ function ChangeEmailForm(props: Props) {
setLoading(false);
};
const goToGallery = () => router.push(PAGES.GALLERY);
return (
<Formik<formValues>
initialValues={{ email: '' }}
@ -84,6 +80,15 @@ function ChangeEmailForm(props: Props) {
onSubmit={!ottInputVisible ? requestOTT : requestEmailChange}>
{({ values, errors, handleChange, handleSubmit }) => (
<>
<Alert
variant="success"
show={showMessage}
style={{ paddingBottom: 0 }}
transition
dismissible
onClose={() => setShowMessage(false)}>
{constants.EMAIL_SENT({ email })}
</Alert>
<form
noValidate
style={{ width: '100%' }}
@ -117,6 +122,7 @@ function ChangeEmailForm(props: Props) {
/>
)}
<SubmitButton
sx={{ mt: 2 }}
loading={loading}
buttonText={
!ottInputVisible
@ -126,12 +132,23 @@ function ChangeEmailForm(props: Props) {
/>
</Container>
</form>
{ottInputVisible && (
<LinkButton
onClick={() => setShowOttInputVisibility(false)}>
{constants.CHANGE_EMAIL}?
<Divider />
<FormPaperFooter
style={{
justifyContent: ottInputVisible && 'space-between',
}}>
{ottInputVisible && (
<LinkButton
onClick={() =>
setShowOttInputVisibility(false)
}>
{constants.CHANGE_EMAIL}?
</LinkButton>
)}
<LinkButton onClick={goToGallery}>
{constants.GO_BACK}
</LinkButton>
)}
</FormPaperFooter>
</>
)}
</Formik>

1
src/components/Form/FormPaper/index.tsx
View file

@ -3,6 +3,7 @@ import { Paper, styled } from '@mui/material';
const FormPaper = styled(Paper)(({ theme }) => ({
padding: theme.spacing(4, 2),
maxWidth: '360px',
width: '100%',
textAlign: 'left',
}));
export default FormPaper;

49
src/pages/change-email/index.tsx
View file

@ -1,20 +1,15 @@
import VerticallyCentered from 'components/Container';
import LogoImg from 'components/LogoImg';
import React, { useEffect, useState } from 'react';
import { Alert } from 'react-bootstrap';
import React, { useEffect } from 'react';
import constants from 'utils/strings/constants';
import router from 'next/router';
import ChangeEmailForm from 'components/ChangeEmail';
import { PAGES } from 'constants/pages';
import { getData, LS_KEYS } from 'utils/storage/localStorage';
import { Box, Card, CardContent } from '@mui/material';
import LinkButton from 'components/pages/gallery/LinkButton';
import { Box } from '@mui/material';
import FormPaper from 'components/Form/FormPaper';
function ChangeEmailPage() {
const [email, setEmail] = useState(null);
const [showMessage, setShowMessage] = useState(false);
const [showBigDialog, setShowBigDialog] = useState(false);
useEffect(() => {
const user = getData(LS_KEYS.USER);
if (!user?.token) {
@ -22,39 +17,15 @@ function ChangeEmailPage() {
}
}, []);
const goToGallery = () => router.push(PAGES.GALLERY);
return (
<VerticallyCentered>
<Card sx={{ minWidth: showBigDialog ? '460px' : '320px' }}>
<CardContent>
<VerticallyCentered disableGutters sx={{ py: 2 }}>
<Box mb={2}>
<LogoImg src="/icon.svg" />
{constants.CHANGE_EMAIL}
</Box>
<Alert
variant="success"
show={showMessage}
style={{ paddingBottom: 0 }}
transition
dismissible
onClose={() => setShowMessage(false)}>
{constants.EMAIL_SENT({ email })}
</Alert>
<ChangeEmailForm
showMessage={(value) => {
setShowMessage(value);
setShowBigDialog(value);
}}
setEmail={setEmail}
/>
<LinkButton onClick={goToGallery}>
{constants.GO_BACK}
</LinkButton>
</VerticallyCentered>
</CardContent>
</Card>
<FormPaper>
<Box mb={2}>
<LogoImg src="/icon.svg" />
{constants.CHANGE_EMAIL}
</Box>
<ChangeEmailForm />
</FormPaper>
</VerticallyCentered>
);
}