feat: allow entering custom Authorization header

packages/controller/src/components/AppSettings.tsx

@@ -10,14 +10,26 @@ export const AppSettings: React.FC = observer(() => {
 	return (
 		<>
 			<Box component="form" sx={{ '& > :not(style)': { m: 1, width: '25ch' } }} noValidate autoComplete="off">
-				<TextField
-					id="asdf"
-					label="Server URL"
-					value={appSettingsStore.serverApiUrl}
-					onChange={(event) => {
-						appSettingsStore.serverApiUrl = event.target.value
-					}}
-				/>
+				<Box>
+					<TextField
+						id="server-url"
+						label="Server URL"
+						value={appSettingsStore.serverApiUrl}
+						onChange={(event) => {
+							appSettingsStore.serverApiUrl = event.target.value
+						}}
+					/>
+				</Box>
+				<Box>
+					<TextField
+						id="authorization"
+						label="Authorization"
+						value={appSettingsStore.serverAuthorization ?? ''}
+						onChange={(event) => {
+							appSettingsStore.serverAuthorization = event.target.value || null
+						}}
+					/>
+				</Box>
 			</Box>
 			<Typography>Status: {serverDataStore.connectedStatus}</Typography>
 			<Typography>{serverDataStore.currentOperation}</Typography>

packages/controller/src/lib/ografApi.ts

@@ -17,6 +17,7 @@ export class OgrafApi {
 	private BASE_URL_TEMPLATE = 'http://ograf-server/'
 
 	public baseURL = ''
+	public authorization: string | undefined = undefined
 
 	async fetch<
 		Method extends {
@@ -43,6 +44,10 @@ export class OgrafApi {
 
 			const headers: any = options.headers ?? {}
 			headers['Content-Type'] = 'application/json'
+			if (this.authorization) {
+				headers['Authorization'] = this.authorization
+			}
+
 			options.headers = headers
 
 			// let recurring = false;

packages/controller/src/stores/appSettings.ts

@@ -9,6 +9,7 @@ class AppSettings {
 	private LOCALSTORAGE_ID = 'appSettings'
 
 	public serverApiUrl = 'http://localhost:8080/ograf/v1/'
+	public serverAuthorization: string | null = null
 	public selectedRendererId: string = ''
 
 	private ografApi = OgrafApi.getSingleton()
@@ -21,6 +22,7 @@ class AppSettings {
 
 			if (stateToLoad?.serverApiUrl) this.serverApiUrl = stateToLoad.serverApiUrl
 			if (stateToLoad?.selectedRendererId) this.selectedRendererId = stateToLoad.selectedRendererId
+			if (stateToLoad?.serverAuthorization) this.serverAuthorization = stateToLoad.serverAuthorization || null
 			if (stateToLoad?.queuedGraphics) {
 				stateToLoad.queuedGraphics.forEach(([key, value]) => this.queuedGraphics.set(key, value))
 			}
@@ -31,12 +33,14 @@ class AppSettings {
 		makeObservable(this, {
 			selectedRendererId: observable,
 			serverApiUrl: observable,
+			serverAuthorization: observable,
 		})
 
 		// Store any changes to localhost:
 		autorun(() => {
 			const storedState: StoredState = {
 				serverApiUrl: this.serverApiUrl,
+				serverAuthorization: this.serverAuthorization,
 				selectedRendererId: this.selectedRendererId,
 				queuedGraphics: Array.from(this.queuedGraphics.entries()),
 			}
@@ -47,6 +51,7 @@ class AppSettings {
 		autorun(() => {
 			// Send serverApiUrl to the ografApi singleton:
 			this.ografApi.baseURL = this.serverApiUrl
+			this.ografApi.authorization = this.serverAuthorization ?? undefined
 		})
 	}
 	public getSelectedRendererId(): string | undefined {
@@ -84,6 +89,7 @@ class AppSettings {
 }
 interface StoredState {
 	serverApiUrl: string
+	serverAuthorization: string | null
 	selectedRendererId: string
 	queuedGraphics: [string, QueuedGraphic][]
 }