Can set member email and phone number

geneit_app/package-lock.json

@@ -25,6 +25,7 @@
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
         "date-and-time": "^3.0.1",
+        "email-validator": "^2.0.4",
         "filesize": "^10.0.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6767,6 +6768,14 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.454.tgz",
       "integrity": "sha512-pmf1rbAStw8UEQ0sr2cdJtWl48ZMuPD9Sto8HVQOq9vx9j2WgDEN6lYoaqFvqEHYOmGA9oRGn7LqWI9ta0YugQ=="
     },
+    "node_modules/email-validator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==",
+      "engines": {
+        "node": ">4.0"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",

geneit_app/package.json

@@ -20,6 +20,7 @@
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
     "date-and-time": "^3.0.1",
+    "email-validator": "^2.0.4",
     "filesize": "^10.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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