From f16eeb6e452fd91653ab0b3bd6f1e75aeb8217a4 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Fri, 2 May 2025 12:23:49 +0200
Subject: [PATCH] Add public mode

---
 .../context_providers/PublicModeProvider.tsx  | 34 +++++++++++++++++++
 moneymgr_web/src/main.tsx                     | 17 ++++++----
 moneymgr_web/src/routes/HomeRoute.tsx         | 31 +++++++++++++----
 moneymgr_web/src/widgets/BaseLoginPage.tsx    | 16 ++++++++-
 ...meButton.tsx => DarkThemeButtonWidget.tsx} |  6 ++--
 moneymgr_web/src/widgets/MoneyNavList.tsx     |  6 +++-
 moneymgr_web/src/widgets/MoneyWebAppBar.tsx   |  4 ++-
 .../src/widgets/PublicModeButtonWidget.tsx    | 21 ++++++++++++
 8 files changed, 117 insertions(+), 18 deletions(-)
 create mode 100644 moneymgr_web/src/hooks/context_providers/PublicModeProvider.tsx
 rename moneymgr_web/src/widgets/{DarkThemeButton.tsx => DarkThemeButtonWidget.tsx} (79%)
 create mode 100644 moneymgr_web/src/widgets/PublicModeButtonWidget.tsx

diff --git a/moneymgr_web/src/hooks/context_providers/PublicModeProvider.tsx b/moneymgr_web/src/hooks/context_providers/PublicModeProvider.tsx
new file mode 100644
index 0000000..632df61
--- /dev/null
+++ b/moneymgr_web/src/hooks/context_providers/PublicModeProvider.tsx
@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from "react";
+
+const localStorageKey = "public-mode";
+
+interface PublicModeContext {
+  enabled: boolean;
+  setEnabled: (enabled: boolean) => void;
+}
+
+const PublicModeContextK = React.createContext<PublicModeContext | null>(null);
+
+export function PublicModeProvider(p: PropsWithChildren): React.ReactElement {
+  const [enabled, setEnabled] = React.useState(
+    localStorage.getItem(localStorageKey) !== "false"
+  );
+
+  return (
+    <PublicModeContextK
+      value={{
+        enabled: enabled,
+        setEnabled(enabled) {
+          localStorage.setItem(localStorageKey, enabled ? "true" : "false");
+          setEnabled(enabled);
+        },
+      }}
+    >
+      {p.children}
+    </PublicModeContextK>
+  );
+}
+
+export function usePublicMode(): PublicModeContext {
+  return React.use(PublicModeContextK)!;
+}
diff --git a/moneymgr_web/src/main.tsx b/moneymgr_web/src/main.tsx
index e16e621..c7b4ca1 100644
--- a/moneymgr_web/src/main.tsx
+++ b/moneymgr_web/src/main.tsx
@@ -15,6 +15,7 @@ import { LoadingMessageProvider } from "./hooks/context_providers/LoadingMessage
 import { SnackbarProvider } from "./hooks/context_providers/SnackbarProvider.tsx";
 import "./index.css";
 import { AsyncWidget } from "./widgets/AsyncWidget.tsx";
+import { PublicModeProvider } from "./hooks/context_providers/PublicModeProvider.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
@@ -24,12 +25,16 @@ createRoot(document.getElementById("root")!).render(
           <ConfirmDialogProvider>
             <SnackbarProvider>
               <LoadingMessageProvider>
-                <AsyncWidget
-                  loadKey={1}
-                  load={async () => { await ServerApi.LoadConfig(); }}
-                  errMsg="Failed to load static server configuration!"
-                  build={() => <App />}
-                />
+                <PublicModeProvider>
+                  <AsyncWidget
+                    loadKey={1}
+                    load={async () => {
+                      await ServerApi.LoadConfig();
+                    }}
+                    errMsg="Failed to load static server configuration!"
+                    build={() => <App />}
+                  />
+                </PublicModeProvider>
               </LoadingMessageProvider>
             </SnackbarProvider>
           </ConfirmDialogProvider>
diff --git a/moneymgr_web/src/routes/HomeRoute.tsx b/moneymgr_web/src/routes/HomeRoute.tsx
index 731fc20..022edd5 100644
--- a/moneymgr_web/src/routes/HomeRoute.tsx
+++ b/moneymgr_web/src/routes/HomeRoute.tsx
@@ -13,8 +13,10 @@ import { fmtDateFromTime, time } from "../utils/DateUtils";
 import { AmountWidget } from "../widgets/AmountWidget";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
+import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
 
 export function HomeRoute(): React.ReactElement {
+  const publicMode = usePublicMode().enabled;
   const account = useAccounts();
 
   const loadKey = React.useRef(1);
@@ -62,13 +64,28 @@ export function HomeRoute(): React.ReactElement {
         </Tooltip>
       }
     >
-      <AsyncWidget
-        ready={global !== undefined}
-        loadKey={loadKey.current}
-        load={load}
-        errMsg="Failed to load statistics!"
-        build={() => <StatsDashboard global={global!} lastYear={lastYear!} />}
-      />
+      {publicMode ? (
+        <Typography
+          variant="body1"
+          style={{
+            textAlign: "center",
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          Dasbhoard is hidden when public mode is enabled.
+        </Typography>
+      ) : (
+        <AsyncWidget
+          ready={global !== undefined}
+          loadKey={loadKey.current}
+          load={load}
+          errMsg="Failed to load statistics!"
+          build={() => <StatsDashboard global={global!} lastYear={lastYear!} />}
+        />
+      )}
     </MoneyMgrWebRouteContainer>
   );
 }
diff --git a/moneymgr_web/src/widgets/BaseLoginPage.tsx b/moneymgr_web/src/widgets/BaseLoginPage.tsx
index 10b92a6..7d46bcc 100644
--- a/moneymgr_web/src/widgets/BaseLoginPage.tsx
+++ b/moneymgr_web/src/widgets/BaseLoginPage.tsx
@@ -8,6 +8,8 @@ import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { Link, Outlet } from "react-router-dom";
 import loginSplashImage from "./mufid-majnun-LVcjYwuHQlg-unsplash.jpg";
+import { PublicModeButton } from "./PublicModeButtonWidget";
+import { DarkThemeButton } from "./DarkThemeButtonWidget";
 
 function Copyright(props: any): React.ReactElement {
   return (
@@ -86,7 +88,19 @@ export function BaseLoginPage() {
           {/* inner page */}
           <Outlet />
 
-          <Copyright sx={{ mt: 5 }} style={{ margin: " 40px 0px" }} />
+          <Copyright sx={{ mt: 5 }} style={{ margin: "40px 0px" }} />
+
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              width: "100%",
+              marginTop: "50px",
+            }}
+          >
+            <PublicModeButton />
+            <DarkThemeButton />
+          </div>
         </Box>
       </Grid>
     </Grid>
diff --git a/moneymgr_web/src/widgets/DarkThemeButton.tsx b/moneymgr_web/src/widgets/DarkThemeButtonWidget.tsx
similarity index 79%
rename from moneymgr_web/src/widgets/DarkThemeButton.tsx
rename to moneymgr_web/src/widgets/DarkThemeButtonWidget.tsx
index 8629092..c996693 100644
--- a/moneymgr_web/src/widgets/DarkThemeButton.tsx
+++ b/moneymgr_web/src/widgets/DarkThemeButtonWidget.tsx
@@ -7,9 +7,11 @@ export function DarkThemeButton(): React.ReactElement {
   const darkTheme = useDarkTheme();
 
   return (
-    <Tooltip title="Activer / désactiver le mode sombre">
+    <Tooltip title="Enable / Disable dark theme">
       <IconButton
-        onClick={() => { darkTheme.setEnabled(!darkTheme.enabled); }}
+        onClick={() => {
+          darkTheme.setEnabled(!darkTheme.enabled);
+        }}
         style={{ color: "inherit" }}
       >
         {!darkTheme.enabled ? <DarkModeIcon /> : <Brightness7Icon />}
diff --git a/moneymgr_web/src/widgets/MoneyNavList.tsx b/moneymgr_web/src/widgets/MoneyNavList.tsx
index 5d99412..61099cb 100644
--- a/moneymgr_web/src/widgets/MoneyNavList.tsx
+++ b/moneymgr_web/src/widgets/MoneyNavList.tsx
@@ -14,8 +14,10 @@ import { useAccounts } from "../hooks/AccountsListProvider";
 import { AccountWidget } from "./AccountWidget";
 import { RouterLink } from "./RouterLink";
 import { AmountWidget } from "./AmountWidget";
+import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
 
 export function MoneyNavList(): React.ReactElement {
+  const publicMode = usePublicMode();
   const accounts = useAccounts();
   return (
     <List
@@ -62,7 +64,9 @@ export function MoneyNavList(): React.ReactElement {
         <NavLink
           key={a.id}
           label={a.name}
-          secondaryLabel={<AmountWidget amount={a.balance} />}
+          secondaryLabel={
+            publicMode.enabled ? <></> : <AmountWidget amount={a.balance} />
+          }
           uri={`/account/${a.id}`}
           icon={<AccountWidget account={a} />}
         />
diff --git a/moneymgr_web/src/widgets/MoneyWebAppBar.tsx b/moneymgr_web/src/widgets/MoneyWebAppBar.tsx
index 8235b2d..ef0d8a8 100644
--- a/moneymgr_web/src/widgets/MoneyWebAppBar.tsx
+++ b/moneymgr_web/src/widgets/MoneyWebAppBar.tsx
@@ -9,8 +9,9 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { useAuthInfo } from "./BaseAuthenticatedPage";
-import { DarkThemeButton } from "./DarkThemeButton";
+import { DarkThemeButton } from "./DarkThemeButtonWidget";
 import { RouterLink } from "./RouterLink";
+import { PublicModeButton } from "./PublicModeButtonWidget";
 
 export function MoneyWebAppBar(p: {
   onSignOut: () => void;
@@ -41,6 +42,7 @@ export function MoneyWebAppBar(p: {
         </Typography>
 
         <div>
+          <PublicModeButton />
           <DarkThemeButton />
 
           <Button size="large" color="inherit">
diff --git a/moneymgr_web/src/widgets/PublicModeButtonWidget.tsx b/moneymgr_web/src/widgets/PublicModeButtonWidget.tsx
new file mode 100644
index 0000000..61e6fa8
--- /dev/null
+++ b/moneymgr_web/src/widgets/PublicModeButtonWidget.tsx
@@ -0,0 +1,21 @@
+import PublicIcon from "@mui/icons-material/Public";
+import PublicOffIcon from "@mui/icons-material/PublicOff";
+import { IconButton, Tooltip } from "@mui/material";
+import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
+
+export function PublicModeButton(): React.ReactElement {
+  const publicMode = usePublicMode();
+
+  return (
+    <Tooltip title={`${publicMode.enabled ? "Disable" : "Enable"} public mode`}>
+      <IconButton
+        onClick={() => {
+          publicMode.setEnabled(!publicMode.enabled);
+        }}
+        style={{ color: "inherit" }}
+      >
+        {!publicMode.enabled ? <PublicOffIcon /> : <PublicIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+}