fix two factor layout issue
This commit is contained in:
parent
dc3ca6a042
commit
a259ab5f99
|
@ -50,38 +50,43 @@ export default function VerifyTwoFactor(props: Props) {
|
||||||
validateOnBlur={false}
|
validateOnBlur={false}
|
||||||
onSubmit={submitForm}>
|
onSubmit={submitForm}>
|
||||||
{({ values, errors, handleChange, handleSubmit, submitForm }) => (
|
{({ values, errors, handleChange, handleSubmit, submitForm }) => (
|
||||||
<form
|
<VerticallyCentered>
|
||||||
noValidate
|
<form noValidate onSubmit={handleSubmit}>
|
||||||
onSubmit={handleSubmit}
|
<Typography
|
||||||
style={{ width: '100%' }}>
|
mb={2}
|
||||||
<Typography mb={2} variant="body2" color="text.secondary">
|
variant="body2"
|
||||||
{constants.ENTER_TWO_FACTOR_OTP}
|
color="text.secondary">
|
||||||
</Typography>
|
{constants.ENTER_TWO_FACTOR_OTP}
|
||||||
<Box my={2}>
|
</Typography>
|
||||||
<OtpInput
|
<Box my={2}>
|
||||||
ref={otpInputRef}
|
<OtpInput
|
||||||
shouldAutoFocus
|
ref={otpInputRef}
|
||||||
value={values.otp}
|
shouldAutoFocus
|
||||||
onChange={onChange(handleChange('otp'), submitForm)}
|
value={values.otp}
|
||||||
numInputs={6}
|
onChange={onChange(
|
||||||
separator={'-'}
|
handleChange('otp'),
|
||||||
isInputNum
|
submitForm
|
||||||
className={'otp-input'}
|
)}
|
||||||
|
numInputs={6}
|
||||||
|
separator={'-'}
|
||||||
|
isInputNum
|
||||||
|
className={'otp-input'}
|
||||||
|
/>
|
||||||
|
{errors.otp && (
|
||||||
|
<CenteredFlex sx={{ mt: 1 }}>
|
||||||
|
<InvalidInputMessage>
|
||||||
|
{constants.INCORRECT_CODE}
|
||||||
|
</InvalidInputMessage>
|
||||||
|
</CenteredFlex>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<SubmitButton
|
||||||
|
buttonText={props.buttonText}
|
||||||
|
loading={waiting}
|
||||||
|
disabled={values.otp.length < 6}
|
||||||
/>
|
/>
|
||||||
{errors.otp && (
|
</form>
|
||||||
<CenteredFlex sx={{ mt: 1 }}>
|
</VerticallyCentered>
|
||||||
<InvalidInputMessage>
|
|
||||||
{constants.INCORRECT_CODE}
|
|
||||||
</InvalidInputMessage>
|
|
||||||
</CenteredFlex>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<SubmitButton
|
|
||||||
buttonText={props.buttonText}
|
|
||||||
loading={waiting}
|
|
||||||
disabled={values.otp.length < 6}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
);
|
);
|
||||||
|
|
|
@ -55,7 +55,7 @@ export default function Home() {
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<FormContainer>
|
<FormContainer>
|
||||||
<FormPaper sx={{ maxWidth: '400px' }}>
|
<FormPaper sx={{ maxWidth: '410px' }}>
|
||||||
<FormTitle>{constants.TWO_FACTOR}</FormTitle>
|
<FormTitle>{constants.TWO_FACTOR}</FormTitle>
|
||||||
<VerifyTwoFactor
|
<VerifyTwoFactor
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
|
|
Loading…
Reference in a new issue