Add base login route

central_frontend/src/hooks/context_providers/AlertDialogProvider.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import React, { PropsWithChildren } from "react";
+
+type AlertContext = (message: string, title?: string) => Promise<void>;
+
+const AlertContextK = React.createContext<AlertContext | null>(null);
+
+export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [title, setTitle] = React.useState<string | undefined>(undefined);
+  const [message, setMessage] = React.useState("");
+
+  const cb = React.useRef<null | (() => void)>(null);
+
+  const handleClose = () => {
+    setOpen(false);
+
+    if (cb.current !== null) cb.current();
+    cb.current = null;
+  };
+
+  const hook: AlertContext = (message, title) => {
+    setTitle(title);
+    setMessage(message);
+    setOpen(true);
+
+    return new Promise((res) => {
+      cb.current = res;
+    });
+  };
+
+  return (
+    <>
+      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
+
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} autoFocus>
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
+export function useAlert(): AlertContext {
+  return React.useContext(AlertContextK)!;
+}

central_frontend/src/hooks/context_providers/ConfirmDialogProvider.tsx

@@ -0,0 +1,88 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import React, { PropsWithChildren } from "react";
+
+type ConfirmContext = (
+  message: string,
+  title?: string,
+  confirmButton?: string
+) => Promise<boolean>;
+
+const ConfirmContextK = React.createContext<ConfirmContext | null>(null);
+
+export function ConfirmDialogProvider(
+  p: PropsWithChildren
+): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [title, setTitle] = React.useState<string | undefined>(undefined);
+  const [message, setMessage] = React.useState("");
+  const [confirmButton, setConfirmButton] = React.useState<string | undefined>(
+    undefined
+  );
+
+  const cb = React.useRef<null | ((a: boolean) => void)>(null);
+
+  const handleClose = (confirm: boolean) => {
+    setOpen(false);
+
+    if (cb.current !== null) cb.current(confirm);
+    cb.current = null;
+  };
+
+  const hook: ConfirmContext = (message, title, confirmButton) => {
+    setTitle(title);
+    setMessage(message);
+    setConfirmButton(confirmButton);
+    setOpen(true);
+
+    return new Promise((res) => {
+      cb.current = res;
+    });
+  };
+
+  const keyUp = (e: React.KeyboardEvent) => {
+    if (e.code === "Enter") handleClose(true);
+  };
+
+  return (
+    <>
+      <ConfirmContextK.Provider value={hook}>
+        {p.children}
+      </ConfirmContextK.Provider>
+
+      <Dialog
+        open={open}
+        onClose={() => handleClose(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        onKeyUp={keyUp}
+      >
+        {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => handleClose(false)} autoFocus>
+            Annuler
+          </Button>
+          <Button onClick={() => handleClose(true)} color="error">
+            {confirmButton ?? "Confirmer"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
+export function useConfirm(): ConfirmContext {
+  return React.useContext(ConfirmContextK)!;
+}

central_frontend/src/hooks/context_providers/DarkThemeProvider.tsx

@@ -0,0 +1,50 @@
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import React from "react";
+import { PropsWithChildren } from "react";
+
+const localStorageKey = "dark-theme";
+
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+  },
+});
+
+interface DarkThemeContext {
+  enabled: boolean;
+  setEnabled: (enabled: boolean) => void;
+}
+
+const DarkThemeContextK = React.createContext<DarkThemeContext | null>(null);
+
+export function DarkThemeProvider(p: PropsWithChildren): React.ReactElement {
+  const [enabled, setEnabled] = React.useState(
+    localStorage.getItem(localStorageKey) !== "false"
+  );
+
+  return (
+    <DarkThemeContextK.Provider
+      value={{
+        enabled: enabled,
+        setEnabled(enabled) {
+          localStorage.setItem(localStorageKey, enabled ? "true" : "false");
+          setEnabled(enabled);
+        },
+      }}
+    >
+      <ThemeProvider theme={enabled ? darkTheme : lightTheme}>
+        {p.children}
+      </ThemeProvider>
+    </DarkThemeContextK.Provider>
+  );
+}
+
+export function useDarkTheme(): DarkThemeContext {
+  return React.useContext(DarkThemeContextK)!;
+}

central_frontend/src/hooks/context_providers/LoadingMessageProvider.tsx

@@ -0,0 +1,64 @@
+import {
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+} from "@mui/material";
+import React, { PropsWithChildren } from "react";
+
+type LoadingMessageContext = {
+  show: (message: string) => void;
+  hide: () => void;
+};
+
+const LoadingMessageContextK =
+  React.createContext<LoadingMessageContext | null>(null);
+
+export function LoadingMessageProvider(
+  p: PropsWithChildren
+): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [message, setMessage] = React.useState("");
+
+  const hook: LoadingMessageContext = {
+    show(message) {
+      setMessage(message);
+      setOpen(true);
+    },
+    hide() {
+      setMessage("");
+      setOpen(false);
+    },
+  };
+
+  return (
+    <>
+      <LoadingMessageContextK.Provider value={hook}>
+        {p.children}
+      </LoadingMessageContextK.Provider>
+
+      <Dialog open={open}>
+        <DialogContent>
+          <DialogContentText>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <CircularProgress style={{ marginRight: "15px" }} />
+
+              {message}
+            </div>
+          </DialogContentText>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export function useLoadingMessage(): LoadingMessageContext {
+  return React.useContext(LoadingMessageContextK)!;
+}

central_frontend/src/hooks/context_providers/SnackbarProvider.tsx

@@ -0,0 +1,43 @@
+import { Snackbar } from "@mui/material";
+
+import React, { PropsWithChildren } from "react";
+
+type SnackbarContext = (message: string, duration?: number) => void;
+
+const SnackbarContextK = React.createContext<SnackbarContext | null>(null);
+
+export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
+  const [message, setMessage] = React.useState("");
+  const [duration, setDuration] = React.useState(0);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const hook: SnackbarContext = (message, duration) => {
+    setMessage(message);
+    setDuration(duration ?? 6000);
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <SnackbarContextK.Provider value={hook}>
+        {p.children}
+      </SnackbarContextK.Provider>
+
+      <Snackbar
+        open={open}
+        autoHideDuration={duration}
+        onClose={handleClose}
+        message={message}
+      />
+    </>
+  );
+}
+
+export function useSnackbar(): SnackbarContext {
+  return React.useContext(SnackbarContextK)!;
+}