Managed to load server configuration from WebUI

remote_frontend/.env

@@ -0,0 +1 @@
+VITE_APP_BACKEND=http://localhost:8002/api

remote_frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fluentui/react-components": "^9.49.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

remote_frontend/src/App.tsx

@@ -1 +1,14 @@
-export function App(): React.ReactElement {}
+import { ServerApi } from "./api/ServerApi";
+import { AsyncWidget } from "./widgets/AsyncWidget";
+
+export function App() {
+  return (
+    <AsyncWidget
+      loadKey={1}
+      errMsg="Failed to load server configuration!"
+      load={ServerApi.LoadConfig}
+      loadingMessage="Loading server configuration..."
+      build={() => <>todo</>}
+    />
+  );
+}

remote_frontend/src/api/ApiClient.ts

@@ -0,0 +1,174 @@
+interface RequestParams {
+  uri: string;
+  method: "GET" | "POST" | "DELETE" | "PATCH" | "PUT";
+  allowFail?: boolean;
+  jsonData?: any;
+  formData?: FormData;
+  upProgress?: (progress: number) => void;
+  downProgress?: (e: { progress: number; total: number }) => void;
+}
+
+interface APIResponse {
+  data: any;
+  status: number;
+}
+
+export class ApiError extends Error {
+  constructor(message: string, public code: number, public data: any) {
+    super(`HTTP status: ${code}\nMessage: ${message}\nData=${data}`);
+  }
+}
+
+export class APIClient {
+  /**
+   * Get backend URL
+   */
+  static backendURL(): string {
+    const URL = import.meta.env.VITE_APP_BACKEND ?? "";
+    if (URL.length === 0) throw new Error("Backend URL undefined!");
+    return URL;
+  }
+
+  /**
+   * Check out whether the backend is accessed through
+   * HTTPS or not
+   */
+  static IsBackendSecure(): boolean {
+    return this.backendURL().startsWith("https");
+  }
+
+  /**
+   * Perform a request on the backend
+   */
+  static async exec(args: RequestParams): Promise<APIResponse> {
+    let body: string | undefined | FormData = undefined;
+    let headers: any = {};
+
+    // JSON request
+    if (args.jsonData) {
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify(args.jsonData);
+    }
+
+    // Form data request
+    else if (args.formData) {
+      body = args.formData;
+    }
+
+    const url = this.backendURL() + args.uri;
+
+    let data;
+    let status: number;
+
+    // Make the request with XMLHttpRequest
+    if (args.upProgress) {
+      const res: XMLHttpRequest = await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.upload.addEventListener("progress", (e) =>
+          args.upProgress!(e.loaded / e.total)
+        );
+        xhr.addEventListener("load", () => resolve(xhr));
+        xhr.addEventListener("error", () =>
+          reject(new Error("File upload failed"))
+        );
+        xhr.addEventListener("abort", () =>
+          reject(new Error("File upload aborted"))
+        );
+        xhr.addEventListener("timeout", () =>
+          reject(new Error("File upload timeout"))
+        );
+        xhr.open(args.method, url, true);
+        xhr.withCredentials = true;
+        for (const key in headers) {
+          if (headers.hasOwnProperty(key))
+            xhr.setRequestHeader(key, headers[key]);
+        }
+        xhr.send(body);
+      });
+
+      status = res.status;
+      if (res.responseType === "json") data = JSON.parse(res.responseText);
+      else data = res.response;
+    }
+
+    // Make the request with fetch
+    else {
+      const res = await fetch(url, {
+        method: args.method,
+        body: body,
+        headers: headers,
+        credentials: "include",
+      });
+
+      // Process response
+      // JSON response
+      if (res.headers.get("content-type") === "application/json")
+        data = await res.json();
+      // Text / XML response
+      else if (
+        ["application/xml", "text/plain"].includes(
+          res.headers.get("content-type") ?? ""
+        )
+      )
+        data = await res.text();
+      // Binary file, tracking download progress
+      else if (res.body !== null && args.downProgress) {
+        // Track download progress
+        const contentEncoding = res.headers.get("content-encoding");
+        const contentLength = contentEncoding
+          ? null
+          : res.headers.get("content-length");
+
+        const total = parseInt(contentLength ?? "0", 10);
+        let loaded = 0;
+
+        const resInt = new Response(
+          new ReadableStream({
+            start(controller) {
+              const reader = res.body!.getReader();
+
+              const read = async () => {
+                try {
+                  const ret = await reader.read();
+                  if (ret.done) {
+                    controller.close();
+                    return;
+                  }
+                  loaded += ret.value.byteLength;
+                  args.downProgress!({ progress: loaded, total });
+                  controller.enqueue(ret.value);
+                  read();
+                } catch (e) {
+                  console.error(e);
+                  controller.error(e);
+                }
+              };
+
+              read();
+            },
+          })
+        );
+
+        data = await resInt.blob();
+      }
+
+      // Do not track progress (binary file)
+      else data = await res.blob();
+
+      status = res.status;
+    }
+
+    // Handle expired tokens
+    if (status === 412) {
+      window.location.href = "/";
+    }
+
+    if (!args.allowFail && (status < 200 || status > 299))
+      throw new ApiError("Request failed!", status, data);
+
+    return {
+      data: data,
+      status: status,
+    };
+  }
+}

remote_frontend/src/api/ServerApi.ts

@@ -0,0 +1,30 @@
+import { APIClient } from "./ApiClient";
+
+export interface ServerConfig {
+  authenticated: boolean;
+  disable_auth: boolean;
+}
+
+let config: ServerConfig | null = null;
+
+export class ServerApi {
+  /**
+   * Get server configuration
+   */
+  static async LoadConfig(): Promise<void> {
+    config = (
+      await APIClient.exec({
+        uri: "/server/config",
+        method: "GET",
+      })
+    ).data;
+  }
+
+  /**
+   * Get cached configuration
+   */
+  static get Config(): ServerConfig {
+    if (config === null) throw new Error("Missing configuration!");
+    return config;
+  }
+}

remote_frontend/src/index.css

@@ -1,7 +1,14 @@
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
 }

remote_frontend/src/main.tsx

@@ -2,9 +2,18 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import { App } from "./App";
+import {
+  FluentProvider,
+  teamsHighContrastTheme,
+} from "@fluentui/react-components";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <FluentProvider
+      theme={teamsHighContrastTheme}
+      style={{ display: "flex", flex: 1 }}
+    >
+      <App />
+    </FluentProvider>
   </React.StrictMode>
 );

remote_frontend/src/widgets/AsyncWidget.tsx

@@ -0,0 +1,77 @@
+import { Button, Spinner } from "@fluentui/react-components";
+import React, { useEffect, useRef, useState } from "react";
+
+enum State {
+  Loading,
+  Ready,
+  Error,
+}
+
+export function AsyncWidget(p: {
+  loadKey: any;
+  load: () => Promise<void>;
+  errMsg: string;
+  build: () => React.ReactElement;
+  ready?: boolean;
+  buildLoading?: () => React.ReactElement;
+  buildError?: (e: string) => React.ReactElement;
+  errAdditionalElement?: () => React.ReactElement;
+  loadingMessage?: string;
+}): React.ReactElement {
+  const [state, setState] = useState(State.Loading);
+
+  const counter = useRef<any | null>(null);
+
+  const load = async () => {
+    try {
+      setState(State.Loading);
+      await p.load();
+      setState(State.Ready);
+    } catch (e) {
+      console.error(e);
+      setState(State.Error);
+    }
+  };
+
+  useEffect(() => {
+    if (counter.current === p.loadKey) return;
+    counter.current = p.loadKey;
+
+    load();
+  });
+
+  if (state === State.Error)
+    return (
+      p.buildError?.(p.errMsg) ?? (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            flex: "1",
+            flexDirection: "column",
+          }}
+        >
+          <div style={{ margin: "50px" }}>{p.errMsg}</div>
+
+          <Button onClick={load}>Try again</Button>
+
+          {p.errAdditionalElement && p.errAdditionalElement()}
+        </div>
+      )
+    );
+
+  if (state === State.Loading || p.ready === false)
+    return (
+      p.buildLoading?.() ?? (
+        <Spinner
+          labelPosition="below"
+          label={p.loadingMessage}
+          style={{ margin: "auto" }}
+        />
+      )
+    );
+
+  return p.build();
+}