Log user out from UI on 401

ui/src/actions/beamline.js

@@ -4,12 +4,6 @@ import {
   sendPrepareBeamlineForNewSample,
 } from '../api/beamline';
 import { sendLogFrontEndTraceBack } from '../api/log';
-// The different states a beamline attribute can assume.
-export const STATE = {
-  IDLE: 'READY',
-  BUSY: 'BUSY',
-  ABORT: 'UNUSABLE',
-};
 
 // Action types
 export const BL_UPDATE_HARDWARE_OBJECT = 'BL_UPDATE_HARDWARE_OBJECT';

ui/src/actions/login.js

@@ -7,7 +7,8 @@ import { fetchAvailableWorkflows } from '../api/workflow';
 import { fetchAvailableTasks, fetchQueueState } from '../api/queue';
 
 import { showErrorPanel, applicationFetched } from './general';
-import { fetchLoginInfo, sendLogIn, sendSignOut } from '../api/login';
+import { sendSignOut } from '../api/login';
+import { fetchLoginInfo, sendLogIn } from '../api/loginBase';
 import { fetchDetectorInfo } from '../api/detector';
 import { fetchSampleChangerInitialState } from '../api/sampleChanger';
 import { fetchHarvesterInitialState } from '../api/harvester';
@@ -22,21 +23,6 @@ export function setLoginInfo(loginInfo) {
   };
 }
 
-export function resetLoginInfo() {
-  return setLoginInfo({
-    beamlineName: '',
-    synchrotronName: '',
-    loginType: '',
-    user: '',
-    proposalList: [],
-    selectedProposal: '',
-    selectedProposalID: '',
-    loggedIn: false,
-    rootPath: '',
-    useSSO: false,
-  });
-}
-
 export function showProposalsForm() {
   return {
     type: 'SHOW_PROPOSALS_FORM',
@@ -88,7 +74,7 @@ export function logIn(proposal, password) {
 
 export function signOut() {
   return async (dispatch) => {
-    dispatch(resetLoginInfo()); // disconnect sockets before actually logging out (cf. `App.jsx`)
+    dispatch(setLoginInfo({ loggedIn: false })); // disconnect sockets before actually logging out (cf. `App.jsx`)
     dispatch(applicationFetched(false));
 
     try {

ui/src/api/api.js

@@ -0,0 +1,16 @@
+/* eslint-disable promise/prefer-await-to-callbacks */
+import baseApi from './apiBase';
+import { fetchLoginInfo } from './loginBase';
+import { store } from '../store';
+
+const api = baseApi
+  .options({ credendials: 'include' })
+  .catcher(401, async (error) => {
+    // User got logged out somehow: refetch login info to update local state and redirect to login page.
+    // Don't use `getLoginInfo` action to avoid import cycle.
+    const loginInfo = await fetchLoginInfo();
+    store.dispatch({ type: 'SET_LOGIN_INFO', loginInfo });
+    throw error;
+  });
+
+export default api;

ui/src/api/index.js → ui/src/api/apiBase.js

@@ -1,9 +1,8 @@
 import wretch from 'wretch';
 import safeJsonAddon from './addons/safeJson';
 
-const api = wretch('/mxcube/api/v0.1')
+const baseApi = wretch('/mxcube/api/v0.1')
   .addon(safeJsonAddon())
-  .options({ credendials: 'include' })
   .headers({ Accept: 'application/json' });
 
-export default api;
+export default baseApi;

ui/src/api/beamline.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/beamline');
 

ui/src/api/detector.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/detector');
 

ui/src/api/diffractometer.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/diffractometer');
 

ui/src/api/harvester.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/harvester');
 

ui/src/api/lims.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/lims');
 

ui/src/api/log.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/log');
 

ui/src/api/login.js

@@ -1,19 +1,11 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/login');
 
-export function sendLogIn(proposal, password, previousUser) {
-  return endpoint.post({ proposal, password, previousUser }, '/').safeJson();
-}
-
 export function sendSignOut() {
   return endpoint.headers({ Accept: '*/*' }).get('/signout').res();
 }
 
-export function fetchLoginInfo() {
-  return endpoint.get('/login_info').safeJson();
-}
-
 export function sendFeedback(sender, content) {
   return endpoint.post({ sender, content }, '/send_feedback').res();
 }

ui/src/api/loginBase.js

@@ -0,0 +1,15 @@
+/**
+ * Unauthenticated `/login/*` endpoints.
+ * Separate from authenticated endpoints to avoid import cycle with `api.js`.
+ */
+import baseApi from './apiBase';
+
+const endpoint = baseApi.url('/login');
+
+export function sendLogIn(proposal, password, previousUser) {
+  return endpoint.post({ proposal, password, previousUser }, '/').safeJson();
+}
+
+export function fetchLoginInfo() {
+  return endpoint.get('/login_info').safeJson();
+}

ui/src/api/main.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 export function fetchUIProperties() {
   return api.get('/uiproperties').safeJson();

ui/src/api/queue.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/queue');
 

ui/src/api/remoteAccess.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/ra');
 

ui/src/api/sampleChanger.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/sample_changer');
 

ui/src/api/sampleview.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/sampleview');
 

ui/src/api/workflow.js

@@ -1,4 +1,4 @@
-import api from '.';
+import api from './api';
 
 const endpoint = api.url('/workflow');
 

ui/src/reducers/beamline.js

@@ -1,7 +1,13 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { STATE } from '../actions/beamline';
 import { RUNNING, HW_STATE } from '../constants';
 
+// The different states a beamline attribute can assume.
+export const STATE = {
+  IDLE: 'READY',
+  BUSY: 'BUSY',
+  ABORT: 'UNUSABLE',
+};
+
 /**
  *  Initial redux state for beamline hardwareObjects, object containing each beamline
  *  attribute (name, attribute object). Each attribute object in turn have the