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} 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>
); );

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

@ -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}