added verify two factor page and component

src/components/VerifyTwoFactor.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Formik, FormikHelpers } from 'formik';
+import router from 'next/router';
+import { DeadCenter } from 'pages/gallery';
+import React, { useState } from 'react';
+import { Form, FormControl } from 'react-bootstrap';
+import OtpInput from 'react-otp-input';
+import constants from 'utils/strings/constants';
+import SubmitButton from './SubmitButton';
+
+interface formValues {
+    otp: string;
+}
+interface Props {
+    callback: any
+    back: any
+    buttonText: string;
+}
+
+export default function VerifyTwoFactor(props: Props) {
+    const [waiting, setWaiting] = useState(false);
+
+    const submitForm = async (
+        { otp }: formValues,
+        { setFieldError }: FormikHelpers<formValues>,
+    ) => {
+        try {
+            setWaiting(true);
+            await props.callback(otp);
+            router.push('/gallery');
+        } catch (e) {
+            setFieldError('otp', `${constants.UNKNOWN_ERROR} ${e.message}`);
+        }
+        setWaiting(false);
+    };
+    return (
+        <>
+            <p style={{ marginBottom: '30px' }}>enter the 6-digit code from your authenticator app.</p>
+            <Formik<formValues>
+                initialValues={{ otp: '' }}
+                validateOnChange={false}
+                validateOnBlur={false}
+                onSubmit={submitForm}
+            >
+                {({
+                    values,
+                    errors,
+                    handleChange,
+                    handleSubmit,
+                }) => (
+                    <Form noValidate onSubmit={handleSubmit} style={{ width: '100%' }}>
+                        <Form.Group controlId="formBasicEmail">
+                            <DeadCenter>
+                                <OtpInput value={values.otp}
+                                    onChange={handleChange('otp')}
+                                    numInputs={6}
+                                    separator={'-'}
+                                    isInputNum
+                                    className={'otp-input'}
+                                />
+                                {errors.otp &&
+                                    <div style={{ display: 'block' }} className="invalid-feedback">{constants.INCORRECT_CODE}</div>
+                                }
+                            </DeadCenter>
+                        </Form.Group>
+                        <SubmitButton
+                            buttonText={props.buttonText}
+                            loading={waiting}
+                            disabled={values.otp.length < 6}
+                        />
+                        <br />
+                    </Form>
+                )}
+            </Formik>
+
+
+        </>
+    );
+}
+
+

src/pages/_app.tsx

@@ -317,6 +317,11 @@ const GlobalStyles = createGlobalStyle`
     .carousel-indicators .active {
         background-color: #2dc262;
     }
+    div.otp-input input {
+        width: 2em !important;
+        height: 3em;
+        margin: 0 10px;
+    }
 `;
 
 export const LogoImage = styled.img`

src/pages/twoFactor/verify/index.tsx

@@ -0,0 +1,40 @@
+import Container from 'components/Container';
+import LogoImg from 'components/LogoImg';
+import VerifyTwoFactor from 'components/VerifyTwoFactor';
+import router from 'next/router';
+import React from 'react';
+import { Button, Card } from 'react-bootstrap';
+import constants from 'utils/strings/constants';
+
+export default function Home() {
+    return (
+        <Container>
+            <Card style={{ minWidth: '300px' }} className="text-center">
+                <Card.Body style={{ padding: '40px 30px', minHeight: '400px' }}>
+                    <Card.Title style={{ marginBottom: '32px' }}>
+                        <LogoImg src='/icon.svg' />
+                        {constants.TWO_FACTOR_AUTHENTICATION}
+                    </Card.Title>
+                    <VerifyTwoFactor callback={() => null} back={router.back} buttonText={constants.VERIFY} />
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            marginTop: '12px',
+                        }}
+                    >
+                        <Button
+                            variant="link"
+                            onClick={() => router.push('/recover')}
+                        >
+                            {constants.LOST_DEVICE}
+                        </Button>
+                        <Button variant="link" onClick={router.back}>
+                            {constants.GO_BACK}
+                        </Button>
+                    </div>
+                </Card.Body>
+            </Card>
+        </Container>
+    );
+}

src/utils/strings/englishConstants.tsx

@@ -404,6 +404,10 @@ const englishConstants = {
     TWO_FACTOR_AUTHENTICATION_MANUAL_CODE_INSTRUCTION: 'please enter this code in your favorite authenticator app',
     SCAN_QR_CODE: 'scan QR code instead',
     CONTINUE: 'continue',
+    BACK: 'back',
+    ENABLE: 'enable',
+    LOST_DEVICE: 'lost two factor device?',
+    INCORRECT_CODE: 'incorrect code',
 
 };