diff options
Diffstat (limited to 'modern/src')
| -rw-r--r-- | modern/src/login/LoginPage.js | 139 | ||||
| -rw-r--r-- | modern/src/resources/l10n/en.json | 2 |
2 files changed, 83 insertions, 58 deletions
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index e35ca232..4f10ce46 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -60,6 +60,8 @@ const LoginPage = () => { 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 [announcementShown, setAnnouncementShown] = useState(false); const announcement = useSelector((state) => state.session.server.announcement); @@ -129,6 +131,12 @@ const LoginPage = () => { return () => handleLoginTokenListeners.delete(listener); }, []); + useEffect(() => { + if (oidcForced) { + document.location = '/api/session/openid/auth'; + } + }, [oidcForced]); + return ( <LoginLayout> <div className={classes.options}> @@ -140,70 +148,85 @@ const LoginPage = () => { </Tooltip> )} </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} - /> - <Button - onClick={handlePasswordLogin} - onKeyUp={handleSpecialKey} - variant="contained" - color="secondary" - disabled={!email || !password} - > - {t('loginLogin')} - </Button> - <div className={classes.extraContainer}> + {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} + /> <Button - className={classes.registerButton} - onClick={() => navigate('/register')} - disabled={!registrationEnabled} + onClick={handlePasswordLogin} + onKeyUp={handleSpecialKey} + variant="contained" color="secondary" + disabled={!email || !password} > - {t('loginRegister')} + {t('loginLogin')} </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> + {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> - {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 33140133..af7b5e09 100644 --- a/modern/src/resources/l10n/en.json +++ b/modern/src/resources/l10n/en.json @@ -177,6 +177,8 @@ "loginReset": "Reset Password", "loginRegister": "Register", "loginLogin": "Login", + "loginLoginOIDC": "Login with SSO", + "loginOIDCRedirect": "Authenticating with SSO...", "loginFailed": "Incorrect email address or password", "loginCreated": "New user has been registered", "loginResetSuccess": "Check your email", |