Skip to content

Commit faeb2e5

Browse files
axelbocaxelboc
committed
Refactor LoginForm for SSO login
1 parent a0d81fc commit faeb2e5

File tree

3 files changed

+73
-90
lines changed

3 files changed

+73
-90
lines changed

‎ui/src/actions/login.js

+1-12
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@ import { fetchAvailableWorkflows } from '../api/workflow';
77
import { fetchAvailableTasks, fetchQueueState } from '../api/queue';
88

99
import { showErrorPanel, applicationFetched } from './general';
10-
import {
11-
fetchLoginInfo,
12-
sendLogIn,
13-
sendSignOut,
14-
sendSSOLogIn,
15-
} from '../api/login';
10+
import { fetchLoginInfo, sendLogIn, sendSignOut } from '../api/login';
1611
import { fetchDetectorInfo } from '../api/detector';
1712
import { fetchSampleChangerInitialState } from '../api/sampleChanger';
1813
import { fetchHarvesterInitialState } from '../api/harvester';
@@ -91,12 +86,6 @@ export function logIn(proposal, password) {
9186
};
9287
}
9388

94-
export function ssoLogIn() {
95-
return (dispatch) => {
96-
sendSSOLogIn();
97-
};
98-
}
99-
10089
export function signOut() {
10190
return async (dispatch) => {
10291
dispatch(resetLoginInfo()); // disconnect sockets before actually logging out (cf. `App.jsx`)

‎ui/src/api/login.js

-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ export function sendLogIn(proposal, password, previousUser) {
66
return endpoint.post({ proposal, password, previousUser }, '/').safeJson();
77
}
88

9-
export function sendSSOLogIn() {
10-
window.location = 'mxcube/api/v0.1/login/ssologin';
11-
}
12-
139
export function sendSignOut() {
1410
return endpoint.headers({ Accept: '*/*' }).get('/signout').res();
1511
}

‎ui/src/components/LoginForm/LoginForm.jsx

+72-74
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import logo from '../../img/mxcube_logo20.png';
77
import loader from '../../img/loader.gif';
88
import styles from './LoginForm.module.css';
99
import { useDispatch, useSelector } from 'react-redux';
10-
import { logIn, ssoLogIn } from '../../actions/login';
10+
import { logIn } from '../../actions/login';
11+
12+
const SSO_PATH = '/mxcube/api/v0.1/login/ssologin';
1113

1214
function LoginForm() {
1315
const dispatch = useDispatch();
@@ -26,6 +28,11 @@ function LoginForm() {
2628
const useSSO = useSelector((state) => state.login.useSSO);
2729

2830
async function handleSubmit(data) {
31+
if (useSSO) {
32+
window.location.assign(SSO_PATH);
33+
return;
34+
}
35+
2936
setLoading(true);
3037
try {
3138
await dispatch(logIn(data.username.toLowerCase(), data.password));
@@ -34,10 +41,6 @@ function LoginForm() {
3441
}
3542
}
3643

37-
async function handleSingleSignOn() {
38-
await dispatch(ssoLogIn());
39-
}
40-
4144
return (
4245
<Form
4346
className={styles.box}
@@ -49,78 +52,73 @@ function LoginForm() {
4952
MXCuBE
5053
</h1>
5154
<fieldset className={styles.fieldset} disabled={loading}>
52-
{!useSSO && [
53-
<Form.Group className="mb-3" key="username">
54-
<InputGroup>
55-
<InputGroup.Text>
56-
<i className="fas fa-user" />
57-
</InputGroup.Text>
58-
<Controller
59-
name="username"
60-
control={control}
61-
rules={{ required: 'Login ID is required' }}
62-
render={({ field }) => (
63-
<Form.Control
64-
type="text"
65-
aria-label="Login ID"
66-
placeholder="Login ID"
67-
autoFocus // eslint-disable-line jsx-a11y/no-autofocus
68-
required
69-
isInvalid={!!errors.username}
70-
{...field}
71-
/>
55+
{!useSSO && (
56+
<>
57+
<Form.Group className="mb-3">
58+
<InputGroup>
59+
<InputGroup.Text>
60+
<i className="fas fa-user" />
61+
</InputGroup.Text>
62+
<Controller
63+
name="username"
64+
control={control}
65+
rules={{ required: 'Login ID is required' }}
66+
render={({ field }) => (
67+
<Form.Control
68+
type="text"
69+
aria-label="Login ID"
70+
placeholder="Login ID"
71+
autoFocus // eslint-disable-line jsx-a11y/no-autofocus
72+
required
73+
isInvalid={!!errors.username}
74+
{...field}
75+
/>
76+
)}
77+
/>
78+
{errors.username && (
79+
<Form.Control.Feedback type="invalid">
80+
{errors.username.message}
81+
</Form.Control.Feedback>
7282
)}
73-
/>
74-
{errors.username && (
75-
<Form.Control.Feedback type="invalid">
76-
{errors.username.message}
77-
</Form.Control.Feedback>
78-
)}
79-
</InputGroup>
80-
</Form.Group>,
81-
<Form.Group className="mb-3" key="password">
82-
<InputGroup>
83-
<InputGroup.Text>
84-
<i className="fas fa-lock" />
85-
</InputGroup.Text>
86-
<Controller
87-
name="password"
88-
control={control}
89-
rules={{ required: 'Password is required' }}
90-
render={({ field }) => (
91-
<Form.Control
92-
type="password"
93-
aria-label="Password"
94-
placeholder="Password"
95-
required
96-
isInvalid={!!errors.password}
97-
{...field}
98-
/>
83+
</InputGroup>
84+
</Form.Group>
85+
<Form.Group className="mb-3">
86+
<InputGroup>
87+
<InputGroup.Text>
88+
<i className="fas fa-lock" />
89+
</InputGroup.Text>
90+
<Controller
91+
name="password"
92+
control={control}
93+
rules={{ required: 'Password is required' }}
94+
render={({ field }) => (
95+
<Form.Control
96+
type="password"
97+
aria-label="Password"
98+
placeholder="Password"
99+
required
100+
isInvalid={!!errors.password}
101+
{...field}
102+
/>
103+
)}
104+
/>
105+
{errors.password && (
106+
<Form.Control.Feedback type="invalid">
107+
{errors.password.message}
108+
</Form.Control.Feedback>
99109
)}
100-
/>
101-
{errors.password && (
102-
<Form.Control.Feedback type="invalid">
103-
{errors.password.message}
104-
</Form.Control.Feedback>
105-
)}
106-
</InputGroup>
107-
</Form.Group>,
108-
]}
109-
{useSSO ? (
110-
<Button onClick={handleSingleSignOn} size="lg" className={styles.btn}>
111-
{loading && (
112-
<img className={styles.loader} src={loader} width="25" alt="" />
113-
)}
114-
Sign in with SSO
115-
</Button>
116-
) : (
117-
<Button type="submit" size="lg" className={styles.btn}>
118-
{loading && (
119-
<img className={styles.loader} src={loader} width="25" alt="" />
120-
)}
121-
Sign in with proposal
122-
</Button>
110+
</InputGroup>
111+
</Form.Group>
112+
</>
123113
)}
114+
115+
<Button type="submit" size="lg" className={styles.btn}>
116+
{loading && (
117+
<img className={styles.loader} src={loader} width="25" alt="" />
118+
)}
119+
Sign in with {useSSO ? 'SSO' : 'proposal'}
120+
</Button>
121+
124122
{!loading && showErrorPanel && (
125123
<Alert className="mt-3" variant="danger">
126124
<pre className={styles.errorMsg}>{errorMessage}</pre>

0 commit comments

Comments
 (0)