Handle expired session

src/Router.tsx

@@ -7,6 +7,7 @@ import {NotAllowed} from './features/error/NotAllowed';
 import {guildRoutes} from './features/guilds/GuildRoutes';
 import {GuildsPage} from './features/guilds/GuildsPage';
 import {StandardPage} from './features/StandardPage';
+import {SessionExpired} from './features/error/SessionExpired';
 
 export const routes: RouteObject[] = [
 	{
@@ -37,6 +38,14 @@ export const routes: RouteObject[] = [
 			element: <NotAllowed/>,
 		}],
 	},
+	{
+		path: 'session-expired/*',
+		element: <StandardPage/>,
+		children: [{
+			path: '*',
+			element: <SessionExpired/>,
+		}],
+	},
 	{
 		path: '*',
 		element: <StandardPage/>,

src/assets/locales/de/translation.json

@@ -140,6 +140,8 @@
   "regex.hours": "\\s?Stunden?",
   "regex.minutes": "\\s?Minuten?",
   "search": "Suche",
+  "session.expired": "Session abgelaufen",
+  "session.expired.description": "Deine Session ist abgelaufen. Bitte logge dich erneut ein.",
   "slot": "Slot",
   "slot.add": "Slot hinzufügen",
   "slot.blocked": "Gesperrt",

src/assets/locales/en/translation.json

@@ -140,6 +140,8 @@
   "regex.hours": "\\s?hours?",
   "regex.minutes": "\\s?minutes?",
   "search": "Search",
+  "session.expired": "Session expired",
+  "session.expired.description": "Your session has expired. Please log in again.",
   "slot": "Slot",
   "slot.add": "Add Slot",
   "slot.blocked": "Blocked",

src/features/error/SessionExpired.tsx

@@ -0,0 +1,12 @@
+import {Alert, Center} from '@mantine/core';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faCircleExclamation} from '@fortawesome/free-solid-svg-icons';
+import {T} from '../../components/T';
+
+export function SessionExpired(): JSX.Element {
+	return <Center>
+		<Alert color={'red'} title={<T k={'session.expired'}/>} icon={<FontAwesomeIcon icon={faCircleExclamation}/>}>
+			<T k={'session.expired.description'}/>
+		</Alert>
+	</Center>;
+}

src/hooks/slotbotServerClient.ts

@@ -6,32 +6,40 @@ const slotbotServerClient = axios.create({
 	withCredentials: true,
 });
 
-slotbotServerClient.interceptors.response.use((response) => response, (error) => {
-	if (error.response) {
-		// The request was made and the server responded with a status code
-		// that falls out of the range of 2xx
-		if (error.response.status === 404) {
-			window.location.replace('/404');
+slotbotServerClient.interceptors.response.use(
+	(response) => {
+		if (response.data === 'This session has been expired (possibly due to multiple concurrent logins being attempted as the same user).') {
+			window.location.replace('/session-expired');
 		}
-		if (error.response.status === 403) {
-			window.location.replace('/403');
+		return response;
+	},
+	(error) => {
+		if (error.response) {
+			// The request was made and the server responded with a status code
+			// that falls out of the range of 2xx
+			if (error.response.status === 404) {
+				window.location.replace('/404');
+			}
+			if (error.response.status === 403) {
+				window.location.replace('/403');
+			}
+			console.error(error.response.data);
+			console.error(error.response.headers);
+			return Promise.reject({
+				message: error.response.data.errorMessage,
+			});
+		} else if (error.request) {
+			// The request was made but no response was received
+			// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+			// http.ClientRequest in node.js
+			console.error(error.request);
+		} else {
+			// Something happened in setting up the request that triggered an Error
+			console.error(error.message);
 		}
-		console.error(error.response.data);
-		console.error(error.response.headers);
-		return Promise.reject({
-			message: error.response.data.errorMessage
-		});
-	} else if (error.request) {
-		// The request was made but no response was received
-		// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-		// http.ClientRequest in node.js
-		console.error(error.request);
-	} else {
-		// Something happened in setting up the request that triggered an Error
-		console.error(error.message);
-	}
-	return Promise.reject(error);
-});
+		return Promise.reject(error);
+	},
+);
 export default slotbotServerClient;
 
 export function voidFunction() {