Frontend changes for OIDC

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",