remove problem causing dupliactes
This commit is contained in:
Abhinav
parent
e4ea1d9f18
commit
ed40bd6bfa
6 changed files with 0 additions and 240 deletions
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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)};
|
||||
`
|
||||
);
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue