diff --git a/frontend/public/locales/en/frontpage.json b/frontend/public/locales/en/frontpage.json
index a580f0ec722047ecefa32bf45f5cf2ba401c93cc..c36fbf7d036f65cd03fcf732012925f8d4fd3855 100644
--- a/frontend/public/locales/en/frontpage.json
+++ b/frontend/public/locales/en/frontpage.json
@@ -1,5 +1,9 @@
{
- "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"
-}
\ No newline at end of file
+ "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",
+ "sponsorInfo": "Only for administration of guests.",
+ "guest": "Guests",
+ "guestInfo": "Only for guests. Access to registered personal information."
+}
diff --git a/frontend/public/locales/nb/frontpage.json b/frontend/public/locales/nb/frontpage.json
index 2d123c53c08b4e003f290932fcf5a2bcf9b00f6e..48c13192a18ce47aeeca727299ea839e173fce3b 100644
--- a/frontend/public/locales/nb/frontpage.json
+++ b/frontend/public/locales/nb/frontpage.json
@@ -1,5 +1,9 @@
{
- "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"
-}
\ No newline at end of file
+ "login": "Logg inn (FEIDE/ID-porten)",
+ "sponsor": "Verter",
+ "sponsorInfo": "Kun for administratorer av gjester. ",
+ "guest": "Gjester",
+ "guestInfo": "Kun for gjester. Innsyn i registert innformasjon."
+}
\ No newline at end of file
diff --git a/frontend/public/locales/nn/footer.json b/frontend/public/locales/nn/footer.json
index a4f6ecd0ede382dda34c32c3fa3c88a7fdb990c0..b06709b0acc720a59ca95058da55cad613aaffef 100644
--- a/frontend/public/locales/nn/footer.json
+++ b/frontend/public/locales/nn/footer.json
@@ -1,5 +1,5 @@
{
- "applicationTitle": "Gjestetjenesten",
+ "applicationTitle": "Gjestetenesta",
"link": {
"terms": {
"header": "VILKÃ…R",
diff --git a/frontend/public/locales/nn/frontpage.json b/frontend/public/locales/nn/frontpage.json
index 2d123c53c08b4e003f290932fcf5a2bcf9b00f6e..87d32b93acef3700bad6182ad8badcd00835120d 100644
--- a/frontend/public/locales/nn/frontpage.json
+++ b/frontend/public/locales/nn/frontpage.json
@@ -1,5 +1,9 @@
{
- "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
diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..448c9e4ebcff608ce7579eeb6deceb581dc290ea
--- /dev/null
+++ b/frontend/src/components/loginBox/index.tsx
@@ -0,0 +1,61 @@
+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>
+ )
+}
diff --git a/frontend/src/routes/frontpage/components/loginpage.tsx b/frontend/src/routes/frontpage/components/loginpage.tsx
index 711648f86f99d57040307733539ddf23382a66be..79d2f554f6264e635a20305b4bd9ff44579b8001 100644
--- a/frontend/src/routes/frontpage/components/loginpage.tsx
+++ b/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>
)
}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 2e993f03bff6a5cfd9a328ecae548157973b36e4..35eb41c832191ce2cb8e49150ad1db9b7c9ae60c 100644
--- a/frontend/src/utils/index.ts
+++ b/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
+ }
+}