1280 unhandled keycloak log in failure

package.json

@@ -27,6 +27,7 @@
 		"date-fns": "^2.30.0",
 		"glob": "^10.3.10",
 		"keycloak-js": "^22.0.4",
+		"keycloak-react-web": "^0.1.19",
 		"ky": "^1.1.0",
 		"material-ui-popup-state": "^5.0.9",
 		"notistack": "^3.0.1",

src/App.tsx

@@ -9,6 +9,7 @@ import { ConfigProvider } from './config/ConfigService';
 import { PythonConverterService } from './PythonConverter/PythonConverterService';
 import { Auth } from './services/AuthService';
 import { DialogProvider } from './services/DialogService';
+import { KeycloakAuth } from './services/KeycloakAuthService';
 import { Loader } from './services/LoaderService';
 import { ShSimulation } from './services/ShSimulatorService';
 import { Store } from './services/StoreService';
@@ -84,11 +85,12 @@ function App() {
 				<StyledEngineProvider injectFirst />,
 				<ThemeProvider theme={theme} />,
 				<SnackbarProvider maxSnack={3} />,
+				<DialogProvider />,
+				<KeycloakAuth />,
+				<Store />,
 				<Auth />,
 				<ShSimulation />,
 				<PythonConverterService />,
-				<Store />,
-				<DialogProvider />,
 				<Loader />
 			]}>
 			<WrapperApp />

src/ThreeEditor/components/Dialog/ClearHistoryDialog.tsx

@@ -1,11 +1,12 @@
 import { Button } from '@mui/material';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
-export function ClearHistoryDialog({ onClose }: ConcreteDialogProps) {
-	const { yaptideEditor } = useStore();
-
+export function ClearHistoryDialog({
+	onClose,
+	yaptideEditor
+}: ConcreteDialogProps<Required<Pick<StoreContext, 'yaptideEditor'>>>) {
 	return (
 		<CustomDialog
 			onClose={onClose}

src/ThreeEditor/components/Dialog/CustomDialog.tsx

@@ -7,7 +7,8 @@ import {
 	DialogProps,
 	DialogTitle,
 	DialogTitleProps,
-	IconButton
+	IconButton,
+	Theme
 } from '@mui/material';
 import { ReactNode } from 'react';
 
@@ -87,7 +88,7 @@ export function CustomDialogTitle({ children, onClose, ...other }: CustomTitlePr
 						position: 'absolute',
 						right: 8,
 						top: 8,
-						color: theme => theme.palette.grey[500]
+						color: ({ palette }: Theme) => palette.grey[500]
 					}}>
 					<CloseIcon />
 				</IconButton>

src/ThreeEditor/components/Dialog/EditProjectInfoDialog.tsx

@@ -1,11 +1,13 @@
 import { Box, Button, TextField } from '@mui/material';
 import { useState } from 'react';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
-export function EditProjectInfoDialog({ onClose }: ConcreteDialogProps) {
-	const { yaptideEditor } = useStore();
+export function EditProjectInfoDialog({
+	onClose,
+	yaptideEditor
+}: ConcreteDialogProps<Required<Pick<StoreContext, 'yaptideEditor'>>>) {
 	const [title, setTitle] = useState<string>(yaptideEditor?.config.getKey('project/title'));
 	const [description, setDescription] = useState<string>(
 		yaptideEditor?.config.getKey('project/description')

src/ThreeEditor/components/Dialog/LoadFileDialog.tsx

@@ -1,20 +1,21 @@
 import { Button } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { EditorJson } from '../../js/EditorJson';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
 export function LoadFileDialog({
 	onClose,
 	validVersion = true,
-	data
-}: ConcreteDialogProps<{
-	validVersion: boolean;
-	data: EditorJson;
-}>) {
-	const { yaptideEditor } = useStore();
-
+	data,
+	yaptideEditor
+}: ConcreteDialogProps<
+	{
+		validVersion: boolean;
+		data: EditorJson;
+	} & Required<Pick<StoreContext, 'yaptideEditor'>>
+>) {
 	return (
 		<CustomDialog
 			alert={true}

src/ThreeEditor/components/Dialog/NewProjectDialog.tsx

@@ -1,11 +1,12 @@
 import { Button } from '@mui/material';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
-export function NewProjectDialog({ onClose }: ConcreteDialogProps) {
-	const { yaptideEditor } = useStore();
-
+export function NewProjectDialog({
+	onClose,
+	yaptideEditor
+}: ConcreteDialogProps<Required<Pick<StoreContext, 'yaptideEditor'>>>) {
 	return (
 		<CustomDialog
 			onClose={onClose}

src/ThreeEditor/components/Dialog/RejectKeycloakUserDialog.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@mui/material';
+
+import { KeycloakAuthContext } from '../../../services/KeycloakAuthService';
+import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
+
+export function RejectKeycloakUserDialog({
+	onClose,
+	reason,
+	keycloakAuth: { keycloak, initialized }
+}: ConcreteDialogProps<{
+	reason: string;
+	keycloakAuth: KeycloakAuthContext;
+}>) {
+	return (
+		<CustomDialog
+			onClose={onClose}
+			alert={true}
+			title='Keycloak User Rejected'
+			contentText={
+				initialized
+					? `Hello ${keycloak!.tokenParsed
+							?.preferred_username}. We could not accept your authorisation because of the following:\n${reason}\nPlease contact with an administrator to resolve this issue.`
+					: 'Connection could not be established with the authentication server. Please try again later.'
+			}>
+			<Button
+				onClick={() => {
+					onClose();
+
+					if (initialized && keycloak!.authenticated) keycloak!.logout();
+				}}
+				autoFocus>
+				I understand
+			</Button>
+		</CustomDialog>
+	);
+}

src/ThreeEditor/components/Dialog/RunSimulationDialog.tsx

@@ -2,8 +2,8 @@ import { Card, CardContent, Fade, Modal } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
 import { useState } from 'react';
 
-import { useShSimulation } from '../../../services/ShSimulatorService';
-import { useStore } from '../../../services/StoreService';
+import { RestSimulationContext } from '../../../services/ShSimulatorService';
+import { StoreContext } from '../../../services/StoreService';
 import { SimulatorType } from '../../../types/RequestTypes';
 import { SimulationInputFiles } from '../../../types/ResponseTypes';
 import {
@@ -19,15 +19,19 @@ export function RunSimulationDialog({
 	inputFiles = {},
 	simulator,
 	onClose,
-	onSubmit = () => {}
-}: ConcreteDialogProps<{
-	onSubmit?: (jobId: string) => void;
-	inputFiles?: Record<string, string>;
-	simulator: SimulatorType;
-}>) {
-	const { yaptideEditor } = useStore();
+	onSubmit = () => {},
+	yaptideEditor,
+	postJobDirect,
+	postJobBatch
+}: ConcreteDialogProps<
+	{
+		onSubmit?: (jobId: string) => void;
+		inputFiles?: Record<string, string>;
+		simulator: SimulatorType;
+	} & Required<Pick<StoreContext, 'yaptideEditor'>> &
+		Pick<RestSimulationContext, 'postJobDirect' | 'postJobBatch'>
+>) {
 	const [controller] = useState(new AbortController());
-	const { postJobDirect, postJobBatch } = useShSimulation();
 	const sendSimulationRequest = (
 		postJobFn: typeof postJobDirect,
 		runType: SimulationRunType,
@@ -46,16 +50,22 @@ export function RunSimulationDialog({
 			runType === 'batch'
 				? {
 						...batchOptions,
-						arrayOptions: batchOptions.arrayOptions?.reduce((acc, curr) => {
-							acc[curr.optionKey] = curr.optionValue;
+						arrayOptions: batchOptions.arrayOptions?.reduce(
+							(acc, curr) => {
+								acc[curr.optionKey] = curr.optionValue;
 
-							return acc;
-						}, {} as Record<string, string>),
-						collectOptions: batchOptions.collectOptions?.reduce((acc, curr) => {
-							acc[curr.optionKey] = curr.optionValue;
+								return acc;
+							},
+							{} as Record<string, string>
+						),
+						collectOptions: batchOptions.collectOptions?.reduce(
+							(acc, curr) => {
+								acc[curr.optionKey] = curr.optionValue;
 
-							return acc;
-						}, {} as Record<string, string>)
+								return acc;
+							},
+							{} as Record<string, string>
+						)
 				  }
 				: undefined;
 

src/ThreeEditor/components/Dialog/SaveFileDialog.tsx

@@ -2,7 +2,7 @@ import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 
 import { FullSimulationData } from '../../../services/ShSimulatorService';
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { saveString } from '../../../util/File';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
@@ -25,13 +25,15 @@ export function SaveFileDialog({
 	onClose,
 	name: defaultName = 'editor',
 	results: providedResults,
-	disableCheckbox = false
-}: ConcreteDialogProps<{
-	name?: string;
-	results?: FullSimulationData;
-	disableCheckbox?: boolean;
-}>) {
-	const { yaptideEditor } = useStore();
+	disableCheckbox = false,
+	yaptideEditor
+}: ConcreteDialogProps<
+	{
+		name?: string;
+		results?: FullSimulationData;
+		disableCheckbox?: boolean;
+	} & Required<Pick<StoreContext, 'yaptideEditor'>>
+>) {
 	const results: FullSimulationData | undefined = providedResults ?? yaptideEditor?.getResults();
 
 	const [keepResults, setKeepResults] = useState<boolean>(false);

src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx

@@ -12,6 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useDialog } from '../../../../services/DialogService';
 import { useLoader } from '../../../../services/LoaderService';
+import { useStore } from '../../../../services/StoreService';
 import { YaptideEditor } from '../../../js/YaptideEditor';
 import { EditorTitleBar } from './components/EditorTitlebar';
 import { EditorToolbar } from './components/EditorToolbar';
@@ -30,11 +31,12 @@ type AppBarOptions = {
 
 function EditorAppBar({ editor }: AppBarProps) {
 	const { loadFromJson, loadFromFiles, loadFromUrl, loadFromJsonString } = useLoader();
-	const [openTheOpenFileDialog] = useDialog('openFile');
-	const [openTheSaveFileDialog] = useDialog('saveFile');
-	const [openTheNewProjectDialog] = useDialog('newProject');
+	const { open: openTheOpenFileDialog } = useDialog('openFile');
+	const { open: openTheSaveFileDialog } = useDialog('saveFile');
+	const { open: openTheNewProjectDialog } = useDialog('newProject');
 	const [canUndo, setCanUndo] = useState((editor?.history.undos.length ?? 0) > 0);
 	const [canRedo, setCanRedo] = useState((editor?.history.redos.length ?? 0) > 0);
+	const { yaptideEditor } = useStore();
 
 	const updateHistoryButtons = useCallback(() => {
 		setCanUndo((editor?.history.undos.length ?? 0) > 0);
@@ -71,7 +73,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 					label: 'New',
 					icon: <FiberNewIcon />,
 					disabled: false,
-					onClick: () => openTheNewProjectDialog()
+					onClick: () => yaptideEditor && openTheNewProjectDialog({ yaptideEditor })
 				},
 				{
 					label: 'Open',
@@ -95,7 +97,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 					label: 'Save as',
 					icon: <SaveAsIcon />,
 					disabled: false,
-					onClick: () => openTheSaveFileDialog()
+					onClick: () => yaptideEditor && openTheSaveFileDialog({ yaptideEditor })
 				},
 				{
 					label: 'Redo (ctrl+y)',
@@ -113,6 +115,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 		[
 			canUndo,
 			canRedo,
+			yaptideEditor,
 			openTheNewProjectDialog,
 			openTheOpenFileDialog,
 			loadFromFiles,

src/ThreeEditor/components/Editor/EditorAppBar/components/EditorTitlebar.tsx

@@ -15,7 +15,7 @@ import { useDialog } from '../../../../../services/DialogService';
 import { useStore } from '../../../../../services/StoreService';
 
 export function EditorTitleBar() {
-	const [open, , isOpen] = useDialog('editProject');
+	const { open: openEditProjectDialog, isOpen } = useDialog('editProject');
 	const { yaptideEditor } = useStore();
 	const [saving, setSaving] = useState(false);
 	const [editMode, setEditMode] = useState(false);
@@ -60,7 +60,11 @@ export function EditorTitleBar() {
 			key='edit project description'
 			onClick={() => {
 				popupState.close();
-				open();
+
+				if (yaptideEditor)
+					openEditProjectDialog({
+						yaptideEditor
+					});
 			}}>
 			Edit Project Description
 		</MenuItem>