update change email form

src/components/ChangeEmail.tsx

@@ -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 {
+function ChangeEmailForm() {
-    showMessage: (value: boolean) => void;
-    setEmail: (email: string) => void;
-}
-function ChangeEmailForm(props: Props) {
     const [loading, setLoading] = useState(false);
     const [ottInputVisible, setShowOttInputVisibility] = useState(false);
     const ottInputRef = useRef(null);
     const appContext = useContext(AppContext);
-
+    const [email, setEmail] = useState(null);
-    useEffect(() => {
+    const [showMessage, setShowMessage] = useState(false);
-        if (!ottInputVisible) {
-            props.showMessage(false);
-        }
-    }, [ottInputVisible]);
 
     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 && (
+                    <Divider />
-                        <LinkButton
+                    <FormPaperFooter
-                            onClick={() => setShowOttInputVisibility(false)}>
+                        style={{
-                            {constants.CHANGE_EMAIL}?
+                            justifyContent: ottInputVisible && 'space-between',
+                        }}>
+                        {ottInputVisible && (
+                            <LinkButton
+                                onClick={() =>
+                                    setShowOttInputVisibility(false)
+                                }>
+                                {constants.CHANGE_EMAIL}?
+                            </LinkButton>
+                        )}
+                        <LinkButton onClick={goToGallery}>
+                            {constants.GO_BACK}
                         </LinkButton>
-                    )}
+                    </FormPaperFooter>
                 </>
             )}
         </Formik>

src/components/Form/FormPaper/index.tsx

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

src/pages/change-email/index.tsx

@@ -1,20 +1,15 @@
 import VerticallyCentered from 'components/Container';
 import LogoImg from 'components/LogoImg';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
-import { Alert } from 'react-bootstrap';
 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 { Box } from '@mui/material';
-import LinkButton from 'components/pages/gallery/LinkButton';
+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' }}>
+            <FormPaper>
-                <CardContent>
+                <Box mb={2}>
-                    <VerticallyCentered disableGutters sx={{ py: 2 }}>
+                    <LogoImg src="/icon.svg" />
-                        <Box mb={2}>
+                    {constants.CHANGE_EMAIL}
-                            <LogoImg src="/icon.svg" />
+                </Box>
-                            {constants.CHANGE_EMAIL}
+                <ChangeEmailForm />
-                        </Box>
+            </FormPaper>
-                        <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>
         </VerticallyCentered>
     );
 }