From db7c557ee7d037f3549c8fba3ebb1c39329fb307 Mon Sep 17 00:00:00 2001
From: Sivert Kronen Hatteberg <skh@uio.no>
Date: Fri, 3 Dec 2021 08:35:54 +0100
Subject: [PATCH] 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 | 10 ++-
frontend/public/locales/nb/frontpage.json | 10 ++-
frontend/public/locales/nn/footer.json | 2 +-
frontend/public/locales/nn/frontpage.json | 10 ++-
frontend/src/components/loginBox/index.tsx | 61 +++++++++++++++++++
.../routes/frontpage/components/loginpage.tsx | 41 +++++++++----
frontend/src/utils/index.ts | 17 ++++++
7 files changed, 130 insertions(+), 21 deletions(-)
create mode 100644 frontend/src/components/loginBox/index.tsx
diff --git a/frontend/public/locales/en/frontpage.json b/frontend/public/locales/en/frontpage.json
index a580f0ec..c4a59e86 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"
+ "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
diff --git a/frontend/public/locales/nb/frontpage.json b/frontend/public/locales/nb/frontpage.json
index 2d123c53..48c13192 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 a4f6ecd0..b06709b0 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 2d123c53..87d32b93 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 00000000..448c9e4e
--- /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 711648f8..79d2f554 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 2e993f03..35eb41c8 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
+ }
+}
--
GitLab