Load server config on react app

geneit_app/.env

@@ -0,0 +1 @@
+REACT_APP_BACKEND=http://localhost:8000

geneit_app/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

geneit_app/src/api/ApiClient.ts

@@ -0,0 +1,52 @@
+interface APIResponse {
+  data: any;
+  status: number;
+}
+
+export class ApiError extends Error {
+  constructor(message: string, public code: number, public data: any) {
+    super(message);
+  }
+}
+
+export class APIClient {
+  /**
+   * Get backend URL
+   */
+  static backendURL(): string {
+    const URL = process.env.REACT_APP_BACKEND ?? "";
+    if (URL.length === 0) throw new Error("Backend URL undefined!");
+    return URL;
+  }
+
+  /**
+   * Perform a request on the backend
+   */
+  static async exec(args: {
+    uri: string;
+    method: "GET" | "POST" | "DELETE";
+    allowFail?: boolean;
+    jsonData?: any;
+  }): Promise<APIResponse> {
+    const res = await fetch(this.backendURL() + args.uri, {
+      method: args.method,
+      body: args.jsonData ? JSON.stringify(args.jsonData) : undefined,
+      headers: {
+        "Content-Type": args.jsonData ? "application/json" : "text/plain",
+      },
+    });
+
+    let data;
+    if (res.headers.get("content-type") === "application/json")
+      data = await res.json();
+    else data = await res.blob();
+
+    if (!args.allowFail && !res.ok)
+      throw new ApiError("Request failed!", res.status, data);
+
+    return {
+      data: data,
+      status: res.status,
+    };
+  }
+}

geneit_app/src/api/ServerApi.ts

@@ -0,0 +1,47 @@
+import { APIClient } from "./ApiClient";
+
+interface LenConstraint {
+  min: number;
+  max: number;
+}
+
+interface Constraints {
+  mail_len: LenConstraint;
+  user_name_len: LenConstraint;
+  password_len: LenConstraint;
+}
+
+interface OIDCProvider {
+  id: string;
+  name: string;
+}
+
+export interface ServerConfig {
+  constraints: Constraints;
+  mail: string;
+  oidc_providers: OIDCProvider[];
+}
+
+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 Config(): ServerConfig {
+    if (config === null) throw new Error("Missing configuration!");
+    return config;
+  }
+}

geneit_app/src/index.tsx

@@ -1,17 +1,30 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { ServerApi } from "./api/ServerApi";
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+async function init() {
+  try {
+    await ServerApi.LoadConfig();
+
+    const root = ReactDOM.createRoot(
+      document.getElementById("root") as HTMLElement
+    );
+
+    root.render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+  } catch (e) {
+    console.error(e);
+    alert("Echec de l'initialisation de l'application !");
+  }
+}
+
+init();
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))