Make the login-page look like the sketch.

- Create a new loginbox component. To be used as invitation login
  latter.
- Add a util function that creates the correct stylized institution abbrevation

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 of 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",
+  "sponsorInfo": "Only for administration of guests.",
+  "guest": "Guests",
+  "guestInfo": "Only for guests. Access to registered personal information."
 }
\ No newline at end of file

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/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/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/routes/frontpage/components/loginpage.tsx

@@ -2,11 +2,9 @@ import { useTranslation } from 'react-i18next'
 import { styled } from '@mui/system'
 import { Container } from '@mui/material'
 
-import { HrefButton } from 'components/button'
-
-const StyledWrapper = styled('div')({
-  paddingTop: '2rem',
-})
+import LoginBox from 'components/loginBox'
+import { instNameUpperCaser } from 'utils'
+import { appInst } from 'appConfig'
 
 const StyledParagraph = styled('p')({
   fontSize: '1rem',
@@ -16,12 +14,33 @@ export default function LoginPage() {
   const { t } = useTranslation(['frontpage'])
 
   return (
-    <StyledWrapper>
-      <Container maxWidth="sm">
-        <h2>{t('header')}</h2>
-        <StyledParagraph>{t('description')}</StyledParagraph>
-        <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
+    <Container
+      maxWidth="md"
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '4rem',
+        marginBottom: '10rem',
+      }}
+    >
+      <Container>
+        <h1>{t('header')}</h1>
+        <StyledParagraph sx={{ marginBottom: '4rem' }}>
+          {t('description', { inst: instNameUpperCaser(appInst) })}
+        </StyledParagraph>
+      </Container>
+
+      <Container
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: { xs: 'column', md: 'row' },
+          alignItems: 'center',
+        }}
+      >
+        <LoginBox header={t('sponsor')} info={t('sponsorInfo')} />
+        <LoginBox header={t('guest')} info={t('guestInfo')} />
       </Container>
-    </StyledWrapper>
+    </Container>
   )
 }

frontend/src/utils/index.ts

@@ -154,3 +154,20 @@ export function parseIdentity(
     verified_at: identity.verified_at ? parseISO(identity.verified_at) : null,
   }
 }
+
+/**
+ * Method to ensure the correct "styled" case of a institution acronym.
+ *
+ * @param instName An institution acronym in any case
+ * @returns The correct "styled" case acronym, or the input string if no match.
+ */
+export function instNameUpperCaser(instName: String): String {
+  switch (instName.toLocaleLowerCase()) {
+    case 'uio':
+      return 'UiO'
+    case 'uib':
+      return 'UiB'
+    default:
+      return instName
+  }
+}