From 506dd66b793803a24a2872e242482f263087df52 Mon Sep 17 00:00:00 2001
From: Dan <djr2468@gmail.com>
Date: Sun, 2 Apr 2023 00:50:09 +0100
Subject: Frontend changes for OIDC

---
 modern/src/login/LoginPage.js     | 139 ++++++++++++++++++++++----------------
 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",
-- 
cgit v1.2.3


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(-)

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


From 6063b22436580ad7f829ac6b06384a22d572d336 Mon Sep 17 00:00:00 2001
From: Dan Raper <djr2468@gmail.com>
Date: Mon, 3 Apr 2023 15:22:28 +0100
Subject: Update LoginPage.js

---
 modern/src/login/LoginPage.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index b572b4ea..59e64bed 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 import {
-  useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip,
+  useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
@@ -54,8 +54,6 @@ const LoginPage = () => {
 
   const [failed, setFailed] = useState(false);
 
-  const [loading, setLoading] = useState(false);
-
   const [email, setEmail] = usePersistedState('loginEmail', '');
   const [password, setPassword] = useState('');
 
@@ -126,9 +124,8 @@ const LoginPage = () => {
   };
 
   const handleOpenIdLogin = () => {
-    setLoading(true);
     document.location = '/api/session/openid/auth';
-  }
+  };
 
   useEffect(() => nativePostMessage('authentication'), []);
 
@@ -138,11 +135,10 @@ const LoginPage = () => {
     return () => handleLoginTokenListeners.delete(listener);
   }, []);
 
-  useEffect(() => {
-    if (openIdForced) {
-      handleOpenIdLogin();
-    }
-  }, [openIdForced]);
+  if (openIdForced) {
+    handleOpenIdLogin();
+    return (<LinearProgress />);
+  }
 
   return (
     <LoginLayout>
-- 
cgit v1.2.3