Add public mode

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>

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 />}

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} />}
         />

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">

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>
+  );
+}