diff options
| -rw-r--r-- | modern/src/login/LoginPage.js | 155 | ||||
| -rw-r--r-- | modern/src/resources/l10n/en.json | 3 |
2 files changed, 79 insertions, 79 deletions
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 4f10ce46..b572b4ea 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -54,14 +54,16 @@ const LoginPage = () => { const [failed, setFailed] = useState(false); + const [loading, setLoading] = useState(false); + const [email, setEmail] = usePersistedState('loginEmail', ''); const [password, setPassword] = useState(''); const registrationEnabled = useSelector((state) => state.session.server.registration); const languageEnabled = useSelector((state) => !state.session.server.attributes['ui.disableLoginLanguage']); const emailEnabled = useSelector((state) => state.session.server.emailEnabled); - const oidcEnabled = useSelector((state) => state.session.server.oidcEnabled); - const oidcForced = useSelector((state) => state.session.server.oidcEnabled && state.session.server.oidcForce); + const openIdEnabled = useSelector((state) => state.session.server.openIdEnabled); + const openIdForced = useSelector((state) => state.session.server.openIdEnabled && state.session.server.openIdForce); const [announcementShown, setAnnouncementShown] = useState(false); const announcement = useSelector((state) => state.session.server.announcement); @@ -123,6 +125,11 @@ const LoginPage = () => { } }; + const handleOpenIdLogin = () => { + setLoading(true); + document.location = '/api/session/openid/auth'; + } + useEffect(() => nativePostMessage('authentication'), []); useEffect(() => { @@ -132,10 +139,10 @@ const LoginPage = () => { }, []); useEffect(() => { - if (oidcForced) { - document.location = '/api/session/openid/auth'; + if (openIdForced) { + handleOpenIdLogin(); } - }, [oidcForced]); + }, [openIdForced]); return ( <LoginLayout> @@ -148,85 +155,79 @@ const LoginPage = () => { </Tooltip> )} </div> - {oidcForced ? ( - <div className={classes.container}> - {t('loginOIDCRedirect')} - </div> - ) : ( - <div className={classes.container}> - {useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.primary.main} />} - <TextField - required - error={failed} - label={t('userEmail')} - name="email" - value={email} - autoComplete="email" - autoFocus={!email} - onChange={(e) => setEmail(e.target.value)} - onKeyUp={handleSpecialKey} - helperText={failed && 'Invalid username or password'} - /> - <TextField - required - error={failed} - label={t('userPassword')} - name="password" - value={password} - type="password" - autoComplete="current-password" - autoFocus={!!email} - onChange={(e) => setPassword(e.target.value)} - onKeyUp={handleSpecialKey} - /> + <div className={classes.container}> + {useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.primary.main} />} + <TextField + required + error={failed} + label={t('userEmail')} + name="email" + value={email} + autoComplete="email" + autoFocus={!email} + onChange={(e) => setEmail(e.target.value)} + onKeyUp={handleSpecialKey} + helperText={failed && 'Invalid username or password'} + /> + <TextField + required + error={failed} + label={t('userPassword')} + name="password" + value={password} + type="password" + autoComplete="current-password" + autoFocus={!!email} + onChange={(e) => setPassword(e.target.value)} + onKeyUp={handleSpecialKey} + /> + <Button + onClick={handlePasswordLogin} + onKeyUp={handleSpecialKey} + variant="contained" + color="secondary" + disabled={!email || !password} + > + {t('loginLogin')} + </Button> + {openIdEnabled && ( <Button - onClick={handlePasswordLogin} - onKeyUp={handleSpecialKey} + onClick={() => handleOpenIdLogin()} variant="contained" color="secondary" - disabled={!email || !password} > - {t('loginLogin')} + {t('loginOpenId')} </Button> - {oidcEnabled && ( - <Button - onClick={() => document.location = '/api/session/openid/auth'} - variant="contained" - color="secondary" - > - {t('loginLoginOIDC')} - </Button> - )} - <div className={classes.extraContainer}> - <Button - className={classes.registerButton} - onClick={() => navigate('/register')} - disabled={!registrationEnabled} - color="secondary" - > - {t('loginRegister')} - </Button> - {languageEnabled && ( - <FormControl fullWidth> - <InputLabel>{t('loginLanguage')}</InputLabel> - <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}> - {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)} - </Select> - </FormControl> - )} - </div> - {emailEnabled && ( - <Link - onClick={() => navigate('/reset-password')} - className={classes.resetPassword} - underline="none" - variant="caption" - > - {t('loginReset')} - </Link> + )} + <div className={classes.extraContainer}> + <Button + className={classes.registerButton} + onClick={() => navigate('/register')} + disabled={!registrationEnabled} + color="secondary" + > + {t('loginRegister')} + </Button> + {languageEnabled && ( + <FormControl fullWidth> + <InputLabel>{t('loginLanguage')}</InputLabel> + <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}> + {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)} + </Select> + </FormControl> )} </div> - )} + {emailEnabled && ( + <Link + onClick={() => navigate('/reset-password')} + className={classes.resetPassword} + underline="none" + variant="caption" + > + {t('loginReset')} + </Link> + )} + </div> <Snackbar open={!!announcement && !announcementShown} message={announcement} diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json index af7b5e09..9d76814d 100644 --- a/modern/src/resources/l10n/en.json +++ b/modern/src/resources/l10n/en.json @@ -177,8 +177,7 @@ "loginReset": "Reset Password", "loginRegister": "Register", "loginLogin": "Login", - "loginLoginOIDC": "Login with SSO", - "loginOIDCRedirect": "Authenticating with SSO...", + "loginOpenId": "Login with OpenID", "loginFailed": "Incorrect email address or password", "loginCreated": "New user has been registered", "loginResetSuccess": "Check your email", |