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,7 +70,16 @@ 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()}
         fullScreen={false}
@@ -76,7 +97,8 @@ const Invitation: Component<props> = (props) => {
           autoComplete='off'
         >
           <p>
-          Pour configurer cette application en tant que "{invitation().data.id}
+            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>
@@ -91,6 +113,49 @@ const Invitation: Component<props> = (props) => {
           </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>
+    </>
   );
 };