From 87e9c7dd5159c1d08368bfafa30fed9ae811933c Mon Sep 17 00:00:00 2001
From: Dan <djr2468@gmail.com>
Date: Mon, 3 Apr 2023 13:11:18 +0100
Subject: First pass

---
 modern/src/login/LoginPage.js     | 155 +++++++++++++++++++-------------------
 modern/src/resources/l10n/en.json |   3 +-
 2 files changed, 79 insertions(+), 79 deletions(-)

(limited to 'modern/src')

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",
-- 
cgit v1.2.3