Validation flow seems OK.

This commit is contained in:
Eric van der Vlist 2023-03-04 10:54:32 +01:00
parent 04cd163906
commit 24fb46c0fb
1 changed files with 98 additions and 33 deletions

View File

@ -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 { Component, createEffect, createSignal, Show } from 'solid-js';
import Dialog from '../dialog'; import Dialog from '../dialog';
@ -50,7 +57,12 @@ const Invitation: Component<props> = (props) => {
`${invitation().url.href}/${invitation().code}` `${invitation().url.href}/${invitation().code}`
); );
const codeData = await response.json(); const codeData = await response.json();
setInvitation({ ...invitation(), codeData }); setInvitation({
...invitation(),
codeData,
failure: codeData.response !== 'OK',
success: codeData.response === 'OK',
});
} catch (error) {} } catch (error) {}
}; };
@ -58,7 +70,16 @@ const Invitation: Component<props> = (props) => {
setInvitation({ ...invitation(), code: event.target.value }); setInvitation({ ...invitation(), code: event.target.value });
}; };
const handleModalFailureClose = () => {
setInvitation({ ...invitation(), failure: undefined });
};
const handleModalSuccessClose = () => {
setInvitation(false);
};
return ( return (
<>
<Dialog <Dialog
open={!!invitation()} open={!!invitation()}
fullScreen={false} fullScreen={false}
@ -76,7 +97,8 @@ const Invitation: Component<props> = (props) => {
autoComplete='off' autoComplete='off'
> >
<p> <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 " ", copier le code qui vous a été envoyé par mail à l'adresse "
{invitation().data.mail}" :{' '} {invitation().data.mail}" :{' '}
</p> </p>
@ -91,6 +113,49 @@ const Invitation: Component<props> = (props) => {
</Button> </Button>
</Box> </Box>
</Dialog> </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>
</>
); );
}; };