beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix two factor layout issue

Browse source
This commit is contained in:
Abhinav 2022-06-29 13:16:08 +05:30
parent dc3ca6a042
commit a259ab5f99
2 changed files with 37 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/TwoFactor/VerifyForm.tsx
View file

@ -50,38 +50,43 @@ export default function VerifyTwoFactor(props: Props) {
validateOnBlur={false}
onSubmit={submitForm}>
{({ values, errors, handleChange, handleSubmit, submitForm }) => (
<form
noValidate
onSubmit={handleSubmit}
style={{ width: '100%' }}>
<Typography mb={2} variant="body2" color="text.secondary">
{constants.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'}
<VerticallyCentered>
<form noValidate onSubmit={handleSubmit}>
<Typography
mb={2}
variant="body2"
color="text.secondary">
{constants.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>
{constants.INCORRECT_CODE}
</InvalidInputMessage>
</CenteredFlex>
)}
</Box>
<SubmitButton
buttonText={props.buttonText}
loading={waiting}
disabled={values.otp.length < 6}
/>
{errors.otp && (
<CenteredFlex sx={{ mt: 1 }}>
<InvalidInputMessage>
{constants.INCORRECT_CODE}
</InvalidInputMessage>
</CenteredFlex>
)}
</Box>
<SubmitButton
buttonText={props.buttonText}
loading={waiting}
disabled={values.otp.length < 6}
/>
</form>
</form>
</VerticallyCentered>
)}
</Formik>
);

2
src/pages/two-factor/verify/index.tsx
View file

@ -55,7 +55,7 @@ export default function Home() {
};
return (
<FormContainer>
<FormPaper sx={{ maxWidth: '400px' }}>
<FormPaper sx={{ maxWidth: '410px' }}>
<FormTitle>{constants.TWO_FACTOR}</FormTitle>
<VerifyTwoFactor
onSubmit={onSubmit}