frontend/public/locales/en/common.json

@@ -16,7 +16,6 @@
     "roleStartDate": "From",
     "roleEndDate": "To",
     "comment": "Comment",
-    "contact": "Contact person",
     "searchable": "Available in search?",
     "email": "E-mail",
     "fullName": "Full name",
@@ -44,6 +43,7 @@
     "bodyText": "Here you can add a new role to the same guest"
   },
   "register": {
+    "noResults": "No guest matching your search found.",
     "registerHeading": "Register new guest",
     "registerText": "Please search for e-mail or phone number before registering a new guest to prevent duplicates.",
     "registerButtonText": "Register new guest"
@@ -62,20 +62,25 @@
   "role": "Guest role",
   "period": "Period",
   "ou": "Organisation",
+  "department": "Department",
   "choice": "Choices",
   "registerText": "Register new guest",
-  "waitingGuests": "Guests waiting for your confirmation",
-  "waitingGuestsDescription": "See the table below for guests ",
+  "waitingGuests": "Guests waiting for confirmation",
+  "waitingGuestsDescription": "Confirm your guests that <1>registered manually</1> here. Guests with FEIDE-user do not need confirmation.",
   "noWaitingGuests": "No waiting guests",
-  "activeGuests": "Your active guests",
-  "activeGuestsDescription": "Make changes to your existing guests",
+  "activeGuests": "Confirmed guests",
+  "activeGuestsDescription": "Make changes to guest roles.",
   "noActiveGuests": "No active guests",
   "sentInvitations": "Sent invitations",
   "sentInvitationsDescription": "Invitations awaiting response from guest.",
   "noInvitations": "No invitations",
   "status": "Status",
-  "active": "Active",
-  "expired": "Expired",
+  "statusText": {
+    "active": "Active",
+    "expired": "Expired",
+    "waitingForGuest": "Waiting for guest",
+    "waitingForSponsor": "Needs confirmation"
+  },
   "details": "Details",
   "nationalIdNumber": "National ID number",
   "validation": {
@@ -146,9 +151,20 @@
     "cancelInvitationDescription": "Do you want to cancel the invitation?"
   },
   "error": {
+    "error": "Error",
     "invitationCreationFailedHeader": "Failed to create invite",
     "errorStatusCode": "Status code: {{statusCode}} (<3>{{statusText}}</3>)",
     "genericServerErrorBody": "The server reported:<1>{{errorBodyText}}</1>",
-    "contactHelp": "Contact help through the link in the footer if the problem persists."
+    "contactHelp": "Contact help through the link in the footer if the problem persists.",
+    "unknown": "An unknown error has occurred. If the problem persists, contact support.",
+    "contactHelp": "Contact help through the link in the footer if the problem persists.",
+    "invitationDataFetchFailed": "Failed to fetch invitation data",
+    "guestRegistrationFailed": "Failed to register your data",
+    "codes": {
+      "invalid_invite": "Invalid invite",
+      "invite_expired": "Invite has expired",
+      "cannot_update_fields": "Failed to update data",
+      "update_national_id_not_allowed": "Not allowed to update verified national ID"
+    }
   }
 }

frontend/public/locales/en/invite.json

 {
-  "description": "Please choose how you want to log in to complete your registration. The recommended way is to log in with either Feide or ID-porten. If that is not possible you can manually fill out the registration form with your passport number.",
-  "header": "Guest Registration",
+  "description": "Please choose how you want to log in to complete your registration. The recommended way is to log in with either Feide or ID-porten. If that is not possible you can manually fill out the registration form with your passport number or Norwegian national ID number.",
+  "header": "Guest registration",
   "login": "Log in with FEIDE",
-  "manual": "Registrate manually"
+  "manual": "Register manually",
+  "errors": {
+    "invalidToken": "The invitation link you followed is invalid.",
+    "expiredToken": "The invitation link you followed has expired. Contact your host to get a new link."
+  }
 }

frontend/public/locales/nb/common.json

@@ -16,7 +16,6 @@
     "roleStartDate": "Fra",
     "roleEndDate": "Til",
     "comment": "Kommentar",
-    "contact": "Kontaktperson",
     "searchable": "Synlig i søk?",
     "email": "E-post",
     "fullName": "Fullt navn",
@@ -44,6 +43,7 @@
     "bodyText": "Her kan du legge til en ny rolle på samme gjest"
   },
   "register": {
+    "noResults": "Finner ingen gjestekontoer som matcher søket ditt.",
     "registerHeading": "Registrer ny gjest",
     "registerText": "Søk etter e-post eller mobilnummer før du registrerer ny gjest for å unngå dobbeltoppføringer.",
     "registerButtonText": "Registrer ny gjest"
@@ -62,20 +62,25 @@
   "role": "Gjesterolle",
   "period": "Periode",
   "ou": "Organisasjon",
+  "department": "Avdeling",
   "choice": "Valg",
   "registerText": "Registrer ny gjest",
-  "waitingGuests": "Dine gjester som venter på godkjenning",
-  "waitingGuestsDescription": "Under er en oversikt over kontoer som venter på godkjenning",
+  "waitingGuests": "Gjester som venter på godkjenning",
+  "waitingGuestsDescription": "Her godkjenner du gjester som har <1>registrert seg manuelt</1>. Gjester som har FEIDE-bruker trenger ikke godkjenning.",
   "noWaitingGuests": "Ingen gjester til godkjenning",
-  "activeGuests": "Dine aktive gjester",
-  "activeGuestsDescription": "Her kan du endre på eksisterende gjester",
+  "activeGuests": "Godkjente gjester",
+  "activeGuestsDescription": "Her kan du endre på gjesteroller",
   "noActiveGuests": "Ingen aktive gjester",
   "sentInvitations": "Sendte invitasjoner",
   "sentInvitationsDescription": "Invitasjoner som venter på at gjesten skal ferdigstille registreringen.",
   "noInvitations": "Ingen invitasjoner",
   "status": "Status",
-  "active": "Aktiv",
-  "expired": "Utgått",
+  "statusText": {
+    "active": "Aktiv",
+    "expired": "Utgått",
+    "waitingForGuest": "Venter på gjest",
+    "waitingForSponsor": "Trenger godkjenning"
+  },
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer/D-nummer",
   "validation": {
@@ -146,9 +151,20 @@
     "cancelInvitationDescription": "Vil du kansellere invitasjonen?"
   },
   "error": {
+    "error": "Feil",
     "invitationCreationFailedHeader": "Kunne ikke opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",
     "genericServerErrorBody": "Respons fra server:<1>{{errorBodyText}}</1>",
-    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer."
+    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+    "unknown": "En ukjent feil har oppstått. Om problemet vedvarer, kontakt brukerstøtte.",
+    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+    "invitationDataFetchFailed": "Klarte ikke å hente invitasjonsdata",
+    "guestRegistrationFailed": "Klarte ikke å registrere dataene dine",
+    "codes": {
+      "invalid_invite": "Ugyldig invitasjon",
+      "invite_expired": "Invitasjonen har utløpt",
+      "cannot_update_fields": "Klarte ikke å oppdatere dataene",
+      "update_national_id_not_allowed": "Ikke tillatt å endre verifisert fødselsnummer/D-nummer"
+    }
   }
 }

frontend/public/locales/nb/invite.json

@@ -2,5 +2,9 @@
   "description": "Vennligst velg hvordan du vil logge inn for å fullføre registreringen. Den anbefalte metoden er å logge inn gjennom Feide eller ID-porten. Dersom det ikke er mulig kan du fylle ut registreringskjemaet manuelt med passnummer",
   "header": "Gjestetjenesten",
   "login": "Logg inn med FEIDE",
-  "manual": "Registrer manuelt"
+  "manual": "Registrer manuelt",
+  "errors": {
+    "invalidToken": "Denne invitasjonslenka er ugyldig.",
+    "expiredToken": "Denne invitasjonslenka er utløpt. Kontakt verten din for å få tilsendt en ny."
+  }
 }

frontend/public/locales/nn/common.json

@@ -17,7 +17,6 @@
     "roleStartDate": "Frå",
     "roleEndDate": "Til",
     "comment": "Kommentar",
-    "contact": "Kontaktperson",
     "searchable": "Synleg i søk?",
     "email": "E-post",
     "fullName": "Fullt namn",
@@ -45,6 +44,7 @@
     "bodyText": "Her kan du legge til en ny rolle på samme gjest"
   },
   "register": {
+    "noResults": "Finner ingen gjestekontoer som matcher søket ditt.",
     "registerHeading": "Registrer ny gjest",
     "registerText": "Søk etter e-post eller mobilnummer før du registrerer ny gjest for å unngå dobbeltoppføringer.",
     "registerButtonText": "Registrer ny gjest"
@@ -63,20 +63,25 @@
   "role": "Gjesterolle",
   "period": "Periode",
   "ou": "Organisasjon",
+  "department": "Avdeling",
   "choice": "Valg",
   "registerText": "Registrer ny gjest",
-  "waitingGuests": "Dine gjester som venter på godkjenning",
-  "waitingGuestsDescription": "Under er en oversikt over kontoer som venter på godkjenning",
+  "waitingGuests": "Gjester som venter på godkjenning",
+  "waitingGuestsDescription": "Her godkjenner du gjester som har <1>registrert seg manuelt</1>. Gjester som har FEIDE-bruker trenger ikke godkjenning.",
   "noWaitingGuests": "Ingen gjester til godkjenning",
-  "activeGuests": "Dine aktive gjester",
-  "activeGuestsDescription": "Her kan du endre på eksisterende gjester",
+  "activeGuests": "Godkjente gjester",
+  "activeGuestsDescription": "Her kan du endre på gjesteroller.",
   "noActiveGuests": "Ingen aktive gjester",
   "sentInvitations": "Sendte invitasjonar",
   "sentInvitationsDescription": "Invitasjonar som venter på at gjesten skal ferdigstille registreringa.",
   "noInvitations": "Ingen invitasjonar",
   "status": "Status",
-  "active": "Aktiv",
-  "expired": "Utgått",
+  "statusText": {
+    "active": "Aktiv",
+    "expired": "Utgått",
+    "waitingForGuest": "Venter på gjest",
+    "waitingForSponsor": "Trenger godkjenning"
+  },
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer/D-nummer",
   "validation": {
@@ -147,9 +152,20 @@
     "cancelInvitationDescription": "Vil du kansellere invitasjonen?"
   },
   "error": {
+    "error": "Feil",
     "invitationCreationFailedHeader": "Kunne ikkje opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",
     "genericServerErrorBody": "Respons frå server:<1>{{errorBodyText}}</1>",
-    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer."
+    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+    "unknown": "Ein uventa feil oppstod. Om problemet varer ved, kontakt brukarstøtte.",,
+    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+    "invitationDataFetchFailed": "Klarte ikkje å hente invitasjonsdata",
+    "guestRegistrationFailed": "Klarte ikkje å registrere dataene dine",
+    "codes": {
+      "invalid_invite": "Ugyldig invitasjon",
+      "invite_expired": "Invitasjonen har utløpe",
+      "cannot_update_fields": "Klarte ikkje å oppdatere dataene",
+      "update_national_id_not_allowed": "Ikkje tillete å endre verifisert fødselsnummer/D-nummer"
+    }
   }
 }

frontend/public/locales/nn/invite.json

@@ -2,5 +2,9 @@
   "description": "Ver venleg og vel korleis du vil logge inn for å fullføre registreringa. Den anbefalte metoden er å logge inn gjennom Feide eller ID-porten. Dersom det ikkje er mogeleg kan du fylle ut registreringskjemaet manuelt med passnummer",
   "header": "Gjestetjenesten",
   "login": "Logg inn med FEIDE",
-  "manual": "Registrer manuelt"
+  "manual": "Registrer manuelt",
+  "errors": {
+    "invalidToken": "Denne invitasjonslenka er ugyldig.",
+    "expiredToken": "Denne invitasjonslenka har utløpe. Kontakt verten din for å få tilsendt ei ny."
+  }
 }

frontend/src/components/debug/index.tsx

@@ -4,16 +4,7 @@ import { useTranslation } from 'react-i18next'
 import CheckIcon from '@mui/icons-material/Check'
 import ClearIcon from '@mui/icons-material/Clear'
 
-import {
-  Box,
-  Button,
-  Table,
-  TableBody,
-  TableRow,
-  TableCell,
-  Stack,
-  Divider,
-} from '@mui/material'
+import { Box, Table, TableBody, TableRow, TableCell } from '@mui/material'
 
 import { appInst, appTimezone, appVersion } from 'appConfig'
 import { Link } from 'react-router-dom'
@@ -26,8 +17,6 @@ export const Debug = () => {
   const [apiHealth, setApiHealth] = useState('not yet')
   const [didContactApi, setDidContactApi] = useState(false)
   const { i18n } = useTranslation(['common'])
-  const [csrf, setCsrf] = useState<String | null>(null)
-  const [username, setUsername] = useState(undefined)
   const { user } = useUserContext()
 
   if (!didContactApi) {
@@ -47,87 +36,6 @@ export const Debug = () => {
       })
   }
 
-  const getCSRF = () => {
-    fetch('/api/ui/v1/csrf/', {
-      credentials: 'same-origin',
-    })
-      .then((res) => {
-        const csrfToken = res.headers.get('X-CSRFToken')
-        setCsrf(csrfToken)
-        console.log(csrfToken)
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }
-
-  const getSession = () => {
-    fetch('/api/ui/v1/session/?format=json', {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'same-origin',
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        console.log(data)
-        getCSRF()
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }
-
-  const testMail = () => {
-    fetch('/api/ui/v1/testmail/', {
-      credentials: 'same-origin',
-    })
-      .then((data) => {
-        console.log(data)
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }
-
-  const whoami = () => {
-    fetch('/api/ui/v1/whoami/', {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'same-origin',
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        setUsername(data.username)
-        console.log(`You are logged in as: ${data.username}`)
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }
-
-  function isResponseOk(response: any) {
-    if (response.status >= 200 && response.status <= 299) {
-      return response.json()
-    }
-    throw Error(response.statusText)
-  }
-
-  const logout = () => {
-    fetch('/api/ui/v1/logout/', {
-      credentials: 'same-origin',
-    })
-      .then(isResponseOk)
-      .then((data) => {
-        console.log(data)
-        getCSRF()
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }
-
   const d = [
     ['NODE_ENV', process.env.NODE_ENV],
     ['Version', appVersion],
@@ -137,8 +45,6 @@ export const Debug = () => {
     ['Institution', appInst],
     ['API reachable?', apiHealth === 'yes' ? <Yes /> : apiHealth],
     ['Authenticated?', user.auth ? <Yes /> : <No />],
-    ['Username', username],
-    ['CSRF', csrf],
   ]
   return (
     <Box>
@@ -163,25 +69,6 @@ export const Debug = () => {
         </ul>
       </p>
       <h3>Debug</h3>
-
-      <Stack
-        direction="row"
-        spacing={1}
-        divider={<Divider orientation="vertical" />}
-      >
-        <Button type="button" onClick={() => getSession()}>
-          AM I AUTHENTICATED?
-        </Button>
-        <Button type="button" onClick={() => whoami()}>
-          WHO AM I?
-        </Button>
-        <Button type="button" onClick={() => logout()}>
-          LOGOUT
-        </Button>
-        <Button type="button" onClick={() => testMail()}>
-          SEND TEST MAIL
-        </Button>
-      </Stack>
       <Box sx={{ maxWidth: '30rem' }}>
         <Table>
           <TableBody>

frontend/src/components/errorReport/index.tsx

@@ -2,7 +2,7 @@ import { Alert, AlertTitle } from '@mui/material'
 import { Trans, useTranslation } from 'react-i18next'
 import React from 'react'
 
-interface ErrorReportProps {
+export interface ErrorReportProps {
   errorHeading: string
   statusCode?: number
   statusText?: string

frontend/src/contexts/featureContext.ts

@@ -5,11 +5,14 @@ export interface IFeatureContext {
   displayContactAtUnit: boolean
   // Controls whether the optional field is shown in the register new guest wizard
   displayComment: boolean
+  // Should the contact at unit field be shown for the guest when he registers his information?
+  displayContactAtUnitGuestInput: boolean
 }
 
 export const FeatureContext = createContext<IFeatureContext>({
   displayContactAtUnit: true,
   displayComment: true,
+  displayContactAtUnitGuestInput: true,
 })
 
 export const useFeatureContext = () => useContext(FeatureContext)

frontend/src/hooks/useRoleTypes/index.tsx

@@ -12,7 +12,7 @@ function useRoleTypes(): RoleTypeData[] {
   const [roleTypes, setRoleTypes] = useState<RoleTypeData[]>([])
 
   async function fetchRoleTypes() {
-    fetch(`/api/ui/v1/roletypes`)
+    fetch(`/api/ui/v1/roletypes/`)
       .then((data) => data.text())
       .then((result) => {
         // The response is a JSON-array

frontend/src/providers/featureProvider.tsx

@@ -13,12 +13,20 @@ function FeatureProvider(props: FeatureProviderProps) {
   let features: IFeatureContext
   switch (appInst) {
     case 'uib':
-      features = { displayContactAtUnit: false, displayComment: false }
+      features = {
+        displayContactAtUnit: false,
+        displayComment: false,
+        displayContactAtUnitGuestInput: false,
+      }
       break
 
     case 'uio':
     default:
-      features = { displayContactAtUnit: true, displayComment: true }
+      features = {
+        displayContactAtUnit: true,
+        displayComment: true,
+        displayContactAtUnitGuestInput: true,
+      }
       break
   }
 

frontend/src/routes/components/sponsorGuestButtons.tsx

 import PersonIcon from '@mui/icons-material/Person'
-import { Box, IconButton, Theme } from '@mui/material'
+import { Box, IconButton, styled, Theme } from '@mui/material'
 import PersonAddIcon from '@mui/icons-material/PersonAdd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,6 +10,13 @@ interface SponsorGuestButtonsProps {
   registerNewGuestActive?: boolean
 }
 
+const StyledIconButton = styled(IconButton)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  fontSize: '22px',
+})
+
 export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
   const { yourGuestsActive, registerNewGuestActive } = props
   const { t } = useTranslation(['common'])
@@ -30,22 +37,20 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
         flexDirection: 'row',
         justifyContent: 'space-evenly',
         marginBottom: '2rem',
+        fontSize: '22px',
       }}
     >
-      <IconButton
+      <StyledIconButton
         onClick={goToOverview}
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          typography: 'caption',
+          color: () => (yourGuestsActive ? 'primary.main' : ''),
           textDecorationLine: () => (yourGuestsActive ? 'underline' : ''),
         }}
       >
         <PersonIcon
-          fontSize="large"
           sx={{
-            borderRadius: '2rem',
+            fontSize: '80px',
+            borderRadius: '4rem',
             borderStyle: 'solid',
             borderColor: (theme: Theme) =>
               yourGuestsActive
@@ -59,22 +64,19 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
           }}
         />
         {t('yourGuests')}
-      </IconButton>
+      </StyledIconButton>
 
-      <IconButton
+      <StyledIconButton
         onClick={goToRegister}
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          typography: 'caption',
+          color: () => (registerNewGuestActive ? 'primary.main' : ''),
           textDecorationLine: () => (registerNewGuestActive ? 'underline' : ''),
         }}
       >
         <PersonAddIcon
-          fontSize="large"
           sx={{
-            borderRadius: '2rem',
+            fontSize: '80px',
+            borderRadius: '4rem',
             borderStyle: 'solid',
             borderColor: (theme: Theme) =>
               registerNewGuestActive
@@ -88,7 +90,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
           }}
         />
         {t('registerNewGuest')}
-      </IconButton>
+      </StyledIconButton>
     </Box>
   )
 }

frontend/src/routes/guest/register/guestDataForm.ts

@@ -14,7 +14,7 @@ export type GuestInviteInformation = {
   role_name_nb: string
   role_start: string
   role_end: string
-  comment?: string
+  contact_person_unit?: string
 
   feide_id?: string
   email?: string

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

@@ -25,7 +25,6 @@ const testData = {
     start: '2021-08-10',
     end: '2021-08-16',
     contact_person_unit: 'Test contact person',
-    comments: 'Test comment',
   },
   meta: {
     session_type: 'invite',
@@ -66,5 +65,7 @@ test('Field showing values correctly', async () => {
   await screen.findByDisplayValue(
     `${testData.role.start} - ${testData.role.end}`
   )
-  await screen.findByDisplayValue(testData.role.comments)
+
+  // For the default setup the contact person at unit field should be showing
+  await screen.findByDisplayValue(testData.role.contact_person_unit)
 })

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

@@ -21,12 +21,9 @@ import AuthenticationMethod from './authenticationMethod'
 import GuestRegisterStep from './steps/register'
 import GuestConsentStep from './steps/consent'
 import GuestSuccessStep from './steps/success'
-
-enum SubmitState {
-  NotSubmitted,
-  Submitted,
-  SubmittedError,
-}
+import ServerErrorReport, {
+  ErrorReportProps,
+} from '../../../components/errorReport'
 
 enum Step {
   RegisterStep,
@@ -56,7 +53,7 @@ type InvitationData = {
     role_name_en: string
     start: string
     end: string
-    comments: string
+    contact_person_unit: string
   }
   meta: {
     session_type: string
@@ -72,12 +69,6 @@ export default function GuestRegister() {
 
   const guestRegisterRef = useRef<GuestRegisterCallableMethods>(null)
   const guestConsentRef = useRef<GuestRegisterCallableMethods>(null)
-
-  // TODO On submit successful the user should be directed to some page telling
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [submitState, setSubmitState] = useState<SubmitState>(
-    SubmitState.NotSubmitted
-  )
   const [activeStep, setActiveStep] = useState(0)
 
   const [initialGuestData, setInitialGuestData] =
@@ -87,12 +78,39 @@ export default function GuestRegister() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [guestConsentData, setGuestConsentData] =
     useState<GuestConsentData | null>(null)
+  const [fetchInvitationDataError, setFetchInvitationDataError] =
+    useState<ErrorReportProps | null>(null)
+  const [submitGuestDataError, setSubmitGuestDataError] =
+    useState<ErrorReportProps | null>(null)
 
   const fetchInvitationData = async () => {
     const response = await fetch('/api/ui/v1/invited/', fetchJsonOpts())
     if (!response.ok) {
+      try {
+        // Expect that the error will contain some JSON-data in the body
+        const errorData = await response.json()
+        setFetchInvitationDataError({
+          errorHeading: t('error.invitationDataFetchFailed'),
+          statusCode: response.status,
+          statusText: response.statusText,
+          errorBodyText: t(`error.codes.${errorData?.code}`),
+        })
+      } catch (e: unknown) {
+        console.error(e)
+
+        // Probably some unknown data in the body, create an error message
+        // using the rest of the information in the response
+        setFetchInvitationDataError({
+          errorHeading: t('error.invitationDataFetchFailed'),
+          statusCode: response.status,
+          statusText: response.statusText,
+          errorBodyText: undefined,
+        })
+      }
+
       return
     }
+    setFetchInvitationDataError(null)
     const data: InvitationData = await response.json()
 
     const authenticationMethod =
@@ -149,7 +167,7 @@ export default function GuestRegister() {
       role_name_nb: data.role.role_name_nb ?? '',
       role_start: data.role.start ?? '',
       role_end: data.role.end ?? '',
-      comment: data.role.comments ?? '',
+      contact_person_unit: data.role.contact_person_unit ?? '',
 
       authentication_method: authenticationMethod,
     })
@@ -192,6 +210,8 @@ export default function GuestRegister() {
   const handleBack = () => {
     if (activeStep === Step.ConsentStep) {
       setActiveStep(Step.RegisterStep)
+      // Clear error if any
+      setSubmitGuestDataError(null)
     }
   }
 
@@ -257,15 +277,43 @@ export default function GuestRegister() {
     fetch('/api/ui/v1/invited/', submitJsonOpts('POST', payload))
       .then((response) => {
         if (response.ok) {
-          setSubmitState(SubmitState.Submitted)
           setActiveStep(Step.SuccessStep)
+          setSubmitGuestDataError(null)
         } else {
-          setSubmitState(SubmitState.SubmittedError)
-          console.error(`Server responded with status: ${response.status}`)
+          // Expect that the error will contain JSON-data in the body
+          // and that there will be a code field there
+          response
+            .json()
+            .then((errorData) => {
+              setSubmitGuestDataError({
+                errorHeading: t('error.guestRegistrationFailed'),
+                statusCode: response.status,
+                statusText: response.statusText,
+                errorBodyText: t(`error.codes.${errorData?.code}`),
+              })
+            })
+            .catch((error) => {
+              console.error(error)
+
+              // Probably some unknown data in the body, create an error message
+              // using the rest of the information in the response
+              setSubmitGuestDataError({
+                errorHeading: t('error.guestRegistrationFailed'),
+                statusCode: response.status,
+                statusText: response.statusText,
+                errorBodyText: undefined,
+              })
+            })
         }
       })
       .catch((error) => {
-        setSubmitState(SubmitState.SubmittedError)
+        // Something went wrong before/during the backend was called
+        setSubmitGuestDataError({
+          errorHeading: t('error.guestRegistrationFailed'),
+          statusCode: undefined,
+          statusText: undefined,
+          errorBodyText: undefined,
+        })
         console.error(error)
       })
   }
@@ -372,6 +420,24 @@ export default function GuestRegister() {
           </Button>
         )}
       </Box>
+
+      {fetchInvitationDataError !== null && (
+        <ServerErrorReport
+          errorHeading={fetchInvitationDataError?.errorHeading}
+          statusCode={fetchInvitationDataError?.statusCode}
+          statusText={fetchInvitationDataError?.statusText}
+          errorBodyText={fetchInvitationDataError?.errorBodyText}
+        />
+      )}
+
+      {submitGuestDataError !== null && (
+        <ServerErrorReport
+          errorHeading={submitGuestDataError?.errorHeading}
+          statusCode={submitGuestDataError?.statusCode}
+          statusText={submitGuestDataError?.statusText}
+          errorBodyText={submitGuestDataError?.errorBodyText}
+        />
+      )}
     </Page>
   )
 }

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

@@ -11,6 +11,7 @@ import { SubmitHandler, Controller, useForm } from 'react-hook-form'
 import React, {
   forwardRef,
   Ref,
+  useContext,
   useEffect,
   useImperativeHandle,
   useState,
@@ -30,9 +31,11 @@ import { GuestInviteInformation } from '../guestDataForm'
 import { GuestRegisterData } from '../enteredGuestData'
 import { GuestRegisterCallableMethods } from '../guestRegisterCallableMethods'
 import AuthenticationMethod from '../authenticationMethod'
+import { FeatureContext } from '../../../../contexts'
 
 interface GuestRegisterProperties {
   nextHandler(registerData: GuestRegisterData): void
+
   initialGuestData: GuestInviteInformation
   registerData: GuestRegisterData | null
 }
@@ -57,6 +60,7 @@ const GuestRegisterStep = forwardRef(
       string | undefined
     >(undefined)
     const [idErrorState, setIdErrorState] = useState<string>('')
+    const { displayContactAtUnitGuestInput } = useContext(FeatureContext)
 
     console.log('register step registerData', registerData)
 
@@ -528,14 +532,14 @@ const GuestRegisterStep = forwardRef(
                 disabled
               />
 
-              <TextField
-                id="comment"
-                label={t('input.comment')}
-                multiline
-                rows={5}
-                value={initialGuestData.comment}
-                disabled
-              />
+              {displayContactAtUnitGuestInput && (
+                <TextField
+                  id="contactPersonUnit"
+                  label={t('input.contactPersonUnit')}
+                  value={initialGuestData.contact_person_unit}
+                  disabled
+                />
+              )}
             </Stack>
           </form>
         </Box>

frontend/src/routes/index.tsx

@@ -5,24 +5,24 @@ import { styled } from '@mui/system'
 import { CssBaseline } from '@mui/material'
 import fetchIntercept from 'fetch-intercept'
 
+import { registerLocale } from 'i18n-iso-countries'
+import i18n_iso_countries_en from 'i18n-iso-countries/langs/en.json'
+import i18n_iso_countries_nb from 'i18n-iso-countries/langs/nb.json'
+import i18n_iso_countries_nn from 'i18n-iso-countries/langs/nn.json'
+
 import { useUserContext } from 'contexts'
 import { getCookie, deleteCookie } from 'utils'
 
+import GuestRegister from 'routes/guest/register'
 import Sponsor from 'routes/sponsor'
 import Register from 'routes/sponsor/register'
 import FrontPage from 'routes/frontpage'
 import Invite from 'routes/invite'
-import InviteLink from 'routes/invitelink'
-import LogoutInviteSession from 'routes/invitelink/logout'
+import LogoutInviteSession from 'routes/invite/logout'
 import Footer from 'routes/components/footer'
 import Header from 'routes/components/header'
 import NotFound from 'routes/components/notFound'
 import ProtectedRoute from 'components/protectedRoute'
-import { registerLocale } from 'i18n-iso-countries'
-import i18n_iso_countries_en from 'i18n-iso-countries/langs/en.json'
-import i18n_iso_countries_nb from 'i18n-iso-countries/langs/nb.json'
-import i18n_iso_countries_nn from 'i18n-iso-countries/langs/nn.json'
-import GuestRegister from './guest/register'
 
 const AppWrapper = styled('div')({
   display: 'flex',
@@ -77,7 +77,6 @@ export default function App() {
           <ProtectedRoute path="/register">
             <Register />
           </ProtectedRoute>
-          <Route path="/invitelink/" component={InviteLink} />
           <Route path="/invite/logout" component={LogoutInviteSession} />
           <Route path="/invite/" component={Invite} />
           <Route path="/guestregister" component={GuestRegister} />

frontend/src/routes/invite/index.tsx

+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Page from 'components/page'
+import Loading from 'components/loading'
 
 import { styled } from '@mui/material/styles'
 
+import { useUserContext } from 'contexts'
 import { HrefButton } from 'components/button'
 import { HrefLineButton } from 'components/button/linebutton'
+import { submitJsonOpts } from 'utils'
 
 const FlexDiv = styled('div')(() => ({
   display: 'flex',
   gap: '0.5rem',
 }))
 
-function Invite() {
+function ChooseRegistrationMethod() {
   const { t } = useTranslation(['invite'])
 
   return (
     <Page>
       <h1>{t('header')}</h1>
-      <p>
-        {t('description')}
-      </p>
+      <p>{t('description')}</p>
       <FlexDiv>
         <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
         <HrefLineButton to="/guestregister/">{t('manual')}</HrefLineButton>
@@ -28,4 +30,125 @@ function Invite() {
   )
 }
 
+interface ShowFeedbackProps {
+  title: string
+  description: string
+}
+
+function ShowFeedback(props: ShowFeedbackProps) {
+  const { title, description } = props
+
+  return (
+    <Page>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </Page>
+  )
+}
+
+function Invite() {
+  const { t } = useTranslation(['invite'])
+  const { user, fetchUserInfo } = useUserContext()
+  const [inviteToken, setInviteToken] = useState('')
+  const [tokenChecked, setTokenChecked] = useState(false)
+  const [isCheckingToken, setIsCheckingToken] = useState(false)
+  const [tokenOk, setTokenOk] = useState(false)
+  const [checkError, setCheckError] = useState('')
+
+  async function checkToken(token: string) {
+    try {
+      const response = await fetch(
+        '/api/ui/v1/invitecheck/',
+        submitJsonOpts('POST', { invite_token: token })
+      )
+      if (response.status === 200) {
+        setTokenOk(true)
+        return
+      }
+      const data = await response.json()
+
+      if ('code' in data) {
+        setCheckError(data.code)
+      } else {
+        setCheckError('unknown')
+      }
+    } catch (error) {
+      console.error(error)
+      setCheckError('unknown')
+    } finally {
+      setTokenChecked(true)
+      setIsCheckingToken(false)
+    }
+  }
+
+  console.log({ inviteToken, isCheckingToken, tokenChecked, tokenOk, user })
+
+  useEffect(() => {
+    setIsCheckingToken(true)
+    // This may seem unecessary, but race conditions have been
+    // observed where the userinfo endpoint is called too fast
+    // and no invite_id is found in the server-side session
+    setTimeout(fetchUserInfo, 100)
+  }, [setTokenOk])
+
+  if (user.auth) {
+    return <ChooseRegistrationMethod />
+  }
+
+  if (isCheckingToken || (tokenOk && !user.auth)) {
+    return <Loading />
+  }
+
+  if (inviteToken !== '' && !tokenChecked) {
+    checkToken(inviteToken)
+    return <Loading />
+  }
+
+  if (checkError !== '') {
+    if (
+      checkError === 'missing_invite_token' ||
+      checkError === 'invalid_invite_token'
+    ) {
+      // Missing or invalid token
+      return (
+        <ShowFeedback
+          title={t('common:error.error')}
+          description={t('invite:errors.invalidToken')}
+        />
+      )
+    }
+    if (checkError === 'expired_invite_token') {
+      // Expired token
+      return (
+        <ShowFeedback
+          title={t('common:error.error')}
+          description={t('invite:errors.expiredToken')}
+        />
+      )
+    }
+    // Unknown error
+    return (
+      <ShowFeedback
+        title={t('common:error.error')}
+        description={t('common:error.unknown')}
+      />
+    )
+  }
+
+  const providedToken = window.location.hash.slice(1).trim()
+
+  if (!inviteToken && providedToken) {
+    setInviteToken(providedToken)
+    return <Loading />
+  }
+
+  // We'll end up here if no token was provided in the URL
+  return (
+    <ShowFeedback
+      title={t('common:error.error')}
+      description={t('invite:errors.invalidToken')}
+    />
+  )
+}
+
 export default Invite

frontend/src/routes/invitelink/index.tsx

-import { useEffect } from 'react'
-import { Redirect } from 'react-router-dom'
-import { submitJsonOpts, setCookie } from 'utils'
-
-function InviteLink() {
-  // Fetch backend endpoint to preserve invite_id in backend session then redirect
-  // to generic invite page with info about feide login or manual with passport.
-
-  const id = window.location.hash.slice(1)
-
-  useEffect(() => {
-    fetch('/api/ui/v1/invitecheck/', submitJsonOpts('POST', { uuid: id }))
-  }, [])
-  setCookie('redirect', '/guestregister')
-  return <Redirect to="/invite" />
-}
-
-export default InviteLink