remove problem causing dupliactes

apps/photos/src/components/TwoFactor/InvalidInputMessage.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { TypographyProps, Typography } from '@mui/material';
-import { FC } from 'react';
-
-const InvalidInputMessage: FC<TypographyProps> = (props) => {
-    return (
-        <Typography
-            variant="mini"
-            sx={{
-                color: (theme) => theme.colors.danger.A700,
-            }}
-            {...props}>
-            {props.children}
-        </Typography>
-    );
-};
-
-export default InvalidInputMessage;

apps/photos/src/components/TwoFactor/Setup.tsx

@@ -1,33 +0,0 @@
-import { VerticallyCentered } from 'components/Container';
-import { SetupMode } from 'pages/two-factor/setup';
-import SetupManualMode from 'pages/two-factor/setup/ManualMode';
-import SetupQRMode from 'pages/two-factor/setup/QRMode';
-import React, { useState } from 'react';
-import { TwoFactorSecret } from 'types/user';
-
-interface Iprops {
-    twoFactorSecret: TwoFactorSecret;
-}
-export function TwoFactorSetup({ twoFactorSecret }: Iprops) {
-    const [setupMode, setSetupMode] = useState<SetupMode>(SetupMode.QR_CODE);
-
-    const changeToManualMode = () => setSetupMode(SetupMode.MANUAL_CODE);
-
-    const changeToQRMode = () => setSetupMode(SetupMode.QR_CODE);
-
-    return (
-        <VerticallyCentered sx={{ mb: 3 }}>
-            {setupMode === SetupMode.QR_CODE ? (
-                <SetupQRMode
-                    twoFactorSecret={twoFactorSecret}
-                    changeToManualMode={changeToManualMode}
-                />
-            ) : (
-                <SetupManualMode
-                    twoFactorSecret={twoFactorSecret}
-                    changeToQRMode={changeToQRMode}
-                />
-            )}
-        </VerticallyCentered>
-    );
-}

apps/photos/src/components/TwoFactor/VerifyForm.tsx

@@ -1,106 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Formik, FormikHelpers } from 'formik';
-import React, { FC, useRef, useState } from 'react';
-import OtpInput from 'react-otp-input';
-import { t } from 'i18next';
-
-import SubmitButton from 'components/SubmitButton';
-import { VerticallyCentered, CenteredFlex } from 'components/Container';
-import { Box, Typography, TypographyProps } from '@mui/material';
-import InvalidInputMessage from './InvalidInputMessage';
-import { sleep } from 'utils/common';
-
-interface formValues {
-    otp: string;
-}
-interface Props {
-    onSubmit: VerifyTwoFactorCallback;
-    buttonText: string;
-}
-
-export type VerifyTwoFactorCallback = (
-    otp: string,
-    markSuccessful: () => Promise<void>
-) => Promise<void>;
-
-export default function VerifyTwoFactor(props: Props) {
-    const [waiting, setWaiting] = useState(false);
-    const otpInputRef = useRef(null);
-    const [success, setSuccess] = useState(false);
-
-    const markSuccessful = async () => {
-        setWaiting(false);
-        setSuccess(true);
-        await sleep(1000);
-    };
-
-    const submitForm = async (
-        { otp }: formValues,
-        { setFieldError, resetForm }: FormikHelpers<formValues>
-    ) => {
-        try {
-            setWaiting(true);
-            await props.onSubmit(otp, markSuccessful);
-        } catch (e) {
-            resetForm();
-            for (let i = 0; i < 6; i++) {
-                otpInputRef.current?.focusPrevInput();
-            }
-            setFieldError('otp', `${t('UNKNOWN_ERROR')} ${e.message}`);
-        }
-        setWaiting(false);
-    };
-
-    const onChange =
-        (callback: Function, triggerSubmit: Function) => (otp: string) => {
-            callback(otp);
-            if (otp.length === 6) {
-                triggerSubmit(otp);
-            }
-        };
-    return (
-        <Formik<formValues>
-            initialValues={{ otp: '' }}
-            validateOnChange={false}
-            validateOnBlur={false}
-            onSubmit={submitForm}>
-            {({ values, errors, handleChange, handleSubmit, submitForm }) => (
-                <VerticallyCentered>
-                    <form noValidate onSubmit={handleSubmit}>
-                        <Typography mb={2} variant="small" color="text.muted">
-                            {t('ENTER_TWO_FACTOR_OTP')}
-                        </Typography>
-                        <Box my={2}>
-                            <OtpInput
-                                ref={otpInputRef}
-                                shouldAutoFocus
-                                value={values.otp}
-                                onChange={onChange(
-                                    handleChange('otp'),
-                                    submitForm
-                                )}
-                                numInputs={6}
-                                separator={'-'}
-                                isInputNum
-                                className={'otp-input'}
-                            />
-                            {errors.otp && (
-                                <CenteredFlex sx={{ mt: 1 }}>
-                                    <InvalidInputMessage>
-                                        {t('INCORRECT_CODE')}
-                                    </InvalidInputMessage>
-                                </CenteredFlex>
-                            )}
-                        </Box>
-                        <SubmitButton
-                            buttonText={props.buttonText}
-                            loading={waiting}
-                            success={success}
-                            disabled={values.otp.length < 6}
-                        />
-                    </form>
-                </VerticallyCentered>
-            )}
-        </Formik>
-    );
-}

apps/photos/src/components/TwoFactor/styledComponents.ts

@@ -1,18 +0,0 @@
-import { VerticallyCentered } from 'components/Container';
-import { styled } from '@mui/material';
-export const QRCode = styled('img')(
-    ({ theme }) => `
-    height: 200px;
-    width: 200px;
-    margin: ${theme.spacing(2)};
-`
-);
-
-export const LoadingQRCode = styled(VerticallyCentered)(
-    ({ theme }) => `
-    width:200px;
-    aspect-ratio:1;
-    border: 1px solid ${theme.palette.grey.A200};
-    margin: ${theme.spacing(2)};
-    `
-);

apps/photos/src/pages/two-factor/setup/ManualMode.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Typography } from '@mui/material';
-import CodeBlock from 'components/CodeBlock';
-import { TwoFactorSecret } from 'types/user';
-import { t } from 'i18next';
-
-import LinkButton from 'components/pages/gallery/LinkButton';
-
-interface Iprops {
-    twoFactorSecret: TwoFactorSecret;
-    changeToQRMode: () => void;
-}
-export default function SetupManualMode({
-    twoFactorSecret,
-    changeToQRMode,
-}: Iprops) {
-    return (
-        <>
-            <Typography>{t('TWO_FACTOR_MANUAL_CODE_INSTRUCTION')}</Typography>
-            <CodeBlock code={twoFactorSecret?.secretCode} my={2} />
-            <LinkButton onClick={changeToQRMode}>
-                {t('SCAN_QR_CODE')}
-            </LinkButton>
-        </>
-    );
-}

apps/photos/src/pages/two-factor/setup/QRMode.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import EnteSpinner from 'components/EnteSpinner';
-import { TwoFactorSecret } from 'types/user';
-import { t } from 'i18next';
-
-import {
-    LoadingQRCode,
-    QRCode,
-} from '../../../components/TwoFactor/styledComponents';
-import { Typography } from '@mui/material';
-import LinkButton from 'components/pages/gallery/LinkButton';
-
-interface Iprops {
-    twoFactorSecret: TwoFactorSecret;
-    changeToManualMode: () => void;
-}
-
-export default function SetupQRMode({
-    twoFactorSecret,
-    changeToManualMode,
-}: Iprops) {
-    return (
-        <>
-            <Typography>{t('TWO_FACTOR_QR_INSTRUCTION')}</Typography>
-            {!twoFactorSecret ? (
-                <LoadingQRCode>
-                    <EnteSpinner />
-                </LoadingQRCode>
-            ) : (
-                <QRCode
-                    src={`data:image/png;base64,${twoFactorSecret?.qrCode}`}
-                />
-            )}
-            <LinkButton onClick={changeToManualMode}>
-                {t('ENTER_CODE_MANUALLY')}
-            </LinkButton>
-        </>
-    );
-}