RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(web): fix otp input box with themes (#1723) 

#1584 introduced a regression due to the way layouts are addressed with [CSS normalization](https://material-ui.com/components/css-baseline/#layout).

This PR ensures that the OTP input box will remain a `content-box` to avoid any text display and box sizing issues caused by padding.

The OTP input has also been changed to only accept numbers.

Fixes #1720.
pull/1725/head
Amir Zarrinkafsh 2021-02-13 15:31:57 +11:00 committed by GitHub
parent 361705738a
commit 2502b40cd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/views/LoginPortal/SecondFactor/OTPDial.tsx
View File

@ -27,6 +27,7 @@ const OTPDial = function (props: Props) {
value={props.passcode} value={props.passcode}
numInputs={6} numInputs={6}
isDisabled={props.state === State.InProgress || props.state === State.Success} isDisabled={props.state === State.InProgress || props.state === State.Success}
isInputNum
hasErrored={props.state === State.Failure} hasErrored={props.state === State.Failure}
inputStyle={classnames(style.otpDigitInput, props.state === State.Failure ? style.inputError : "")} inputStyle={classnames(style.otpDigitInput, props.state === State.Failure ? style.inputError : "")}
/> />
@ -48,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
}, },
otpDigitInput: { otpDigitInput: {
boxSizing: "content-box",
padding: theme.spacing(), padding: theme.spacing(),
marginLeft: theme.spacing(0.5), marginLeft: theme.spacing(0.5),
marginRight: theme.spacing(0.5), marginRight: theme.spacing(0.5),