Can change invitation code

geneit_app/src/api/FamilyApi.ts

@@ -132,4 +132,14 @@ export class FamilyApi {
       uri: `/family/${id}/leave`,
     });
   }
+
+  /**
+   * Renew a family invitation code
+   */
+  static async RenewInvitationCode(id: number): Promise<void> {
+    await APIClient.exec({
+      method: "POST",
+      uri: `/family/${id}/renew_invitation_code`,
+    });
+  }
 }

geneit_app/src/routes/FamiliesListRoute.tsx

@@ -211,16 +211,19 @@ function FamilyCard(p: {
   return (
     <Card style={{ margin: "5px" }}>
       <CardActionArea>
-        {" "}
         <RouterLink to={p.f.BaseURL}>
           <CardContent>
             <Typography gutterBottom variant="h5" component="div">
               {p.f.name}
             </Typography>
             <Typography variant="body2" color="text.secondary">
+              <span style={{ fontStyle: "italic" }}>
+                {p.f.is_admin ? "Administrateur" : "Membre"}
+              </span>
+              <br />
               {p.f.count_members === 1
                 ? "1 membre"
-                : p.f.count_members + " membres"}{" "}
+                : p.f.count_members + " membres"}
               <br />
               {p.f.count_admins === 1
                 ? "1 administrateur"

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -1,6 +1,7 @@
 import {
   mdiAccountMultiple,
   mdiCog,
+  mdiContentCopy,
   mdiCrowd,
   mdiFamilyTree,
   mdiHumanMaleFemale,
@@ -11,19 +12,24 @@ import HomeIcon from "@mui/icons-material/Home";
 import {
   Box,
   Divider,
+  IconButton,
   List,
+  ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
   Tooltip,
 } from "@mui/material";
+import { mdiRefresh } from "@mdi/js";
 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";
+import { useConfirm } from "./ConfirmDialogProvider";
+import { useAlert } from "./AlertDialogProvider";
 
 interface FamilyContext {
   family: Family;
@@ -35,6 +41,8 @@ const FamilyContextK = React.createContext<FamilyContext | null>(null);
 export function BaseFamilyRoute(): React.ReactElement {
   const { familyId } = useParams();
   const snackbar = useSnackbar();
+  const alert = useAlert();
+  const confirm = useConfirm();
 
   const [family, setFamily] = React.useState<null | Family>(null);
 
@@ -54,10 +62,30 @@ export function BaseFamilyRoute(): React.ReactElement {
     snackbar("Le code d'invitation a été copié dans le presse papier !");
   };
 
+  const changeInvitationCode = async () => {
+    try {
+      if (
+        !(await confirm.confirm(
+          "Voulez-vous vraiment générer un nouveau code d'invitation pour cette famille ? Cette action aura pour effet d'invalider l'ancien code !"
+        ))
+      )
+        return;
+
+      await FamilyApi.RenewInvitationCode(family!.family_id);
+
+      snackbar("Le code d'invitation a été changé avec succès !");
+
+      onReload();
+    } catch (e) {
+      console.error(e);
+      alert.alert("Echec du renouvellement du code d'invitation !");
+    }
+  };
+
   return (
     <AsyncWidget
       ready={family != null}
-      loadKey={`${familyId}-${loadKey}`}
+      loadKey={`${familyId}-${loadKey.current}`}
       load={load}
       errMsg="Échec du chargement des informations de la famille !"
       build={() => (
@@ -76,6 +104,7 @@ export function BaseFamilyRoute(): React.ReactElement {
             <List
               component="nav"
               sx={{
+                minWidth: "280px",
                 backgroundColor: (theme) =>
                   theme.palette.mode === "light"
                     ? theme.palette.grey[100]
@@ -118,8 +147,27 @@ export function BaseFamilyRoute(): React.ReactElement {
               />
 
               {/* Invitation code */}
+
+              <ListItem
+                dense
+                secondaryAction={
+                  <span>
                     <Tooltip title="Copier le code d'invitation dans le presse papier">
-                <ListItemButton onClick={copyInvitationCode}>
+                      <IconButton onClick={copyInvitationCode}>
+                        <Icon path={mdiContentCopy} size={0.75} />
+                      </IconButton>
+                    </Tooltip>
+
+                    {family!.is_admin && (
+                      <Tooltip title="Changer le code d'activation">
+                        <IconButton onClick={changeInvitationCode}>
+                          <Icon path={mdiRefresh} size={0.75} />
+                        </IconButton>
+                      </Tooltip>
+                    )}
+                  </span>
+                }
+              >
                 <ListItemIcon>
                   <Icon path={mdiLockCheck} size={1} />
                 </ListItemIcon>
@@ -127,8 +175,7 @@ export function BaseFamilyRoute(): React.ReactElement {
                   primary="Code d'invitation"
                   secondary={family?.invitation_code}
                 />
-                </ListItemButton>
-              </Tooltip>
+              </ListItem>
             </List>
 
             <Box