Refactor LoginForm for SSO login

mxcube · Nov 25, 2024 · faeb2e5 · faeb2e5
1 parent a0d81fc
commit faeb2e5
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 90 deletions.
diff --git a/ui/src/actions/login.js b/ui/src/actions/login.js
@@ -7,12 +7,7 @@ import { fetchAvailableWorkflows } from '../api/workflow';
 import { fetchAvailableTasks, fetchQueueState } from '../api/queue';
 
 import { showErrorPanel, applicationFetched } from './general';
-import {
-  fetchLoginInfo,
-  sendLogIn,
-  sendSignOut,
-  sendSSOLogIn,
-} from '../api/login';
+import { fetchLoginInfo, sendLogIn, sendSignOut } from '../api/login';
 import { fetchDetectorInfo } from '../api/detector';
 import { fetchSampleChangerInitialState } from '../api/sampleChanger';
 import { fetchHarvesterInitialState } from '../api/harvester';
@@ -91,12 +86,6 @@ export function logIn(proposal, password) {
   };
 }
 
-export function ssoLogIn() {
-  return (dispatch) => {
-    sendSSOLogIn();
-  };
-}
-
 export function signOut() {
   return async (dispatch) => {
     dispatch(resetLoginInfo()); // disconnect sockets before actually logging out (cf. `App.jsx`)

diff --git a/ui/src/api/login.js b/ui/src/api/login.js
@@ -6,10 +6,6 @@ export function sendLogIn(proposal, password, previousUser) {
   return endpoint.post({ proposal, password, previousUser }, '/').safeJson();
 }
 
-export function sendSSOLogIn() {
-  window.location = 'mxcube/api/v0.1/login/ssologin';
-}
-
 export function sendSignOut() {
   return endpoint.headers({ Accept: '*/*' }).get('/signout').res();
 }

diff --git a/ui/src/components/LoginForm/LoginForm.jsx b/ui/src/components/LoginForm/LoginForm.jsx
@@ -7,7 +7,9 @@ import logo from '../../img/mxcube_logo20.png';
 import loader from '../../img/loader.gif';
 import styles from './LoginForm.module.css';
 import { useDispatch, useSelector } from 'react-redux';
-import { logIn, ssoLogIn } from '../../actions/login';
+import { logIn } from '../../actions/login';
+
+const SSO_PATH = '/mxcube/api/v0.1/login/ssologin';
 
 function LoginForm() {
   const dispatch = useDispatch();
@@ -26,6 +28,11 @@ function LoginForm() {
   const useSSO = useSelector((state) => state.login.useSSO);
 
   async function handleSubmit(data) {
+    if (useSSO) {
+      window.location.assign(SSO_PATH);
+      return;
+    }
+
     setLoading(true);
     try {
       await dispatch(logIn(data.username.toLowerCase(), data.password));
@@ -34,10 +41,6 @@ function LoginForm() {
     }
   }
 
-  async function handleSingleSignOn() {
-    await dispatch(ssoLogIn());
-  }
-
   return (
     <Form
       className={styles.box}
@@ -49,78 +52,73 @@ function LoginForm() {
         MXCuBE
       </h1>
       <fieldset className={styles.fieldset} disabled={loading}>
-        {!useSSO && [
-          <Form.Group className="mb-3" key="username">
-            <InputGroup>
-              <InputGroup.Text>
-                <i className="fas fa-user" />
-              </InputGroup.Text>
-              <Controller
-                name="username"
-                control={control}
-                rules={{ required: 'Login ID is required' }}
-                render={({ field }) => (
-                  <Form.Control
-                    type="text"
-                    aria-label="Login ID"
-                    placeholder="Login ID"
-                    autoFocus // eslint-disable-line jsx-a11y/no-autofocus
-                    required
-                    isInvalid={!!errors.username}
-                    {...field}
-                  />
+        {!useSSO && (
+          <>
+            <Form.Group className="mb-3">
+              <InputGroup>
+                <InputGroup.Text>
+                  <i className="fas fa-user" />
+                </InputGroup.Text>
+                <Controller
+                  name="username"
+                  control={control}
+                  rules={{ required: 'Login ID is required' }}
+                  render={({ field }) => (
+                    <Form.Control
+                      type="text"
+                      aria-label="Login ID"
+                      placeholder="Login ID"
+                      autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+                      required
+                      isInvalid={!!errors.username}
+                      {...field}
+                    />
+                  )}
+                />
+                {errors.username && (
+                  <Form.Control.Feedback type="invalid">
+                    {errors.username.message}
+                  </Form.Control.Feedback>
                 )}
-              />
-              {errors.username && (
-                <Form.Control.Feedback type="invalid">
-                  {errors.username.message}
-                </Form.Control.Feedback>
-              )}
-            </InputGroup>
-          </Form.Group>,
-          <Form.Group className="mb-3" key="password">
-            <InputGroup>
-              <InputGroup.Text>
-                <i className="fas fa-lock" />
-              </InputGroup.Text>
-              <Controller
-                name="password"
-                control={control}
-                rules={{ required: 'Password is required' }}
-                render={({ field }) => (
-                  <Form.Control
-                    type="password"
-                    aria-label="Password"
-                    placeholder="Password"
-                    required
-                    isInvalid={!!errors.password}
-                    {...field}
-                  />
+              </InputGroup>
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <InputGroup>
+                <InputGroup.Text>
+                  <i className="fas fa-lock" />
+                </InputGroup.Text>
+                <Controller
+                  name="password"
+                  control={control}
+                  rules={{ required: 'Password is required' }}
+                  render={({ field }) => (
+                    <Form.Control
+                      type="password"
+                      aria-label="Password"
+                      placeholder="Password"
+                      required
+                      isInvalid={!!errors.password}
+                      {...field}
+                    />
+                  )}
+                />
+                {errors.password && (
+                  <Form.Control.Feedback type="invalid">
+                    {errors.password.message}
+                  </Form.Control.Feedback>
                 )}
-              />
-              {errors.password && (
-                <Form.Control.Feedback type="invalid">
-                  {errors.password.message}
-                </Form.Control.Feedback>
-              )}
-            </InputGroup>
-          </Form.Group>,
-        ]}
-        {useSSO ? (
-          <Button onClick={handleSingleSignOn} size="lg" className={styles.btn}>
-            {loading && (
-              <img className={styles.loader} src={loader} width="25" alt="" />
-            )}
-            Sign in with SSO
-          </Button>
-        ) : (
-          <Button type="submit" size="lg" className={styles.btn}>
-            {loading && (
-              <img className={styles.loader} src={loader} width="25" alt="" />
-            )}
-            Sign in with proposal
-          </Button>
+              </InputGroup>
+            </Form.Group>
+          </>
         )}
+
+        <Button type="submit" size="lg" className={styles.btn}>
+          {loading && (
+            <img className={styles.loader} src={loader} width="25" alt="" />
+          )}
+          Sign in with {useSSO ? 'SSO' : 'proposal'}
+        </Button>
+
         {!loading && showErrorPanel && (
           <Alert className="mt-3" variant="danger">
             <pre className={styles.errorMsg}>{errorMessage}</pre>