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