Moving error text closer to where the error is

frontend/public/locales/en/common.json

@@ -94,7 +94,9 @@
     "passportNumberRequired": "Passport number required",
     "mobilePhoneRequired": "Mobile phone is required",
     "startDateMustBeSet": "Start date must be set",
-    "startDateMustBeBeforeEndDate": "Start date has to be before end date"
+    "startDateMustBeBeforeEndDate": "Start date has to be before end date",
+    "passportNationalityAndNumber": "Both passport nationality and number need to be set",
+    "nationalIdOrPassport": "National ID or passport information need to be entered"
   },
   "button": {
     "back": "Back",

frontend/public/locales/nb/common.json

@@ -93,7 +93,9 @@
     "passportNumberRequired": "Passnummer er obligatorisk",
     "mobilePhoneRequired": "Mobilnummer er obligatorisk",
     "startDateMustBeSet": "Startdato må være satt",
-    "startDateMustBeBeforeEndDate": "Startdato må være før sluttdato"
+    "startDateMustBeBeforeEndDate": "Startdato må være før sluttdato",
+    "passportNationalityAndNumber": "Både passnasjonalitet og nummer må være satt",
+    "nationalIdOrPassport": "Fødselsnummer eller passinformasjon må oppgis"
   },
   "button": {
     "back": "Tilbake",

frontend/public/locales/nn/common.json

@@ -94,7 +94,9 @@
     "passportNumberRequired": "Passnummer er obligatorisk",
     "mobilePhoneRequired": "Mobilnummer er obligatorisk",
     "startDateMustBeSet": "Startdato må vere satt",
-    "startDateMustBeBeforeEndDate": "Startdato må vere før sluttdato"
+    "startDateMustBeBeforeEndDate": "Startdato må vere før sluttdato",
+    "passportNationalityAndNumber": "Både passnasjonalitet og nummer må vere satt",
+    "nationalIdOrPassport": "Fødselsnummer eller passinformasjon må oppgjevast"
   },
   "button": {
     "back": "Tilbake",

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

@@ -65,8 +65,6 @@ export default function GuestRegister() {
     authentication_method: AuthenticationMethod.Invite,
   })
 
-  const [errorState, setErrorState] = useState<string>('')
-
   const guestContactInfo = async () => {
     try {
       const response = await fetch('/api/ui/v1/invited')
@@ -152,24 +150,13 @@ export default function GuestRegister() {
     )}${updateFormData.mobilePhone}`
 
     if (guestFormData.authentication_method === AuthenticationMethod.Invite) {
+      // The authentication method is Invite, so the name does not come from a
+      // trusted third-party source, and the user can update it
       payload.person.first_name = updateFormData.firstName
       payload.person.last_name = updateFormData.lastName
     }
 
     if (updateFormData.passportNumber && updateFormData.passportNationality) {
-      // The user has entered some passport information, check that both nationality and number are present
-      if (
-        (updateFormData.passportNumber &&
-          !updateFormData.passportNationality) ||
-        (!updateFormData.passportNumber && updateFormData.passportNationality)
-      ) {
-        // TODO Make better text and use translation
-        setErrorState(
-          'Both passport nationality and passport number need to be set'
-        )
-        return
-      }
-      setErrorState('')
       payload.person.passport = `${updateFormData.passportNationality}-${updateFormData.passportNumber}`
     }
 
@@ -241,9 +228,6 @@ export default function GuestRegister() {
       </Box>
 
       {activeStep === Step.SubmitSuccessStep && <StepSubmitSuccessGuest />}
-
-      {/* TODO Give better feedback to user */}
-      {errorState && <h2>{errorState}</h2>}
     </Page>
   )
 }

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

@@ -49,8 +49,30 @@ const GuestRegisterStep = forwardRef(
       CountryCallingCode | undefined
     >(undefined)
     const [mobilePhone, setMobilePhone] = useState<string>('')
+    const [idErrorState, setIdErrorState] = useState<string>('')
 
     const submit: SubmitHandler<EnteredGuestData> = (data) => {
+      if (
+        !data.nationalIdNumber &&
+        !data.passportNumber &&
+        !data.passportNationality
+      ) {
+        // The user has not entered a national ID number nor passport information.
+        // In this case the user should not be allowed to send in the registration
+        setIdErrorState(t('validation.nationalIdOrPassport'))
+        return
+      }
+
+      // The user has entered some passport information, check that both nationality and number are present
+      if (
+        (data.passportNumber && !data.passportNationality) ||
+        (!data.passportNumber && data.passportNationality)
+      ) {
+        setIdErrorState(t('validation.passportNationalityAndNumber'))
+        return
+      }
+      setIdErrorState('')
+
       nextHandler(data)
     }
 
@@ -361,6 +383,9 @@ const GuestRegisterStep = forwardRef(
                         </MenuItem>
                       ))}
                   </Select>
+                  {idErrorState && (
+                    <Typography color="error">{idErrorState}</Typography>
+                  )}
                 </>
               )}