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

fix(web): add white padding around qrcode image (#2081) 

* fix(web): add white padding around qrcode image

Some qrcode readers are struggling to decode the qrcode because there is no clear border between the qrcode image and the page background in dark mode. This fix add a white padding so that the border is now obvious.

Fixes #1777.
pull/2084/head
Clément Michaud 2021-06-14 04:38:39 +02:00 committed by GitHub
parent 6de4f9ea61
commit 7b1f186753
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
View File

@ -20,7 +20,6 @@ const RegisterOneTimePassword = function () {
const style = useStyles(); const style = useStyles();
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
// The secret retrieved from the API is all is ok. // The secret retrieved from the API is all is ok.
const [secretURL, setSecretURL] = useState("empty"); const [secretURL, setSecretURL] = useState("empty");
const [secretBase32, setSecretBase32] = useState(undefined as string | undefined); const [secretBase32, setSecretBase32] = useState(undefined as string | undefined);
@ -86,9 +85,9 @@ const RegisterOneTimePassword = function () {
appleStoreLink={GoogleAuthenticator.appleStore} appleStoreLink={GoogleAuthenticator.appleStore}
/> />
</div> </div>
<div className={style.qrcodeContainer}> <div className={classnames(qrcodeFuzzyStyle, style.qrcodeContainer)}>
<Link href={secretURL}> <Link href={secretURL}>
<QRCode value={secretURL} className={classnames(qrcodeFuzzyStyle, style.qrcode)} size={256} /> <QRCode value={secretURL} className={style.qrcode} size={256} />
{!hasErrored && isLoading ? <CircularProgress className={style.loader} size={128} /> : null} {!hasErrored && isLoading ? <CircularProgress className={style.loader} size={128} /> : null}
{hasErrored ? <FontAwesomeIcon className={style.failureIcon} icon={faTimesCircle} /> : null} {hasErrored ? <FontAwesomeIcon className={style.failureIcon} icon={faTimesCircle} /> : null}
</Link> </Link>
@ -132,6 +131,8 @@ const useStyles = makeStyles((theme) => ({
qrcode: { qrcode: {
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
padding: theme.spacing(),
backgroundColor: "white",
}, },
fuzzy: { fuzzy: {
filter: "blur(10px)", filter: "blur(10px)",