Skip to content
Snippets Groups Projects
Verified Commit dc1dbdb8 authored by Andreas Ellewsen's avatar Andreas Ellewsen
Browse files

Move key to kill warning and add form tag

parent 053a1dca
No related branches found
No related tags found
1 merge request!281Make email field validate on change again
Hide whitespace changes
Inline Side-by-side
frontend/src/routes/sponsor/frontpage/index.tsx
+ 6
− 2
View file @ dc1dbdb8
...@@ -147,7 +147,7 @@ const PersonLine = ({ person, role }: PersonLineProps) => { ...@@ -147,7 +147,7 @@ const PersonLine = ({ person, role }: PersonLineProps) => {
const [t] = useTranslation(['common']) const [t] = useTranslation(['common'])
return ( return (
<StyledTableRow key={`${person.first} ${person.last}`}> <StyledTableRow>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{`${person.first} ${person.last}`} {`${person.first} ${person.last}`}
</TableCell> </TableCell>
...@@ -190,7 +190,11 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => { ...@@ -190,7 +190,11 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
{guests.length > 0 ? ( {guests.length > 0 ? (
guests.map((person) => guests.map((person) =>
person.roles.map((role) => ( person.roles.map((role) => (
<PersonLine role={role} person={person} /> <PersonLine
key={`${person.first} ${person.last} ${role.id}`}
role={role}
person={person}
/>
)) ))
) )
) : ( ) : (
......
frontend/src/routes/sponsor/guest/guestInfo/index.tsx
+ 123
− 118
View file @ dc1dbdb8
...@@ -170,131 +170,136 @@ export default function GuestInfo({ ...@@ -170,131 +170,136 @@ export default function GuestInfo({
return ( return (
<Page> <Page>
<SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} /> <SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
<Box sx={{ marginBottom: '2rem' }}> <form>
<Typography variant="h2">{t('guestInfo.contactInfo')}</Typography> <Box sx={{ marginBottom: '2rem' }}>
<Typography variant="body1"> <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
{t('guestInfo.contactInfoBody')} <Typography variant="body1">
</Typography> {t('guestInfo.contactInfoBody')}
</Typography>
<TableContainer> <TableContainer>
<Table sx={{ minWidth: 650 }} aria-label="simple table"> <Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableHeadCell align="left" colSpan={2}> <TableHeadCell align="left" colSpan={2}>
{t('guestInfo.contactInfoTableText')} {t('guestInfo.contactInfoTableText')}
</TableHeadCell> </TableHeadCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell align="left">{t('input.fullName')}</TableCell> <TableCell align="left">{t('input.fullName')}</TableCell>
<TableCell align="left"> <TableCell align="left">
{`${guest.first} ${guest.last}`} {`${guest.first} ${guest.last}`}
</TableCell> </TableCell>
<TableCell /> <TableCell />
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell align="left">{t('input.email')}</TableCell> <TableCell align="left">{t('input.email')}</TableCell>
<TableCell align="left"> <TableCell align="left">
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', md: 'row' }, flexDirection: { xs: 'column', md: 'row' },
justifyContent: 'flex-start', justifyContent: 'flex-start',
}}
>
<Controller
name="email"
control={control}
rules={{
validate: isValidEmail,
}} }}
render={({ field: { value }, ...rest }) => ( >
<TextField <Controller
id="email" name="email"
label={t('input.email')} control={control}
error={!!errors.email} rules={{
helperText={errors.email && errors.email.message} validate: isValidEmail,
value={value}
{...rest}
onChange={emailFieldChange}
/>
)}
/>
{/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
{!guest.registered && (
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: { xs: 'flex-start', md: 'flex-end' },
}} }}
> render={({ field: { value }, ...rest }) => (
<Button <TextField
color="secondary" id="email"
sx={{ label={t('input.email')}
maxHeight: '2.3rem', error={!!errors.email}
marginLeft: { xs: '0rem', md: '1rem' }, helperText={errors.email && errors.email.message}
marginTop: { xs: '0.3rem', md: '0rem' }, value={value}
}} {...rest}
onClick={resend} onChange={emailFieldChange}
> />
{t('button.resendInvitation')} )}
</Button> />
<Button
color="secondary" {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
{!guest.registered && (
<Box
sx={{ sx={{
maxHeight: '2.3rem', display: 'flex',
marginLeft: '0.5rem', flexDirection: 'row',
marginTop: { xs: '0.3rem', md: '0rem' }, justifyContent: {
xs: 'flex-start',
md: 'flex-end',
},
}} }}
onClick={handleCancel}
> >
{t('button.cancelInvitation')} <Button
</Button> color="secondary"
</Box> sx={{
)} maxHeight: '2.3rem',
</Box> marginLeft: { xs: '0rem', md: '1rem' },
<CancelConfirmationDialog marginTop: { xs: '0.3rem', md: '0rem' },
open={confirmationDialogOpen} }}
onClose={handleDialogClose} onClick={resend}
/> >
</TableCell> {t('button.resendInvitation')}
<TableCell /> </Button>
</TableRow> <Button
<TableRow> color="secondary"
<TableCell align="left">{t('input.mobilePhone')}</TableCell> sx={{
<TableCell align="left">{guest.mobile}</TableCell> maxHeight: '2.3rem',
</TableRow> marginLeft: '0.5rem',
<TableRow> marginTop: { xs: '0.3rem', md: '0rem' },
<TableCell align="left">{t('feideId')}</TableCell> }}
<TableCell align="left">{guest.feide_id}</TableCell> onClick={handleCancel}
</TableRow> >
{t('button.cancelInvitation')}
</Button>
</Box>
)}
</Box>
<CancelConfirmationDialog
open={confirmationDialogOpen}
onClose={handleDialogClose}
/>
</TableCell>
<TableCell />
</TableRow>
<TableRow>
<TableCell align="left">{t('input.mobilePhone')}</TableCell>
<TableCell align="left">{guest.mobile}</TableCell>
</TableRow>
<TableRow>
<TableCell align="left">{t('feideId')}</TableCell>
<TableCell align="left">{guest.feide_id}</TableCell>
</TableRow>
<IdentityLine <IdentityLine
text={t('input.nationalIdNumber')} text={t('input.nationalIdNumber')}
identity={guest.fnr} identity={guest.fnr}
reloadGuest={reloadGuest} reloadGuest={reloadGuest}
reloadGuests={reloadGuests} reloadGuests={reloadGuests}
/> />
<IdentityLine <IdentityLine
text={t('input.passportNumber')} text={t('input.passportNumber')}
identity={guest.passport} identity={guest.passport}
reloadGuest={reloadGuest} reloadGuest={reloadGuest}
reloadGuests={reloadGuests} reloadGuests={reloadGuests}
/> />
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<Button <Button
color="secondary" color="secondary"
disabled={!errors.email && !emailDirty} disabled={!errors.email && !emailDirty}
onClick={onSubmit} onClick={onSubmit}
> >
{t('button.save')} {t('button.save')}
</Button> </Button>
</Box> </Box>
</form>
<Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography> <Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
<Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography> <Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
<TableContainer> <TableContainer>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment