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

Merge branch 'GREG-196-revalidate-email' into 'master' 

Make email field validate on change again

See merge request !281
parents cd668d36 7d64f829
No related branches found
No related tags found
1 merge request!281Make email field validate on change again
Pipeline #117175 canceled
Stage: venv update
    Stage: tests and linting
      Hide whitespace changes
      Inline Side-by-side
      frontend/src/routes/sponsor/frontpage/index.tsx
      + 6
      − 2
      View file @ dd63d7a0
      ......@@ -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
      + 130
      − 141
      View file @ dd63d7a0
      ......@@ -25,7 +25,7 @@ import {
      import { Guest } from 'interfaces'
      import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
      import { useEffect, useState } from 'react'
      import { SubmitHandler, useForm, Controller } from 'react-hook-form'
      import { SubmitHandler, useForm } from 'react-hook-form'
      import IdentityLine from 'components/identityLine'
      import { isValidEmail, submitJsonOpts } from 'utils'
      ......@@ -94,28 +94,18 @@ export default function GuestInfo({
      const [t] = useTranslation(['common'])
      const history = useHistory()
      const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false)
      const [emailDirty, setEmailDirty] = useState(false)
      const defaultValues = {
      email: guest.email,
      }
      // Using useForm even though only the e-mail is allow to change at present, since useForm makes setup and validation easier
      const {
      handleSubmit,
      setValue,
      control,
      formState: { errors },
      } = useForm({
      register,
      reset,
      formState: { errors, isValid, isDirty },
      } = useForm<Email>({
      mode: 'onChange',
      defaultValues,
      })
      useEffect(() => {
      setValue('email', guest.email)
      // E-mail just updated so it is not dirty
      setEmailDirty(false)
      }, [guest])
      const submit: SubmitHandler<Email> = (data) => {
      updateEmail(data.email)
      }
      ......@@ -158,143 +148,142 @@ export default function GuestInfo({
      }
      }
      const emailFieldChange = (event: any) => {
      setValue('email', event.target.value)
      if (event.target.value !== guest.email) {
      setEmailDirty(true)
      } else {
      setEmailDirty(false)
      }
      }
      const { ref, onChange, ...inputProps } = register('email', {
      validate: isValidEmail,
      })
      useEffect(() => {
      reset() // Forces defaultValue to be set to the new value, making the form not dirty
      setValue('email', guest.email)
      }, [guest])
      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 onSubmit={onSubmit}>
      <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')}
      <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,
      </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}
      />
      )}
      />
      >
      <TextField
      InputLabelProps={{ shrink: true }}
      id="email"
      label={t('input.email')}
      error={!!errors.email}
      helperText={errors?.email?.message}
      defaultValue={guest.email}
      inputRef={ref}
      onChange={onChange}
      {...inputProps}
      />
      {/* 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' },
      }}
      >
      <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"
      {/* 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
      type="submit"
      color="secondary"
      disabled={!isValid || !isDirty}
      >
      {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