Can set member photo

geneit_app/src/dialogs/ImageCropperDialog.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Slider,
+} from "@mui/material";
+import React from "react";
+import Cropper, { Area } from "react-easy-crop";
+
+export function ImageCropperDialog(p: {
+  src: string;
+  onCancel: () => void;
+  onSubmit: (croppedArea: Area | undefined) => void;
+  processing: boolean;
+}): React.ReactElement {
+  const [crop, setCrop] = React.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React.useState(1);
+  const [croppedArea, setCroppedArea] = React.useState<Area>();
+
+  const submit = () => {
+    p.onSubmit(croppedArea);
+  };
+
+  return (
+    <Dialog open={true} onClose={p.onCancel}>
+      <DialogTitle>Rogner l'image</DialogTitle>
+      <DialogContent>
+        <div style={{ width: "400px", height: "350px" }}>
+          <div style={{ height: "320px" }}>
+            <Cropper
+              image={p.src}
+              crop={crop}
+              zoom={zoom}
+              aspect={4 / 5}
+              onCropChange={setCrop}
+              onCropComplete={(_a, b) => setCroppedArea(b)}
+              onZoomChange={setZoom}
+              maxZoom={4}
+            />
+          </div>
+
+          <Slider
+            value={zoom}
+            step={0.1}
+            min={1}
+            max={4}
+            onChange={(_e, v) => setZoom(Number(v))}
+          />
+        </div>
+      </DialogContent>
+      <DialogActions>
+        {p.processing ? (
+          <CircularProgress size={"1rem"} />
+        ) : (
+          <>
+            <Button onClick={p.onCancel}>Annuler</Button>
+            <Button onClick={submit} autoFocus>
+              Envoyer
+            </Button>
+          </>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}