Can copy invitation code to clipboard

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -4,6 +4,7 @@ import {
   mdiCrowd,
   mdiFamilyTree,
   mdiHumanMaleFemale,
+  mdiLockCheck,
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import HomeIcon from "@mui/icons-material/Home";
@@ -15,12 +16,14 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
+  Tooltip,
 } from "@mui/material";
 import React from "react";
 import { Outlet, useLocation, useParams } from "react-router-dom";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { AsyncWidget } from "./AsyncWidget";
 import { RouterLink } from "./RouterLink";
+import { useSnackbar } from "./SnackbarProvider";
 
 interface FamilyContext {
   family: Family;
@@ -31,6 +34,7 @@ const FamilyContextK = React.createContext<FamilyContext | null>(null);
 
 export function BaseFamilyRoute(): React.ReactElement {
   const { familyId } = useParams();
+  const snackbar = useSnackbar();
 
   const [family, setFamily] = React.useState<null | Family>(null);
 
@@ -45,6 +49,11 @@ export function BaseFamilyRoute(): React.ReactElement {
     setFamily(null);
   };
 
+  const copyInvitationCode = async () => {
+    navigator.clipboard.writeText(family!.invitation_code);
+    snackbar("Le code d'invitation a été copié dans le presse papier !");
+  };
+
   return (
     <AsyncWidget
       ready={family != null}
@@ -58,8 +67,21 @@ export function BaseFamilyRoute(): React.ReactElement {
             reloadFamilyInfo: onReload,
           }}
         >
-          <Box sx={{ display: "flex", flex: "2" }}>
-            <List component="nav">
+          <Box
+            sx={{
+              display: "flex",
+              flex: "2",
+            }}
+          >
+            <List
+              component="nav"
+              sx={{
+                backgroundColor: (theme) =>
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : "background.paper",
+              }}
+            >
               <FamilyLink icon={<HomeIcon />} label="Accueil" uri="" />
 
               <FamilyLink
@@ -81,9 +103,7 @@ export function BaseFamilyRoute(): React.ReactElement {
               />
 
               <Divider sx={{ my: 1 }} />
-              <ListSubheader component="div" inset>
-                Administration
-              </ListSubheader>
+              <ListSubheader component="div">Administration</ListSubheader>
 
               <FamilyLink
                 icon={<Icon path={mdiAccountMultiple} size={1} />}
@@ -96,15 +116,24 @@ export function BaseFamilyRoute(): React.ReactElement {
                 label="Paramètres"
                 uri="settings"
               />
+
+              {/* Invitation code */}
+              <Tooltip title="Copier le code d'invitation dans le presse papier">
+                <ListItemButton onClick={copyInvitationCode}>
+                  <ListItemIcon>
+                    <Icon path={mdiLockCheck} size={1} />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Code d'invitation"
+                    secondary={family?.invitation_code}
+                  />
+                </ListItemButton>
+              </Tooltip>
             </List>
 
             <Box
               component="main"
               sx={{
-                backgroundColor: (theme) =>
-                  theme.palette.mode === "light"
-                    ? theme.palette.grey[100]
-                    : theme.palette.grey[900],
                 flexGrow: 1,
                 overflow: "auto",
                 padding: "20px",