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) => {
const [t] = useTranslation(['common'])
return (
<StyledTableRow key={`${person.first} ${person.last}`}>
<StyledTableRow>
<TableCell component="th" scope="row">
{`${person.first} ${person.last}`}
</TableCell>
......@@ -190,7 +190,11 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
{guests.length > 0 ? (
guests.map((person) =>
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({
return (
<Page>
<SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
<Box sx={{ marginBottom: '2rem' }}>
<Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
<Typography variant="body1">
{t('guestInfo.contactInfoBody')}
</Typography>
<form>
<Box sx={{ marginBottom: '2rem' }}>
<Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
<Typography variant="body1">
{t('guestInfo.contactInfoBody')}
</Typography>
<TableContainer>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableHeadCell align="left" colSpan={2}>
{t('guestInfo.contactInfoTableText')}
</TableHeadCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell align="left">{t('input.fullName')}</TableCell>
<TableCell align="left">
{`${guest.first} ${guest.last}`}
</TableCell>
<TableCell />
</TableRow>
<TableRow>
<TableCell align="left">{t('input.email')}</TableCell>
<TableCell align="left">
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
justifyContent: 'flex-start',
}}
>
<Controller
name="email"
control={control}
rules={{
validate: isValidEmail,
<TableContainer>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableHeadCell align="left" colSpan={2}>
{t('guestInfo.contactInfoTableText')}
</TableHeadCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell align="left">{t('input.fullName')}</TableCell>
<TableCell align="left">
{`${guest.first} ${guest.last}`}
</TableCell>
<TableCell />
</TableRow>
<TableRow>
<TableCell align="left">{t('input.email')}</TableCell>
<TableCell align="left">
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
justifyContent: 'flex-start',
}}
render={({ field: { value }, ...rest }) => (
<TextField
id="email"
label={t('input.email')}
error={!!errors.email}
helperText={errors.email && errors.email.message}
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' },
>
<Controller
name="email"
control={control}
rules={{
validate: isValidEmail,
}}
>
<Button
color="secondary"
sx={{
maxHeight: '2.3rem',
marginLeft: { xs: '0rem', md: '1rem' },
marginTop: { xs: '0.3rem', md: '0rem' },
}}
onClick={resend}
>
{t('button.resendInvitation')}
</Button>
<Button
color="secondary"
render={({ field: { value }, ...rest }) => (
<TextField
id="email"
label={t('input.email')}
error={!!errors.email}
helperText={errors.email && errors.email.message}
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={{
maxHeight: '2.3rem',
marginLeft: '0.5rem',
marginTop: { xs: '0.3rem', md: '0rem' },
display: 'flex',
flexDirection: 'row',
justifyContent: {
xs: 'flex-start',
md: 'flex-end',
},
}}
onClick={handleCancel}
>
{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>
<Button
color="secondary"
sx={{
maxHeight: '2.3rem',
marginLeft: { xs: '0rem', md: '1rem' },
marginTop: { xs: '0.3rem', md: '0rem' },
}}
onClick={resend}
>
{t('button.resendInvitation')}
</Button>
<Button
color="secondary"
sx={{
maxHeight: '2.3rem',
marginLeft: '0.5rem',
marginTop: { xs: '0.3rem', md: '0rem' },
}}
onClick={handleCancel}
>
{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
text={t('input.nationalIdNumber')}
identity={guest.fnr}
reloadGuest={reloadGuest}
reloadGuests={reloadGuests}
/>
<IdentityLine
text={t('input.passportNumber')}
identity={guest.passport}
reloadGuest={reloadGuest}
reloadGuests={reloadGuests}
/>
</TableBody>
</Table>
</TableContainer>
<Button
color="secondary"
disabled={!errors.email && !emailDirty}
onClick={onSubmit}
>
{t('button.save')}
</Button>
</Box>
<IdentityLine
text={t('input.nationalIdNumber')}
identity={guest.fnr}
reloadGuest={reloadGuest}
reloadGuests={reloadGuests}
/>
<IdentityLine
text={t('input.passportNumber')}
identity={guest.passport}
reloadGuest={reloadGuest}
reloadGuests={reloadGuests}
/>
</TableBody>
</Table>
</TableContainer>
<Button
color="secondary"
disabled={!errors.email && !emailDirty}
onClick={onSubmit}
>
{t('button.save')}
</Button>
</Box>
</form>
<Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
<Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
<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