redesign change password

src/components/SetPasswordForm.tsx

@@ -1,27 +1,29 @@
 import React, { useState } from 'react';
 import Container from 'components/Container';
-import Card from 'react-bootstrap/Card';
-import Form from 'react-bootstrap/Form';
 import constants from 'utils/strings/constants';
 import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
-import Button from 'react-bootstrap/Button';
 import SubmitButton from './SubmitButton';
+import { TextField, Typography } from '@mui/material';
 
 interface Props {
-    callback: (passphrase: any, setFieldError: any) => Promise<void>;
+    callback: (
+        passphrase: string,
+        setFieldError: FormikHelpers<SetPasswordFormValues>['setFieldError']
+    ) => Promise<void>;
     buttonText: string;
     back: () => void;
 }
-interface formValues {
+export interface SetPasswordFormValues {
     passphrase: string;
     confirm: string;
 }
 function SetPasswordForm(props: Props) {
     const [loading, setLoading] = useState(false);
+
     const onSubmit = async (
-        values: formValues,
-        { setFieldError }: FormikHelpers<formValues>
+        values: SetPasswordFormValues,
+        { setFieldError }: FormikHelpers<SetPasswordFormValues>
     ) => {
         setLoading(true);
         try {
@@ -37,88 +39,61 @@ function SetPasswordForm(props: Props) {
             setLoading(false);
         }
     };
+
     return (
-        <Container>
-            <Card style={{ maxWidth: '540px', padding: '20px' }}>
-                <Card.Body>
-                    <div
-                        className="text-center"
-                        style={{ marginBottom: '40px' }}>
-                        <p>{constants.ENTER_ENC_PASSPHRASE}</p>
-                        {constants.PASSPHRASE_DISCLAIMER()}
-                    </div>
-                    <Formik<formValues>
-                        initialValues={{ passphrase: '', confirm: '' }}
-                        validationSchema={Yup.object().shape({
-                            passphrase: Yup.string().required(
-                                constants.REQUIRED
-                            ),
-                            confirm: Yup.string().required(constants.REQUIRED),
-                        })}
-                        validateOnChange={false}
-                        validateOnBlur={false}
-                        onSubmit={onSubmit}>
-                        {({
-                            values,
-                            touched,
-                            errors,
-                            handleChange,
-                            handleSubmit,
-                        }) => (
-                            <Form noValidate onSubmit={handleSubmit}>
-                                <Form.Group>
-                                    <Form.Control
-                                        type="password"
-                                        placeholder={constants.PASSPHRASE_HINT}
-                                        value={values.passphrase}
-                                        onChange={handleChange('passphrase')}
-                                        isInvalid={Boolean(
-                                            touched.passphrase &&
-                                                errors.passphrase
-                                        )}
-                                        autoFocus
-                                        disabled={loading}
-                                    />
-                                    <Form.Control.Feedback type="invalid">
-                                        {errors.passphrase}
-                                    </Form.Control.Feedback>
-                                </Form.Group>
-                                <Form.Group>
-                                    <Form.Control
-                                        type="password"
-                                        placeholder={
-                                            constants.RE_ENTER_PASSPHRASE
-                                        }
-                                        value={values.confirm}
-                                        onChange={handleChange('confirm')}
-                                        isInvalid={Boolean(
-                                            touched.confirm && errors.confirm
-                                        )}
-                                        disabled={loading}
-                                    />
-                                    <Form.Control.Feedback type="invalid">
-                                        {errors.confirm}
-                                    </Form.Control.Feedback>
-                                </Form.Group>
-                                <SubmitButton
-                                    buttonText={props.buttonText}
-                                    loading={loading}
-                                />
-                            </Form>
-                        )}
-                    </Formik>
-                    {props.back && (
-                        <div
-                            className="text-center"
-                            style={{ marginTop: '20px' }}>
-                            <Button variant="link" onClick={props.back}>
-                                {constants.GO_BACK}
-                            </Button>
-                        </div>
-                    )}
-                </Card.Body>
-            </Card>
-        </Container>
+        <Formik<SetPasswordFormValues>
+            initialValues={{ passphrase: '', confirm: '' }}
+            validationSchema={Yup.object().shape({
+                passphrase: Yup.string().required(constants.REQUIRED),
+                confirm: Yup.string().required(constants.REQUIRED),
+            })}
+            validateOnChange={false}
+            validateOnBlur={false}
+            onSubmit={onSubmit}>
+            {({ values, errors, handleChange, handleSubmit }) => (
+                <form
+                    style={{ width: '100%' }}
+                    noValidate
+                    onSubmit={handleSubmit}>
+                    <Container disableGutters>
+                        <Typography mb={2}>
+                            {constants.ENTER_ENC_PASSPHRASE}
+                        </Typography>
+                        <Typography mb={2}>
+                            {constants.PASSPHRASE_DISCLAIMER()}
+                        </Typography>
+                        <Container>
+                            <TextField
+                                margin="normal"
+                                fullWidth
+                                type="password"
+                                label={constants.PASSPHRASE_HINT}
+                                value={values.passphrase}
+                                onChange={handleChange('passphrase')}
+                                error={Boolean(errors.passphrase)}
+                                helperText={errors.passphrase}
+                                autoFocus
+                                disabled={loading}
+                            />
+                            <TextField
+                                fullWidth
+                                margin="normal"
+                                type="password"
+                                label={constants.RE_ENTER_PASSPHRASE}
+                                value={values.confirm}
+                                onChange={handleChange('confirm')}
+                                disabled={loading}
+                                error={Boolean(errors.confirm)}
+                                helperText={errors.confirm}
+                            />
+                            <SubmitButton loading={loading}>
+                                {props.buttonText}
+                            </SubmitButton>
+                        </Container>
+                    </Container>
+                </form>
+            )}
+        </Formik>
     );
 }
 export default SetPasswordForm;

src/components/SubmitButton.tsx

@@ -1,35 +1,29 @@
-import React from 'react';
-import { Button, Spinner } from 'react-bootstrap';
+import { Button, ButtonProps, CircularProgress } from '@mui/material';
+import React, { FC } from 'react';
 
 interface Props {
     loading: boolean;
-    buttonText: string;
+    children: any;
     inline?: any;
     disabled?: boolean;
 }
-const SubmitButton = ({ loading, buttonText, inline, disabled }: Props) => (
-    <Button
-        className="submitButton"
-        variant="outline-success"
-        type="submit"
-        block={!inline}
-        disabled={loading || disabled}
-        style={{ padding: '6px 1em' }}>
-        {loading ? (
-            <Spinner
-                as="span"
-                animation="border"
-                style={{
-                    width: '22px',
-                    height: '22px',
-                    borderWidth: '0.20em',
-                    color: '#51cd7c',
-                }}
-            />
-        ) : (
-            buttonText
-        )}
-    </Button>
-);
+const SubmitButton: FC<ButtonProps<'button', Props>> = ({
+    loading,
+    children,
+    inline,
+    disabled,
+}: Props) => {
+    return (
+        <Button
+            sx={{ mt: 2 }}
+            variant="contained"
+            color="success"
+            type="submit"
+            fullWidth={!inline}
+            disabled={loading || disabled}>
+            {loading ? <CircularProgress size={25} /> : children}
+        </Button>
+    );
+};
 
 export default SubmitButton;

src/pages/change-password/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import constants from 'utils/strings/constants';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
 import { useRouter } from 'next/router';
@@ -9,16 +9,21 @@ import CryptoWorker, {
 } from 'utils/crypto';
 import { getActualKey } from 'utils/common/key';
 import { setKeys } from 'services/userService';
-import SetPasswordForm from 'components/SetPasswordForm';
-import { AppContext } from 'pages/_app';
+import SetPasswordForm, {
+    SetPasswordFormValues,
+} from 'components/SetPasswordForm';
 import { SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { PAGES } from 'constants/pages';
 import { KEK, UpdatedKey } from 'types/user';
+import { FormikHelpers } from 'formik';
+import Container from 'components/Container';
+import { CardContent, Box, Card } from '@mui/material';
+import LogoImg from 'components/LogoImg';
+import LinkButton from 'components/pages/gallery/LinkButton';
 
-export default function Generate() {
+export default function ChangePassword() {
     const [token, setToken] = useState<string>();
     const router = useRouter();
-    const appContext = useContext(AppContext);
 
     useEffect(() => {
         const user = getData(LS_KEYS.USER);
@@ -27,10 +32,12 @@ export default function Generate() {
         } else {
             setToken(user.token);
         }
-        appContext.showNavBar(true);
     }, []);
 
-    const onSubmit = async (passphrase, setFieldError) => {
+    const onSubmit = async (
+        passphrase: string,
+        setFieldError: FormikHelpers<SetPasswordFormValues>['setFieldError']
+    ) => {
         const cryptoWorker = await new CryptoWorker();
         const key: string = await getActualKey();
         const keyAttributes = getData(LS_KEYS.KEY_ATTRIBUTES);
@@ -64,19 +71,36 @@ export default function Generate() {
         await SaveKeyInSessionStore(SESSION_KEYS.ENCRYPTION_KEY, key);
         redirectToGallery();
     };
+
     const redirectToGallery = () => {
         setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true });
         router.push(PAGES.GALLERY);
     };
+
     return (
-        <SetPasswordForm
-            callback={onSubmit}
-            buttonText={constants.CHANGE_PASSWORD}
-            back={
-                getData(LS_KEYS.SHOW_BACK_BUTTON)?.value
-                    ? redirectToGallery
-                    : null
-            }
-        />
+        <Container>
+            <Card sx={{ maxWidth: '520px' }}>
+                <CardContent>
+                    <Container disableGutters sx={{ pt: 3 }}>
+                        <Box mb={4}>
+                            <LogoImg src="/icon.svg" />
+                            {constants.CHANGE_PASSWORD}
+                        </Box>
+                        <SetPasswordForm
+                            callback={onSubmit}
+                            buttonText={constants.CHANGE_PASSWORD}
+                            back={
+                                getData(LS_KEYS.SHOW_BACK_BUTTON)?.value
+                                    ? redirectToGallery
+                                    : null
+                            }
+                        />
+                        <LinkButton sx={{ mt: 2 }} onClick={router.back}>
+                            {constants.GO_BACK}
+                        </LinkButton>
+                    </Container>
+                </CardContent>
+            </Card>
+        </Container>
     );
 }