Can set member email and phone number

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -3,6 +3,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Grid, Stack } from "@mui/material";
+import * as EmailValidator from "email-validator";
 import React from "react";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import { useNavigate, useParams } from "react-router-dom";
@@ -494,7 +495,32 @@ export function MemberPage(p: {
 
         {/* Contact */}
         <Grid item sm={12} md={6}>
-          <PropertiesBox title="Contact">TODO</PropertiesBox>
+          <PropertiesBox title="Contact">
+            {/* Email */}
+            <PropEdit
+              label="Adresse mail"
+              editable={p.editing}
+              value={member.email}
+              onValueChange={(v) => {
+                member.email = v;
+                updatedMember();
+              }}
+              size={ServerApi.Config.constraints.member_email}
+              checkValue={(e) => EmailValidator.validate(e)}
+            />
+
+            {/* Phone number */}
+            <PropEdit
+              label="Téléphone"
+              editable={p.editing}
+              value={member.phone}
+              onValueChange={(v) => {
+                member.phone = v;
+                updatedMember();
+              }}
+              size={ServerApi.Config.constraints.member_phone}
+            />
+          </PropertiesBox>
         </Grid>
 
         {/* Bio */}

geneit_app/src/widgets/forms/MemberInput.tsx

@@ -1,25 +1,21 @@
+import { mdiCross } from "@mdi/js";
+import Icon from "@mdi/react";
+import ClearIcon from "@mui/icons-material/Clear";
 import {
   Autocomplete,
-  Avatar,
-  Box,
   IconButton,
-  ListItem,
   ListItemAvatar,
   ListItemButton,
   ListItemSecondaryAction,
   ListItemText,
   TextField,
   Typography,
-  autocompleteClasses,
 } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 import { Member, fmtDate } from "../../api/MemberApi";
 import { useFamily } from "../BaseFamilyRoute";
-import React from "react";
 import { MemberPhoto } from "../MemberPhoto";
-import Icon from "@mdi/react";
-import { mdiCross } from "@mdi/js";
-import { useNavigate } from "react-router-dom";
 
 export function MemberInput(p: {
   editable: boolean;

geneit_app/src/widgets/forms/PropEdit.tsx

@@ -10,6 +10,7 @@ export function PropEdit(p: {
   value?: string;
   onValueChange: (newVal: string | undefined) => void;
   size: LenConstraint;
+  checkValue?: (s: string) => boolean;
 }): React.ReactElement {
   if (((!p.editable && p.value) ?? "") === "") return <></>;
 
@@ -30,6 +31,13 @@ export function PropEdit(p: {
       }}
       variant={p.editable ? "filled" : "standard"}
       style={{ width: "100%", marginBottom: "15px" }}
+      error={
+        (p.checkValue &&
+          p.value &&
+          p.value.length > 0 &&
+          !p.checkValue(p.value)) ||
+        false
+      }
     />
   );
 }