diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index fc1eda768f0f416362340d3e7127db622eca2bed..7b4fba330475944249c4764d59c5e02a28c7eb9c 100644
--- a/frontend/public/locales/en/common.json
+++ b/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",
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 79d565aa28768ffe6a6e95fec7709a679504f0cb..0b21b5904f29757a45c000cfbcfda6a3a325fba8 100644
--- a/frontend/public/locales/nb/common.json
+++ b/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",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index c49aa0b3406db333e16c365a6cb2d5bb9651ceb0..a16fe80431adcfc2fc817c3cf25d3f6eeeb4e3bf 100644
--- a/frontend/public/locales/nn/common.json
+++ b/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",
diff --git a/frontend/src/hooks/useGuests/index.tsx b/frontend/src/hooks/useGuests/index.tsx
index 04e62653ac34b8b3b2a8882899d508db454fac05..34de36ff949a3f4d04525595008fb4c98a6c8f99 100644
--- a/frontend/src/hooks/useGuests/index.tsx
+++ b/frontend/src/hooks/useGuests/index.tsx
@@ -1,16 +1,14 @@
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()
diff --git a/frontend/src/routes/guest/register/index.test.tsx b/frontend/src/routes/guest/register/index.test.tsx
index 0ac01aee3ccd557ed5bfce7a30b38b62ffb1ccde..8b09debb759399cd4ce5d8fe1744737e52392621 100644
--- a/frontend/src/routes/guest/register/index.test.tsx
+++ b/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)
diff --git a/frontend/src/routes/guest/register/steps/register.tsx b/frontend/src/routes/guest/register/steps/register.tsx
index 3b4fbb35a67232f2947783647d2a59c6f2b8225f..4fc11828581d60d459660021035346a25ba7cef2 100644
--- a/frontend/src/routes/guest/register/steps/register.tsx
+++ b/frontend/src/routes/guest/register/steps/register.tsx
@@ -1,5 +1,6 @@
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"
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 14acbc64312086b838447bf554ba76f48e48329e..07e9c3001665d0ab36b3839899fd8f1f293b22f5 100644
--- a/frontend/src/routes/invite/index.tsx
+++ b/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>
)