diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index bf866efa5265ec601a931ea812f04c36ec741ac1..833e4b472217f31f0ea703edfce427de539e978a 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -148,7 +148,9 @@
"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."
+ "genericServerErrorBody": "Message:<1>{{errorBodyText}}</1>",
+ "contactHelp": "Contact help through the link in the footer if the problem persists.",
+ "errorLoadOusRoleTypeHeading": "Error loading form data",
+ "errorLoadOusRoleType": "Could not load organizational units and/or role type from server"
}
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 290d8f21ff951f77004efb2acb04566af96c0c4f..3eaa4d75f3581666a46171ee3e89d5f0d74c483e 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -148,7 +148,9 @@
"error": {
"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."
+ "genericServerErrorBody": "Melding:<1>{{errorBodyText}}</1>",
+ "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+ "errorLoadOusRoleTypeHeading": "Feil under lasting av skjemadata",
+ "errorLoadOusRoleType": "Kunne ikke laste organisasjons og/eller rolletype data fra server"
}
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index b7beee8b36c12ab5006cfcc88af9857989ec992d..001606dfbcae78e09beab00cf77813aaec07c7ac 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -149,7 +149,9 @@
"error": {
"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."
+ "genericServerErrorBody": "Melding:<1>{{errorBodyText}}</1>",
+ "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+ "errorLoadOusRoleTypeHeading": "Feil under lasting av skjemadata",
+ "errorLoadOusRoleType": "Kunne ikkje laste organisasjons og/eller rolletype data frå server"
}
}
diff --git a/frontend/src/components/errorReport/index.tsx b/frontend/src/components/errorReport/index.tsx
index 4aace3fff5168fe2edd63667db6240d5fc2420dc..f59c8df0e01a3a25a41d208d3cb066f878f693f8 100644
--- a/frontend/src/components/errorReport/index.tsx
+++ b/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 type ServerErrorReportData = {
errorHeading: string
statusCode?: number
statusText?: string
@@ -14,7 +14,7 @@ export default function ServerErrorReport({
statusCode,
statusText,
errorBodyText,
-}: ErrorReportProps) {
+}: ServerErrorReportData) {
const [t] = useTranslation(['common'])
return (
<Alert severity="error">
@@ -27,7 +27,7 @@ export default function ServerErrorReport({
<br />
{errorBodyText !== undefined && (
<Trans i18nKey="error.genericServerErrorBody" t={t}>
- The server reported:
+ Message:
<blockquote>{{ errorBodyText }}</blockquote>
</Trans>
)}
diff --git a/frontend/src/routes/sponsor/register/stepRegistration.tsx b/frontend/src/routes/sponsor/register/stepRegistration.tsx
index 3b7e98aed639820b29d584a3a034cb7c26ef19ca..9486b9ca60efea9cd81a0cb3f582750b40763a11 100644
--- a/frontend/src/routes/sponsor/register/stepRegistration.tsx
+++ b/frontend/src/routes/sponsor/register/stepRegistration.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Box, Button } from '@mui/material'
@@ -14,7 +14,11 @@ import SubmitState from './submitState'
import SponsorGuestButtons from '../../components/sponsorGuestButtons'
import { submitJsonOpts } from '../../../utils'
import StepSubmitSuccess from './stepSubmitSuccess'
-import ServerErrorReport from '../../../components/errorReport'
+import ServerErrorReport, {
+ ServerErrorReportData,
+} from '../../../components/errorReport'
+import useOus from '../../../hooks/useOus'
+import useRoleTypes from '../../../hooks/useRoleTypes'
enum Steps {
RegisterStep = 0,
@@ -22,12 +26,6 @@ enum Steps {
SuccessStep = 2,
}
-interface SubmitErrorData {
- statusCode: number
- statusText: string
- bodyText: string
-}
-
/**
*
* This component controls the invite process where the sponsor
@@ -52,7 +50,16 @@ export default function StepRegistration() {
const [activeStep, setActiveStep] = useState(0)
const personFormRef = useRef<PersonFormMethods>(null)
const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
- const [errorReport, setErrorReport] = useState<SubmitErrorData>()
+ const [submitErrorReport, setSubmitErrorReport] =
+ useState<ServerErrorReportData>()
+ const [formDataErrorReport, setFormDataErrorReport] =
+ useState<ServerErrorReportData>()
+
+ // The organizational unit and role types are not used by this component, but
+ // loading them here anyways to make sure that they can be loaded using the
+ // hooks. If they cannot, an error message will be shown to the user
+ const ous = useOus()
+ const roleTypes = useRoleTypes()
const handleNext = () => {
if (activeStep === 0) {
@@ -91,10 +98,11 @@ export default function StepRegistration() {
if (!res.ok) {
res.text().then((text) => {
setSubmitState(SubmitState.SubmitFailure)
- setErrorReport({
+ setSubmitErrorReport({
+ errorHeading: t('error.invitationCreationFailedHeader'),
statusCode: res.status,
statusText: res.statusText,
- bodyText: text,
+ errorBodyText: text,
})
})
} else {
@@ -130,6 +138,20 @@ export default function StepRegistration() {
history.push('/')
}
+ useEffect(() => {
+ if (ous.length === 0 || roleTypes.length === 0) {
+ // These arrays should have values. There is no information
+ // about the status code at this level, since the values come
+ // from hooks and any server errors are handled there
+ setFormDataErrorReport({
+ errorHeading: t('error.errorLoadOusRoleTypeHeading'),
+ statusCode: undefined,
+ statusText: undefined,
+ errorBodyText: t('error.errorLoadOusRoleType'),
+ })
+ }
+ }, [])
+
return (
<Page>
<SponsorGuestButtons registerNewGuestActive />
@@ -203,14 +225,23 @@ export default function StepRegistration() {
{activeStep === Steps.SuccessStep && <StepSubmitSuccess />}
{submitState === SubmitState.SubmitFailure &&
- errorReport !== undefined && (
+ submitErrorReport !== undefined && (
<ServerErrorReport
- errorHeading={t('error.invitationCreationFailedHeader')}
- statusCode={errorReport?.statusCode}
- statusText={errorReport?.statusText}
- errorBodyText={errorReport?.bodyText}
+ errorHeading={submitErrorReport?.errorHeading}
+ statusCode={submitErrorReport?.statusCode}
+ statusText={submitErrorReport?.statusText}
+ errorBodyText={submitErrorReport?.errorBodyText}
/>
)}
+
+ {formDataErrorReport !== undefined && (
+ <ServerErrorReport
+ errorHeading={formDataErrorReport.errorHeading}
+ statusCode={undefined}
+ statusText={undefined}
+ errorBodyText={formDataErrorReport.errorBodyText}
+ />
+ )}
</Page>
)
}