frontend/package-lock.json

@@ -36,6 +36,7 @@
         "libphonenumber-js": "^1.9.35",
         "lodash": "^4.17.21",
         "react": "^17.0.2",
+        "react-cookie": "^4.1.1",
         "react-dom": "^17.0.2",
         "react-helmet": "^6.1.0",
         "react-hook-form": "^7.17.5",
@@ -4222,6 +4223,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "node_modules/@types/eslint": {
       "version": "7.28.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
@@ -4258,6 +4264,15 @@
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
       "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ=="
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@@ -18211,6 +18226,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -21857,6 +21885,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "dependencies": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -26973,6 +27010,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/eslint": {
       "version": "7.28.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
@@ -27009,6 +27051,15 @@
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
       "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ=="
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@@ -37821,6 +37872,16 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -40693,6 +40754,15 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

frontend/package.json

@@ -31,6 +31,7 @@
     "libphonenumber-js": "^1.9.35",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.17.5",

frontend/public/favicons/uio.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="15px" viewBox="0 0 33 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>UiO_Forkortelse_B</title>
+    <defs>
+        <polygon id="path-1" points="0 0.254597753 13.2565213 0.254597753 13.2565213 12.9438202 0 12.9438202"></polygon>
+        <polygon id="path-3" points="0.201348315 0.270130337 13.3033708 0.270130337 13.3033708 13.3033708 0.201348315 13.3033708"></polygon>
+    </defs>
+    <g id="Ikoner" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Favicon" transform="translate(-621.000000, -609.000000)">
+            <g id="Group-11" transform="translate(621.041603, 609.000000)">
+                <g id="Group-3" transform="translate(0.000000, 1.120935)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-2"></g>
+                    <path d="M-0.000107865169,0.564170787 L-0.000107865169,0.254597753 L5.76025169,0.254597753 L5.76025169,0.564170787 C4.09229663,0.770193258 4.05777978,0.976575281 4.05777978,2.7822382 L4.05777978,7.75122697 C4.05777978,10.4507326 4.9688809,11.9637213 7.30739775,11.9637213 C9.8350382,11.9637213 10.6947236,10.1925753 10.7464989,7.6135191 L10.7464989,2.76497978 C10.7464989,0.993833708 10.711982,0.770193258 9.04402697,0.564170787 L9.04402697,0.254597753 L13.2565213,0.254597753 L13.2565213,0.564170787 C11.5889258,0.770193258 11.554409,0.993833708 11.554409,2.76497978 L11.554409,7.5793618 C11.554409,11.310418 9.81813933,12.9438562 6.74002697,12.9438562 C3.31818427,12.9438562 1.70200449,11.1730697 1.70200449,7.99176629 L1.70200449,2.7822382 C1.70200449,1.01109213 1.66784719,0.770193258 -0.000107865169,0.564170787" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
+                </g>
+                <path d="M17.0062022,11.3652494 C17.0062022,13.1363955 17.0238202,13.3769348 18.3818427,13.5315416 L18.3818427,13.8414742 L13.4642697,13.8414742 L13.4642697,13.5315416 C14.8230112,13.3769348 14.8399101,13.1363955 14.8399101,11.3652494 L14.8399101,7.7546427 C14.8399101,5.9320809 14.7198202,5.91482247 13.4642697,5.88030562 L13.4642697,5.58835056 L17.0579775,4.43635056 C17.0407191,5.34745169 17.0062022,6.48219326 17.0062022,8.2360809 L17.0062022,11.3652494 Z" id="Fill-4" fill="#000000"></path>
+                <g id="Group-8" transform="translate(18.696629, 0.761384)">
+                    <mask id="mask-4" fill="white">
+                        <use xlink:href="#path-3"></use>
+                    </mask>
+                    <g id="Clip-7"></g>
+                    <path d="M6.75235955,0.906534831 C4.37932584,0.906534831 2.83217978,3.1591191 2.83217978,6.78662472 C2.83217978,10.4144899 4.37932584,12.6670742 6.75235955,12.6670742 C9.12539326,12.6670742 10.6725393,10.4144899 10.6725393,6.78662472 C10.6725393,3.1591191 9.12539326,0.906534831 6.75235955,0.906534831 M6.75235955,0.270130337 C10.122427,0.270130337 13.3033708,2.53997303 13.3033708,6.78662472 C13.3033708,11.033636 10.122427,13.3034787 6.75235955,13.3034787 C3.38229213,13.3034787 0.201348315,11.033636 0.201348315,6.78662472 C0.201348315,2.53997303 3.38229213,0.270130337 6.75235955,0.270130337" id="Fill-6" fill="#000000" mask="url(#mask-4)"></path>
+                </g>
+                <path d="M14.4099955,1.35820225 C14.4099955,0.601707865 15.0464,0.000179775281 15.8201528,0.000179775281 C16.6108045,0.000179775281 17.2299506,0.601707865 17.2299506,1.35820225 C17.2299506,2.13195506 16.6108045,2.75110112 15.8201528,2.75110112 C15.0464,2.75110112 14.4099955,2.13195506 14.4099955,1.35820225" id="Fill-9" fill="#000000"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

frontend/public/index.html

@@ -2,18 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Web site for registering guests at the university."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+      rel="stylesheet"
+    />
     <title>Guest Registration</title>
   </head>
   <body>

frontend/public/locales/en/common.json

@@ -2,7 +2,6 @@
   "language": {
     "change": "Change language to {{lang}}"
   },
-  "fnr": "National identity number",
   "header": {
     "applicationTitle": "Guest Registration",
     "applicationDescription": "Registration service for guests",
@@ -145,5 +144,11 @@
     "confirmIdentityTitle": "Confirm?",
     "cancelInvitation": "Cancel invitation?",
     "cancelInvitationDescription": "Do you want to cancel the invitation?"
+  },
+  "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."
   }
 }

frontend/public/locales/en/frontpage.json

 {
-  "description": "Gjestetjenesten er for personer som ikke er ansatt eller student ved UiO som har behov for tilgang til deler av UiOs IT-systemer. Enkelte ansatte eller andre tilknyttede personer som mottar lønn fra UiO kan også ha behov for IT-tilganger i en lengre periode enn kontraktsperioden. Logg inn for å registrere en ny gjest eller endre på en eksisterende konto.",
-  "header": "Guest Registration",
-  "login": "Login"
-}
+  "description": "The Guest Service is for individuals who are not employed or student at {{inst}}, that need access to part of {{inst}}s IT-services. Choose log-in method below:",
+  "header": "Guest Service",
+  "login": "Log in (FEIDE/ID-porten)",
+  "sponsor": "Sponsor",
\ No newline at end of file
+  "sponsorInfo": "Only for administration of guests.",
+  "guest": "Guests",
+  "guestInfo": "Only for guests. Access to registered personal information."
+}

frontend/public/locales/nb/common.json

@@ -2,7 +2,6 @@
   "language": {
     "change": "Bytt språk til {{lang}}"
   },
-  "fnr": "Fødselsnummer",
   "header": {
     "applicationTitle": "Gjestetjenesten",
     "applicationDescription": "Registreringstjeneste for gjester",
@@ -12,7 +11,7 @@
     "firstName": "Fornavn",
     "lastName": "Etternavn",
     "dateOfBirth": "Fødselsdato",
-    "nationalIdNumber": "Fødselsnummer",
+    "nationalIdNumber": "Fødselsnummer/D-nummer",
     "roleType": "Gjesterolle",
     "roleStartDate": "Fra",
     "roleEndDate": "Til",
@@ -78,13 +77,13 @@
   "active": "Aktiv",
   "expired": "Utgått",
   "details": "Detaljer",
-  "nationalIdNumber": "Fødselsnummer",
+  "nationalIdNumber": "Fødselsnummer/D-nummer",
   "validation": {
     "firstNameRequired": "Fornavn er obligatorisk",
     "lastNameRequired": "Etternavn er obligatorisk",
     "dateOfBirthRequired": "Fødselsdato er obligatorisk",
-    "invalidIdNumber": "Ugyldig fødselsnummer",
-    "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+    "invalidIdNumber": "Ugyldig fødselsnummer/D-nummer",
+    "nationalIdNumberRequired": "Fødselsnummer/D-nummer er obligatorisk",
     "roleTypeRequired": "Rolletype er obligatorisk",
     "roleEndRequired": "Sluttdato for rolle er obligatorisk",
     "emailRequired": "E-post er obligatorisk",
@@ -96,7 +95,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",
-    "nationalIdOrPassport": "Fødselsnummer eller passinformasjon må oppgis"
+    "nationalIdOrPassport": "Fødselsnummer/D-nummer eller passinformasjon må spesifiseres"
   },
   "button": {
     "yes": "Ja",
@@ -145,5 +144,11 @@
     "confirmIdentityTitle": "Bekrefte?",
     "cancelInvitation": "Kanseller invitasjon?",
     "cancelInvitationDescription": "Vil du kansellere invitasjonen?"
+  },
+  "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."
   }
 }

frontend/public/locales/nb/frontpage.json

 {
-  "description": "Gjestetjenesten er for personer som ikke er ansatt eller student ved UiO som har behov for tilgang til deler av UiOs IT-systemer. Enkelte ansatte eller andre tilknyttede personer som mottar lønn fra UiO kan også ha behov for IT-tilganger i en lengre periode enn kontraktsperioden. Logg inn for å registrere en ny gjest eller endre på en eksisterende konto.",
+  "description": "Gjestetjenesten er for personer som ikke er ansatt eller student ved {{inst}} som har behov for tilgang til deler av {{inst}}s IT-systemer. Velg en innloggingsmetode:",
   "header": "Gjestetjenesten",
-  "login": "Logg inn"
-}
+  "login": "Logg inn (FEIDE/ID-porten)",
+  "sponsor": "Verter",
\ No newline at end of file
+  "sponsorInfo": "Kun for administratorer av gjester. ",
+  "guest": "Gjester",
+  "guestInfo": "Kun for gjester. Innsyn i registert innformasjon."
+} 
\ No newline at end of file

frontend/public/locales/nn/common.json

@@ -3,7 +3,6 @@
     "languageName": "Språk",
     "change": "Bytt språk til {{lang}}"
   },
-  "fnr": "National identity number",
   "header": {
     "applicationTitle": "Gjestetenesta",
     "applicationDescription": "Registreringsteneste for gjester",
@@ -13,7 +12,7 @@
     "firstName": "Fornamn",
     "lastName": "Etternamn",
     "dateOfBirth": "Fødselsdato",
-    "nationalIdNumber": "Fødselsnummer",
+    "nationalIdNumber": "Fødselsnummer/D-nummer",
     "roleType": "Gjesterolle",
     "roleStartDate": "Frå",
     "roleEndDate": "Til",
@@ -79,13 +78,13 @@
   "active": "Aktiv",
   "expired": "Utgått",
   "details": "Detaljer",
-  "nationalIdNumber": "Fødselsnummer",
+  "nationalIdNumber": "Fødselsnummer/D-nummer",
   "validation": {
     "firstNameRequired": "Fornamn er obligatorisk",
     "lastNameRequired": "Etternamn er obligatorisk",
     "dateOfBirthRequired": "Fødselsdato er obligatorisk",
-    "invalidIdNumber": "Ugyldig fødselsnummer",
-    "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+    "invalidIdNumber": "Ugyldig fødselsnummer/D-nummer",
+    "nationalIdNumberRequired": "Fødselsnummer/D-nummer er obligatorisk",
     "roleTypeRequired": "Rolletype er obligatorisk",
     "roleEndRequired": "Sluttdato for rolle er obligatorisk",
     "emailRequired": "E-post er obligatorisk",
@@ -97,7 +96,7 @@
     "startDateMustBeSet": "Startdato må vere satt",
     "startDateMustBeBeforeEndDate": "Startdato må vere før sluttdato",
     "passportNationalityAndNumber": "Både passnasjonalitet og nummer må vere satt",
-    "nationalIdOrPassport": "Fødselsnummer eller passinformasjon må oppgjevast"
+    "nationalIdOrPassport": "Fødselsnummer/D-nummer eller passinformasjon må spesifiserast"
   },
   "button": {
     "yes": "Ja",
@@ -146,5 +145,11 @@
     "confirmIdentityTitle": "Bekrefte?",
     "cancelInvitation": "Kanseller invitasjon?",
     "cancelInvitationDescription": "Vil du kansellere invitasjonen?"
+  },
+  "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."
   }
 }

frontend/public/locales/nn/footer.json

 {
-  "applicationTitle": "Gjestetjenesten",
+  "applicationTitle": "Gjestetenesta",
   "link": {
     "terms": {
       "header": "VILKÅR",

frontend/public/locales/nn/frontpage.json

 {
-  "description": "Gjestetjenesten er for personer som ikke er ansatt eller student ved UiO som har behov for tilgang til deler av UiOs IT-systemer. Enkelte ansatte eller andre tilknyttede personer som mottar lønn fra UiO kan også ha behov for IT-tilganger i en lengre periode enn kontraktsperioden. Logg inn for å registrere en ny gjest eller endre på en eksisterende konto.",
-  "header": "Gjestetjenesten",
-  "login": "Logg inn"
+  "description": "Gjestetenesta er for personar som ikkje er ansatt eller student ved {{inst}} som har behov for tilgang til delar av {{inst}}s IT-systemer. Velg ein innloggingsmetode:",
+  "header": "Gjestetenesta",
+  "login": "Logg inn (FEIDE/ID-porten)",
+  "sponsor": "Vertar",
+  "sponsorInfo": "Kun for administratorar av gjestar. ",
+  "guest": "Gjestar",
+  "guestInfo": "Kun for gjestar. Innsyn i registert innformasjon."
 }
\ No newline at end of file

frontend/public/manifest.json

 {
   "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
+  "name": "Guest Service",
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

frontend/src/components/errorReport/index.tsx

+import { Alert, AlertTitle } from '@mui/material'
+import { Trans, useTranslation } from 'react-i18next'
+import React from 'react'
+
+interface ErrorReportProps {
+  errorHeading: string
+  statusCode?: number
+  statusText?: string
+  errorBodyText?: string
+}
+
+export default function ServerErrorReport({
+  errorHeading,
+  statusCode,
+  statusText,
+  errorBodyText,
+}: ErrorReportProps) {
+  const [t] = useTranslation(['common'])
+  return (
+    <Alert severity="error">
+      <AlertTitle>{errorHeading}</AlertTitle>
+      {statusCode !== undefined && (
+        <Trans i18nKey="error.errorStatusCode" t={t}>
+          Status code: {{ statusCode }} (<strong>{{ statusText }}</strong>)
+        </Trans>
+      )}
+      <br />
+      {errorBodyText !== undefined && (
+        <Trans i18nKey="error.genericServerErrorBody" t={t}>
+          The server reported:
+          <blockquote>{{ errorBodyText }}</blockquote>
+        </Trans>
+      )}
+      {t('error.contactHelp')}
+    </Alert>
+  )
+}
+
+ServerErrorReport.defaultProps = {
+  statusCode: undefined,
+  statusText: undefined,
+  errorBodyText: undefined,
+}

frontend/src/components/loginBox/index.tsx

+import { useTranslation } from 'react-i18next'
+
+import { styled } from '@mui/system'
+import Box from '@mui/material/Box'
+import AccountBoxOutlinedIcon from '@mui/icons-material/AccountBoxOutlined'
+
+import { HrefButton } from 'components/button'
+
+const StyledParagraph = styled('p')({
+  fontSize: '1rem',
+})
+
+const StyledBox = styled(Box)({
+  borderStyle: 'solid',
+  borderColor: 'black',
+  borderWidth: '2px',
+  borderRadius: '1%',
+  width: '24rem',
+  height: '18rem',
+})
+
+interface LoginBoxProps {
+  header: string
+  info: string
+}
+
+export default function LoginBox({ header, info }: LoginBoxProps) {
+  const { t } = useTranslation(['frontpage'])
+  return (
+    <StyledBox
+      sx={{
+        marginBottom: { xs: '2rem', md: '0rem' },
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          margin: '2rem',
+          height: '35%',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <AccountBoxOutlinedIcon
+            fontSize="inherit"
+            sx={{
+              marginRight: { xs: '0rem', md: '0.5rem' },
+            }}
+          />
+          {header}
+        </Box>
+        <StyledParagraph>{info}</StyledParagraph>
+      </Box>
+      <Box sx={{ display: 'flex', margin: '2rem' }}>
+        <HrefButton to="/oidc/authenticate/">
+          <Box sx={{ margin: '0 2rem 0 2rem' }}>{t('login')}</Box>
+        </HrefButton>
+      </Box>
+    </StyledBox>
+  )
+}

frontend/src/components/page/page.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 
 import { styled } from '@mui/material/styles'
 import { Container } from '@mui/material'
+import { appInst } from 'appConfig'
 
 const StyledPageHeader = styled('h2')(({ theme }) => ({
   color: theme.greg.textWhite,
@@ -17,6 +18,19 @@ interface IPage {
   header?: string
 }
 
+let faviconPath = ''
+
+switch (appInst) {
+  case 'uib':
+    faviconPath = 'favicons/uib.ico'
+    break
+  case 'uio':
+    faviconPath = 'favicons/uio.svg'
+    break
+  default:
+    faviconPath = 'favicons/uio.svg'
+}
+
 export default function Page(props: IPage) {
   const { header, children } = props
   const { i18n, t } = useTranslation()
@@ -25,6 +39,7 @@ export default function Page(props: IPage) {
   return (
     <>
       <Helmet titleTemplate={`%s - ${appTitle}`} defaultTitle={appTitle}>
+        <link rel="icon" href={faviconPath} />
         <html lang={i18n.language} />
         <title>{header}</title>
       </Helmet>

frontend/src/contexts/userContext.ts

@@ -12,6 +12,7 @@ function noop() {}
 export const UserContext = createContext<IUserContext>({
   user: {
     auth: false,
+    auth_type: '',
     fetched: false,
     first_name: '',
     last_name: '',