Moving on implementing invitations

src/components/invitation/Invitation.tsx

@@ -1,4 +1,6 @@
-import { Component, createSignal } from 'solid-js';
+import { Box, Button, TextField } from '@suid/material';
+import { Component, createEffect, createSignal, Show } from 'solid-js';
+import Dialog from '../dialog';
 
 interface props {}
 
@@ -13,12 +15,16 @@ export const searchInvitation = () => {
       const payload = hash.slice(1);
       const decoded = atob(payload);
       const url = new URL(decoded);
-      setInvitation(url);
-      console.log({
-        caller: 'Invitation / searchInvitation',
-        hash,
-        invitation: decoded,
-      });
+      fetch(url)
+        .then((response) => response.json())
+        .then((data) => {
+          setInvitation({ url, data });
+          console.log({
+            caller: 'Invitation / searchInvitation',
+            hash,
+            invitation: invitation(),
+          });
+        });
     } catch {
       console.warn({
         caller: 'Invitation / searchInvitation',
@@ -30,7 +36,62 @@ export const searchInvitation = () => {
 };
 
 const Invitation: Component<props> = (props) => {
-  return <></>;
+  createEffect(() => {
+    console.log({
+      caller: 'Invitation / createEffect',
+      invitation: invitation(),
+    });
+  });
+
+  const closeHandler = () => {};
+  const submitHandler = async () => {
+    try {
+      const response = await fetch(
+        `${invitation().url.href}/${invitation().code}`
+      );
+      const codeData = await response.json();
+      setInvitation({ ...invitation(), codeData });
+    } catch (error) {}
+  };
+
+  const codeChangeHandler = (event: any) => {
+    setInvitation({ ...invitation(), code: event.target.value });
+  };
+
+  return (
+    <Dialog
+      open={!!invitation()}
+      fullScreen={false}
+      closeHandler={closeHandler}
+      title='Invitation'
+    >
+      <Box
+        component='form'
+        sx={{
+          width: '100%',
+          '& .MuiTextField-root': { m: 1, width: '100%' },
+          paddingTop: '5px',
+        }}
+        noValidate
+        autoComplete='off'
+      >
+        <p>
+          Pour configurer cette application en tant que "{invitation().data.id}
+          ", copier le code qui vous a été envoyé par mail à l'adresse "
+          {invitation().data.mail}" :{' '}
+        </p>
+        <TextField
+          required
+          label='Code'
+          type='number'
+          onChange={codeChangeHandler}
+        />
+        <Button variant='contained' onClick={submitHandler}>
+          OK
+        </Button>
+      </Box>
+    </Dialog>
+  );
 };
 
 export default Invitation;

src/components/map/Map.tsx

@@ -46,7 +46,7 @@ import { Overlays } from '../overlays/Overlays';
 import Finder, { findLocation } from '../finder';
 import { ZoomIn } from '@suid/icons-material';
 import Note from '../note';
-import { searchInvitation } from '../invitation';
+import Invitation, { searchInvitation } from '../invitation';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -294,6 +294,7 @@ const Map: Component = () => {
     //<OsmFetch map={getMap} />
     // @ts-ignore
     <div class='ol-map' ref={target}>
+      <Invitation />
       <Overlays map={getMap} />
       <Note />
       <Finder />