Merge branch 'GREG-120-reg-form-validation' into 'master'

Modify register step form for guests

See merge request !204

frontend/public/locales/en/common.json

@@ -100,6 +100,7 @@
     "startDateMustBeSet": "Start date must be set",
     "startDateMustBeBeforeEndDate": "Start date has to be before end date",
     "passportNationalityAndNumber": "Both passport nationality and number need to be set",
+    "doubleIdentity": "*You have input both national ID and passport. Please choose only one.",
     "nationalIdOrPassport": "National ID or passport information need to be entered"
   },
   "button": {
@@ -134,6 +135,8 @@
   "registerNewGuest": "Register new guest",
   "guestOverview": "Guest overview",
   "guestRegisterWizardText": {
+    "identityHeader": "Identify yourself ",
+    "identityBody": "Enter national identity number if you have one. <1>Otherwise</1> use passport information.",
     "yourContactInformation": "Your contact information",
     "contactInformationDescription": "Fill in your mobile phone number.",
     "yourGuestPeriod": "Your guest period",

frontend/public/locales/nb/common.json

@@ -100,6 +100,7 @@
     "startDateMustBeSet": "Startdato må være satt",
     "startDateMustBeBeforeEndDate": "Startdato må være før sluttdato",
     "passportNationalityAndNumber": "Både passnasjonalitet og nummer må være satt",
+    "doubleIdentity": "*Du har fylt inn begge feltene over. Bruk kun ett av de.",
     "nationalIdOrPassport": "Fødselsnummer/D-nummer eller passinformasjon må spesifiseres"
   },
   "button": {
@@ -134,6 +135,8 @@
   "registerNewGuest": "Registrer ny gjest",
   "guestOverview": "Oversikt over gjest",
   "guestRegisterWizardText": {
+    "identityHeader": "Identifiser deg ",
+    "identityBody": "Fyll inn fødselsnummer hvis du har. <1>Eller</1> nasjonalitet og passnummer.",
     "yourContactInformation": "Din kontaktinfo",
     "contactInformationDescription": "Fyll inn ditt mobilnummer.",
     "yourGuestPeriod": "Din gjesteperiode",

frontend/public/locales/nn/common.json

@@ -101,6 +101,7 @@
     "startDateMustBeSet": "Startdato må vere satt",
     "startDateMustBeBeforeEndDate": "Startdato må vere før sluttdato",
     "passportNationalityAndNumber": "Både passnasjonalitet og nummer må vere satt",
+    "doubleIdentity": "*Du har fylt inn begge feltene over. Bruk kun ett av de.",
     "nationalIdOrPassport": "Fødselsnummer/D-nummer eller passinformasjon må spesifiserast"
   },
   "button": {
@@ -135,6 +136,8 @@
   "registerNewGuest": "Registrer ny gjest",
   "guestOverview": "Oversikt over gjest",
   "guestRegisterWizardText": {
+    "identityHeader": "Identifiser deg ",
+    "identityBody": "Fyll inn fødselsnummer hvis du har. <1>Eller</1> nasjonalitet og passnummer.",
     "yourContactInformation": "Din kontaktinfo",
     "contactInformationDescription": "Fyll inn ditt mobilnummer.",
     "yourGuestPeriod": "Din gjesteperiode",

frontend/src/hooks/useGuests/index.tsx

 import { useEffect, useState } from 'react'
 import { FetchedGuest, Guest } from 'interfaces'
-import { parseIdentity, parseRole } from 'utils'
+import { parseIdentity, parseRole, fetchJsonOpts } from 'utils'
 
 const useGuests = () => {
   const [guests, setGuests] = useState<Guest[]>([])
 
-  const getGuestsInfo = async () => {
-    try {
-      const response = await fetch('/api/ui/v1/guests/?format=json')
-      const jsonResponse = await response.json()
-      if (response.ok) {
-        const persons = await jsonResponse
+  const getGuestsInfo = () =>
+    fetch('/api/ui/v1/guests/', fetchJsonOpts())
+      .then((response) => (response.ok ? response.json() : []))
+      .then((persons) => {
         setGuests(
           persons.map(
             (person: FetchedGuest): Guest => ({
@@ -28,11 +26,8 @@ const useGuests = () => {
             })
           )
         )
-      }
-    } catch (error) {
-      setGuests([])
-    }
-  }
+      })
+      .catch(() => setGuests([]))
 
   const reloadGuests = () => {
     getGuestsInfo()

frontend/src/routes/guest/register/index.test.tsx

@@ -50,7 +50,7 @@ test('Field showing values correctly', async () => {
   await screen.findByDisplayValue(testData.person.fnr)
 
   // Passport nationality. The i18n-mock sets up en as the i18n.language property, so look for the English name
-  await screen.findByText('Denmark')
+  await screen.findByText('DK')
   await screen.findByDisplayValue('123456')
   await screen.findByDisplayValue(testData.person.date_of_birth)
 

frontend/src/routes/guest/register/steps/register.tsx

 import {
   Box,
+  Divider,
   MenuItem,
   Select,
   SelectChangeEvent,
@@ -16,7 +17,7 @@ import React, {
   useImperativeHandle,
   useState,
 } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 import {
   CountryCallingCode,
   CountryCode,
@@ -81,6 +82,7 @@ const GuestRegisterStep = forwardRef(
       console.log('submit data is', data)
       const result = await trigger()
       console.log('trigger result is', result)
+      const tohandler = data
       if (
         !data.nationalIdNumber &&
         !data.passportNumber &&
@@ -92,6 +94,22 @@ const GuestRegisterStep = forwardRef(
         return
       }
 
+      // Users should only input NIN or passport
+      if (data.passportNumber && data.nationalIdNumber) {
+        setIdErrorState(t('validation.doubleIdentity'))
+        return
+      }
+      // Reset passportNationality if NIN is set and passport is empty
+      if (
+        data.nationalIdNumber &&
+        !data.passportNumber &&
+        data.passportNationality
+      ) {
+        setValue('passportNationality', '')
+        setPassportNationality('')
+        tohandler.passportNationality = ''
+      }
+
       // if one on the passport fields are set, check that both are set
       if (
         (data.passportNumber && !data.passportNationality) ||
@@ -105,7 +123,7 @@ const GuestRegisterStep = forwardRef(
       console.log('register submit errors', errors)
 
       if (!Object.keys(errors).length) {
-        nextHandler(data)
+        nextHandler(tohandler)
       }
     }
     const onSubmit = handleSubmit<GuestRegisterData>(submit)
@@ -173,21 +191,41 @@ const GuestRegisterStep = forwardRef(
 
     useImperativeHandle(ref, () => ({ doSubmit: () => onSubmit() }))
 
+    const passportCountries = Object.keys(getAlpha2Codes())
+      .map((countryAlphaCode: string) => {
+        const countryTuple: [string, string] = [
+          countryAlphaCode,
+          getName(countryAlphaCode, i18n.language),
+        ]
+        return countryTuple
+      })
+      .filter(
+        (countryTuple: [string, string]) =>
+          // All countries are expected to have a name, this filtering
+          // is here to make some tests run in an environment where the
+          // internationalization is not set up
+          countryTuple[1] !== undefined
+      )
+      .sort(
+        (countryTuple1: [string, string], countryTuple2: [string, string]) =>
+          countryTuple1[1].localeCompare(countryTuple2[1])
+      )
     return (
       <>
-        <Typography
-          variant="h5"
-          sx={{
-            paddingTop: '1rem',
-            paddingBottom: '1rem',
-          }}
-        >
-          {t('guestRegisterWizardText.yourContactInformation')}
-        </Typography>
-        <Typography sx={{ paddingBottom: '2rem' }}>
-          {t('guestRegisterWizardText.contactInformationDescription')}
-        </Typography>
         <Box sx={{ maxWidth: '30rem' }}>
+          <Typography
+            variant="h5"
+            sx={{
+              paddingTop: '1rem',
+              paddingBottom: '1rem',
+            }}
+          >
+            {t('guestRegisterWizardText.yourContactInformation')}
+          </Typography>
+          <Typography sx={{ paddingBottom: '2rem' }}>
+            {t('guestRegisterWizardText.contactInformationDescription')}
+            <Divider sx={{ border: '1px solid' }} />
+          </Typography>
           <form onSubmit={onSubmit}>
             <Stack spacing={2}>
               {/* The name is only editable if it is it is not coming from some trusted source */}
@@ -395,6 +433,16 @@ const GuestRegisterStep = forwardRef(
               {initialGuestData.authentication_method ===
                 AuthenticationMethod.Invite && (
                 <>
+                  <Typography variant="h5" sx={{ paddingTop: '1rem' }}>
+                    {t('guestRegisterWizardText.identityHeader')}
+                  </Typography>
+                  <Typography sx={{ paddingBottom: '1rem' }}>
+                    <Trans i18nKey="common:guestRegisterWizardText.identityBody">
+                      Enter national identity number if you have one.{' '}
+                      <strong>Otherwise</strong> use passport information.
+                    </Trans>
+                    <Divider sx={{ border: '1px solid' }} />
+                  </Typography>
                   {/* The guest should fill in one of national ID number or passport number */}
                   <Controller
                     name="nationalIdNumber"
@@ -419,68 +467,54 @@ const GuestRegisterStep = forwardRef(
                       />
                     )}
                   />
-
-                  <Controller
-                    name="passportNumber"
-                    control={control}
-                    render={({ field }) => (
-                      <TextField
-                        id="passportNumber"
-                        data-testid="passport_number_input"
-                        value={field.value}
-                        label={t('input.passportNumber')}
-                        onChange={field.onChange}
-                      />
-                    )}
-                  />
-
-                  <Select
+                  <Box
                     sx={{
-                      maxHeight: '2.5rem',
-                    }}
-                    id="passport-nationality-id"
-                    labelId="passport-nationality-label"
-                    label={t('input.passportNationality')}
-                    displayEmpty
-                    value={passportNationality ?? ''}
-                    onChange={handlePassportNationalityChange}
-                    renderValue={(selected: any) => {
-                      if (!selected || selected.length === 0) {
-                        return t('input.passportNationality')
-                      }
-                      return getName(selected, i18n.language)
+                      display: 'flex',
+                      flexDirection: 'row',
                     }}
                   >
-                    <MenuItem disabled value="">
-                      {t('input.passportNationality')}
-                    </MenuItem>
-                    {Object.keys(getAlpha2Codes())
-                      .map((countryAlphaCode: string) => {
-                        const countryTuple: [string, string] = [
-                          countryAlphaCode,
-                          getName(countryAlphaCode, i18n.language),
-                        ]
-                        return countryTuple
-                      })
-                      .filter(
-                        (countryTuple: [string, string]) =>
-                          // All countries are expected to have a name, this filtering
-                          // is here to make some tests run in an environment where the
-                          // internationalization is not set up
-                          countryTuple[1] !== undefined
-                      )
-                      .sort(
-                        (
-                          countryTuple1: [string, string],
-                          countryTuple2: [string, string]
-                        ) => countryTuple1[1].localeCompare(countryTuple2[1])
-                      )
-                      .map((countryTuple) => (
-                        <MenuItem key={countryTuple[0]} value={countryTuple[0]}>
-                          {countryTuple[1]}
+                    <Select
+                      sx={{
+                        maxHeight: '2.5rem',
+                        minWidth: '5rem',
+                        marginRight: '0.5rem',
+                      }}
+                      id="passport-nationality-id"
+                      labelId="passport-nationality-label"
+                      label={t('input.passportNationality')}
+                      displayEmpty
+                      value={passportNationality ?? ''}
+                      onChange={handlePassportNationalityChange}
+                      renderValue={(selected: any) => {
+                        if (!selected || selected.length === 0) {
+                          return t('input.passportNationality')
+                        }
+                        return selected
+                      }}
+                    >
+                      <MenuItem disabled value="">
+                        {t('input.passportNationality')}
+                      </MenuItem>
+                      {passportCountries.map((countryTuple) => (
+                        <MenuItem key={countryTuple[1]} value={countryTuple[0]}>
+                          {`${countryTuple[1]} (${countryTuple[0]})`}
                         </MenuItem>
                       ))}
-                  </Select>
+                    </Select>
+                    <Controller
+                      name="passportNumber"
+                      control={control}
+                      render={({ field }) => (
+                        <TextField
+                          id="passportNumber"
+                          data-testid="passport_number_input"
+                          value={field.value}
+                          label={t('input.passportNumber')}
+                          onChange={field.onChange}
+                        />
+                      )}
+                    />
+                  </Box>
                   {idErrorState && (
                     <Typography color="error">{idErrorState}</Typography>
                   )}
@@ -502,6 +536,7 @@ const GuestRegisterStep = forwardRef(
               </Typography>
               <Typography sx={{ paddingBottom: '1rem' }}>
                 {t('guestRegisterWizardText.guestPeriodDescription')}
+                <Divider sx={{ border: '1px solid' }} />
               </Typography>
               <TextField
                 id="ou-unit"

frontend/src/routes/invite/index.tsx

@@ -24,7 +24,7 @@ function ChooseRegistrationMethod() {
       <p>{t('description')}</p>
       <FlexDiv>
         <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
-        <HrefLineButton to="/guestregister/">{t('manual')}</HrefLineButton>
+        <HrefLineButton to="/guestregister">{t('manual')}</HrefLineButton>
       </FlexDiv>
     </Page>
   )