update change email

src/components/ChangeEmail.tsx

@@ -1,31 +1,22 @@
 import { Formik, FormikHelpers } from 'formik';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Button, Col, Form, FormControl } from 'react-bootstrap';
 import * as Yup from 'yup';
 import constants from 'utils/strings/constants';
 import SubmitButton from 'components/SubmitButton';
 import router from 'next/router';
 import { changeEmail, getOTTForEmailChange } from 'services/userService';
-import styled from 'styled-components';
 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 Container from './Container';
+import LinkButton from './pages/gallery/LinkButton';
 
 interface formValues {
     email: string;
     ott?: string;
 }
 
-const EmailRow = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    border: 1px solid grey;
-    margin-bottom: 19px;
-    align-items: center;
-    text-align: left;
-    color: #fff;
-`;
-
 interface Props {
     showMessage: (value: boolean) => void;
     setEmail: (email: string) => void;
@@ -33,16 +24,9 @@ interface Props {
 function ChangeEmailForm(props: Props) {
     const [loading, setLoading] = useState(false);
     const [ottInputVisible, setShowOttInputVisibility] = useState(false);
-    const emailInputElement = useRef(null);
     const ottInputRef = useRef(null);
     const appContext = useContext(AppContext);
 
-    useEffect(() => {
-        setTimeout(() => {
-            emailInputElement.current?.focus();
-        }, 250);
-    }, []);
-
     useEffect(() => {
         if (!ottInputVisible) {
             props.showMessage(false);
@@ -98,76 +82,53 @@ function ChangeEmailForm(props: Props) {
             validateOnChange={false}
             validateOnBlur={false}
             onSubmit={!ottInputVisible ? requestOTT : requestEmailChange}>
-            {({ values, errors, touched, handleChange, handleSubmit }) => (
-                <Form noValidate onSubmit={handleSubmit}>
-                    {!ottInputVisible ? (
-                        <Form.Group controlId="formBasicEmail">
-                            <Form.Control
-                                ref={emailInputElement}
+            {({ values, errors, handleChange, handleSubmit }) => (
+                <>
+                    <form
+                        noValidate
+                        style={{ width: '100%' }}
+                        onSubmit={handleSubmit}>
+                        <Container>
+                            <TextField
+                                fullWidth
+                                InputProps={{
+                                    readOnly: ottInputVisible,
+                                }}
+                                margin="normal"
                                 type="email"
-                                placeholder={constants.ENTER_EMAIL}
+                                label={constants.ENTER_EMAIL}
                                 value={values.email}
                                 onChange={handleChange('email')}
-                                isInvalid={Boolean(
-                                    touched.email && errors.email
-                                )}
+                                error={Boolean(errors.email)}
+                                helperText={errors.email}
                                 autoFocus
                                 disabled={loading}
                             />
-                            <FormControl.Feedback type="invalid">
-                                {errors.email}
-                            </FormControl.Feedback>
-                        </Form.Group>
-                    ) : (
-                        <>
-                            <EmailRow>
-                                <Col xs="8">{values.email}</Col>
-                                <Col xs="4">
-                                    <Button
-                                        variant="link"
-                                        onClick={() =>
-                                            setShowOttInputVisibility(false)
-                                        }>
-                                        {constants.CHANGE}
-                                    </Button>
-                                </Col>
-                            </EmailRow>
-                            <Form.Group controlId="formBasicEmail">
-                                <Form.Control
-                                    ref={ottInputRef}
+                            {ottInputVisible && (
+                                <TextField
+                                    fullWidth
                                     type="text"
-                                    placeholder={constants.ENTER_OTT}
+                                    label={constants.ENTER_OTT}
                                     value={values.ott}
                                     onChange={handleChange('ott')}
-                                    isInvalid={Boolean(
-                                        touched.ott && errors.ott
-                                    )}
+                                    error={Boolean(errors.ott)}
+                                    helperText={errors.ott}
                                     disabled={loading}
                                 />
-                                <FormControl.Feedback type="invalid">
-                                    {errors.ott}
-                                </FormControl.Feedback>
-                            </Form.Group>
-                        </>
-                    )}
+                            )}
 
-                    <SubmitButton
-                        buttonText={
-                            !ottInputVisible
-                                ? constants.SEND_OTT
-                                : constants.VERIFY
-                        }
-                        loading={loading}
-                    />
-                    <br />
-                    <Button
-                        block
-                        variant="link"
-                        className="text-center"
-                        onClick={router.back}>
-                        {constants.GO_BACK}
-                    </Button>
-                </Form>
+                            <SubmitButton loading={loading}>
+                                {!ottInputVisible
+                                    ? constants.SEND_OTT
+                                    : constants.VERIFY}
+                            </SubmitButton>
+                        </Container>
+                    </form>
+                    <LinkButton
+                        onClick={() => setShowOttInputVisibility(false)}>
+                        {constants.CHANGE_EMAIL}?
+                    </LinkButton>
+                </>
             )}
         </Formik>
     );

src/components/EnteCard.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Card } from 'react-bootstrap';
-
-type Size = 'sm' | 'md' | 'lg';
-
-const EnteCard = ({
-    size,
-    children,
-    style,
-}: {
-    size: Size;
-    children?: any;
-    style?: any;
-}) => {
-    let minWidth: string;
-    let padding: string;
-    switch (size) {
-        case 'sm':
-            minWidth = '320px';
-            padding = '0px';
-            break;
-        case 'md':
-            minWidth = '460px';
-            padding = '10px';
-            break;
-
-        default:
-            minWidth = '480px';
-            padding = '10px';
-            break;
-    }
-    return (
-        <Card style={{ minWidth, padding, ...style }} className="text-center">
-            {children}
-        </Card>
-    );
-};
-
-export default EnteCard;

src/components/SubmitButton.tsx

@@ -15,7 +15,7 @@ const SubmitButton: FC<ButtonProps<'button', Props>> = ({
 }: Props) => {
     return (
         <Button
-            sx={{ mt: 2 }}
+            sx={{ my: 2 }}
             variant="contained"
             color="success"
             type="submit"

src/pages/change-email/index.tsx

@@ -1,43 +1,35 @@
 import Container from 'components/Container';
 import LogoImg from 'components/LogoImg';
 import React, { useEffect, useState } from 'react';
-import { Alert, Card } from 'react-bootstrap';
+import { Alert } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 import router from 'next/router';
-import { getToken } from 'utils/common/key';
-import EnteSpinner from 'components/EnteSpinner';
 import ChangeEmailForm from 'components/ChangeEmail';
-import EnteCard from 'components/EnteCard';
 import { PAGES } from 'constants/pages';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
+import { Box, Card, CardContent } from '@mui/material';
 
 function ChangeEmailPage() {
-    const [email, setEmail] = useState('');
-    const [waiting, setWaiting] = useState(true);
+    const [email, setEmail] = useState(null);
     const [showMessage, setShowMessage] = useState(false);
     const [showBigDialog, setShowBigDialog] = useState(false);
 
     useEffect(() => {
-        const token = getToken();
-        if (!token) {
+        const user = getData(LS_KEYS.USER);
+        if (!user?.token) {
             router.push(PAGES.ROOT);
-            return;
         }
-        setWaiting(false);
     }, []);
 
     return (
         <Container>
-            {waiting ? (
-                <EnteSpinner>
-                    <span className="sr-only">Loading...</span>
-                </EnteSpinner>
-            ) : (
-                <EnteCard size={showBigDialog ? 'md' : 'sm'}>
-                    <Card.Body style={{ padding: '40px 30px' }}>
-                        <Card.Title style={{ marginBottom: '32px' }}>
+            <Card sx={{ minWidth: showBigDialog ? '460px' : '320px' }}>
+                <CardContent>
+                    <Container disableGutters sx={{ py: 2 }}>
+                        <Box mb={2}>
                             <LogoImg src="/icon.svg" />
                             {constants.CHANGE_EMAIL}
-                        </Card.Title>
+                        </Box>
                         <Alert
                             variant="success"
                             show={showMessage}
@@ -54,9 +46,9 @@ function ChangeEmailPage() {
                             }}
                             setEmail={setEmail}
                         />
-                    </Card.Body>
-                </EnteCard>
-            )}
+                    </Container>
+                </CardContent>
+            </Card>
         </Container>
     );
 }