Validation flow seems OK.

src/components/invitation/Invitation.tsx

@@ -1,4 +1,11 @@
-import { Box, Button, TextField } from '@suid/material';
+import {
+  Alert,
+  Box,
+  Button,
+  Modal,
+  TextField,
+  Typography,
+} from '@suid/material';
 import { Component, createEffect, createSignal, Show } from 'solid-js';
 import Dialog from '../dialog';
 
@@ -50,7 +57,12 @@ const Invitation: Component<props> = (props) => {
         `${invitation().url.href}/${invitation().code}`
       );
       const codeData = await response.json();
-      setInvitation({ ...invitation(), codeData });
+      setInvitation({
+        ...invitation(),
+        codeData,
+        failure: codeData.response !== 'OK',
+        success: codeData.response === 'OK',
+      });
     } catch (error) {}
   };
 
@@ -58,39 +70,92 @@ const Invitation: Component<props> = (props) => {
     setInvitation({ ...invitation(), code: event.target.value });
   };
 
+  const handleModalFailureClose = () => {
+    setInvitation({ ...invitation(), failure: undefined });
+  };
+
+  const handleModalSuccessClose = () => {
+    setInvitation(false);
+  };
+
   return (
-    <Dialog
+    <>
-      open={!!invitation()}
+      <Dialog
-      fullScreen={false}
+        open={!!invitation()}
-      closeHandler={closeHandler}
+        fullScreen={false}
-      title='Invitation'
+        closeHandler={closeHandler}
-    >
+        title='Invitation'
-      <Box
-        component='form'
-        sx={{
-          width: '100%',
-          '& .MuiTextField-root': { m: 1, width: '100%' },
-          paddingTop: '5px',
-        }}
-        noValidate
-        autoComplete='off'
       >
-        <p>
+        <Box
-          Pour configurer cette application en tant que "{invitation().data.id}
+          component='form'
-          ", copier le code qui vous a été envoyé par mail à l'adresse "
+          sx={{
-          {invitation().data.mail}" :{' '}
+            width: '100%',
-        </p>
+            '& .MuiTextField-root': { m: 1, width: '100%' },
-        <TextField
+            paddingTop: '5px',
-          required
+          }}
-          label='Code'
+          noValidate
-          type='number'
+          autoComplete='off'
-          onChange={codeChangeHandler}
+        >
-        />
+          <p>
-        <Button variant='contained' onClick={submitHandler}>
+            Pour configurer cette application en tant que "
-          OK
+            {invitation().data.id}
-        </Button>
+            ", copier le code qui vous a été envoyé par mail à l'adresse "
-      </Box>
+            {invitation().data.mail}" :{' '}
-    </Dialog>
+          </p>
+          <TextField
+            required
+            label='Code'
+            type='number'
+            onChange={codeChangeHandler}
+          />
+          <Button variant='contained' onClick={submitHandler}>
+            OK
+          </Button>
+        </Box>
+      </Dialog>
+      <Modal
+        open={!!invitation().failure}
+        onClose={handleModalFailureClose}
+        aria-labelledby='modal-modal-title'
+        aria-describedby='modal-modal-description'
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 400,
+            border: '2px solid #000',
+            boxShadow: '24px',
+            p: 4,
+          }}
+        >
+          <Alert severity='error'>Le code est erroné !</Alert>
+        </Box>
+      </Modal>{' '}
+      <Modal
+        open={!!invitation().success}
+        onClose={handleModalSuccessClose}
+        aria-labelledby='modal-modal-title'
+        aria-describedby='modal-modal-description'
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 400,
+            border: '2px solid #000',
+            boxShadow: '24px',
+            p: 4,
+          }}
+        >
+          <Alert severity='success'>C'est tout bon !</Alert>
+        </Box>
+      </Modal>
+    </>
   );
 };