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

web: fix layouts

feat-otp-email-verify
James Elliott 2023-03-20 06:21:31 +11:00
parent a1351b1473
commit ab2c76d482
No known key found for this signature in database
GPG Key ID: 0F1C4A096E857E49
1 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web/src/views/Settings/TwoFactorAuthentication/TOTPRegisterDialogController.tsx
View File

@ -43,7 +43,7 @@ import { getTOTPOptions } from "@services/UserInfoTOTPConfiguration";
import { State } from "@views/LoginPortal/SecondFactor/OneTimePasswordMethod"; import { State } from "@views/LoginPortal/SecondFactor/OneTimePasswordMethod";
import OTPDial from "@views/LoginPortal/SecondFactor/OTPDial"; import OTPDial from "@views/LoginPortal/SecondFactor/OTPDial";
const steps = ["Start", "Scan QR Code", "Confirmation"]; const steps = ["Start", "Register", "Confirm"];
interface Props { interface Props {
open: boolean; open: boolean;
@ -216,16 +216,18 @@ export default function TOTPRegisterDialogController(props: Props) {
const hidePeriods = advanced && optionPeriods.length <= 1; const hidePeriods = advanced && optionPeriods.length <= 1;
const qrcodeFuzzyStyle = totpIsLoading || hasErrored ? styles.fuzzy : undefined; const qrcodeFuzzyStyle = totpIsLoading || hasErrored ? styles.fuzzy : undefined;
function SecretButton(text: string | undefined, action: string, icon: IconDefinition) { function SecretButton(text: string, action: string, icon: IconDefinition) {
const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
(async () => {
event.preventDefault();
await navigator.clipboard.writeText(text);
createSuccessNotification(action);
})();
};
return ( return (
<IconButton <IconButton color="primary" onClick={handleOnClick} size="large">
color="primary"
onClick={() => {
navigator.clipboard.writeText(`${text}`);
createSuccessNotification(`${action}`);
}}
size="large"
>
<FontAwesomeIcon icon={icon} /> <FontAwesomeIcon icon={icon} />
</IconButton> </IconButton>
); );
@ -341,24 +343,10 @@ export default function TOTPRegisterDialogController(props: Props) {
case 1: case 1:
return ( return (
<Fragment> <Fragment>
<Grid xs={12}>
<Box>
<Typography className={styles.googleAuthenticatorText}>
{translate("Need Google Authenticator?")}
</Typography>
<AppStoreBadges
iconSize={128}
targetBlank
className={styles.googleAuthenticatorBadges}
googlePlayLink={GoogleAuthenticator.googlePlay}
appleStoreLink={GoogleAuthenticator.appleStore}
/>
</Box>
</Grid>
<Grid xs={12}> <Grid xs={12}>
<Box className={classnames(qrcodeFuzzyStyle, styles.qrcodeContainer)}> <Box className={classnames(qrcodeFuzzyStyle, styles.qrcodeContainer)}>
<Link href={totpSecretURL} underline="hover"> <Link href={totpSecretURL} underline="hover">
<QRCodeSVG value={totpSecretURL} className={styles.qrcode} size={128} /> <QRCodeSVG value={totpSecretURL} className={styles.qrcode} size={150} />
{!hasErrored && totpIsLoading ? ( {!hasErrored && totpIsLoading ? (
<CircularProgress className={styles.loader} size={128} /> <CircularProgress className={styles.loader} size={128} />
) : null} ) : null}
@ -395,14 +383,13 @@ export default function TOTPRegisterDialogController(props: Props) {
? SecretButton(totpSecretURL, translate("OTP URL copied to clipboard"), faCopy) ? SecretButton(totpSecretURL, translate("OTP URL copied to clipboard"), faCopy)
: null} : null}
</Grid> </Grid>
<Grid xs={12}> <Grid xs={12} hidden={totpSecretURLHidden || totpSecretURL === ""}>
<TextField <TextField
id="secret-url" id="secret-url"
label={translate("Secret")} label={translate("Secret")}
className={styles.secret} className={styles.secret}
value={totpSecretURL} value={totpSecretURL}
multiline={true} multiline={true}
hidden={totpSecretURLHidden || totpSecretURL === ""}
InputProps={{ InputProps={{
readOnly: true, readOnly: true,
}} }}
@ -410,19 +397,35 @@ export default function TOTPRegisterDialogController(props: Props) {
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid xs={12} sx={{ display: { xs: "none", md: "block" } }}>
<Box>
<Typography className={styles.googleAuthenticatorText}>
{translate("Need Google Authenticator?")}
</Typography>
<AppStoreBadges
iconSize={128}
targetBlank
className={styles.googleAuthenticatorBadges}
googlePlayLink={GoogleAuthenticator.googlePlay}
appleStoreLink={GoogleAuthenticator.appleStore}
/>
</Box>
</Grid>
</Fragment> </Fragment>
); );
case 2: case 2:
return ( return (
<Grid xs={12}> <Fragment>
<OTPDial <Grid xs={12} paddingY={4}>
passcode={dialValue} <OTPDial
state={dialState} passcode={dialValue}
digits={optionLength} state={dialState}
period={optionPeriod} digits={optionLength}
onChange={setDialValue} period={optionPeriod}
/> onChange={setDialValue}
</Grid> />
</Grid>
</Fragment>
); );
} }
} }
@ -451,7 +454,7 @@ export default function TOTPRegisterDialogController(props: Props) {
</Stepper> </Stepper>
</Grid> </Grid>
<Grid xs={12}> <Grid xs={12}>
<Grid container spacing={2} paddingY={3} justifyContent={"center"}> <Grid container spacing={1} justifyContent={"center"}>
{renderStep(activeStep)} {renderStep(activeStep)}
</Grid> </Grid>
</Grid> </Grid>