From 5461a4ddd43f1a7675f1b15bbb5663e24a046ed5 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Tue, 14 Dec 2021 14:39:43 +0100
Subject: [PATCH] Make invite page match sketches
Resolves: GREG-141
---
frontend/public/locales/en/frontpage.json | 1 -
frontend/public/locales/en/invite.json | 4 +--
frontend/public/locales/en/login.json | 1 +
frontend/public/locales/nb/frontpage.json | 3 +-
frontend/public/locales/nb/invite.json | 4 +--
frontend/public/locales/nb/login.json | 1 +
frontend/public/locales/nn/frontpage.json | 3 +-
frontend/public/locales/nn/invite.json | 4 +--
frontend/public/locales/nn/login.json | 1 +
frontend/src/components/loginBox/index.tsx | 33 ++++++++++++++++++----
frontend/src/routes/invite/index.tsx | 18 ++++--------
11 files changed, 44 insertions(+), 29 deletions(-)
create mode 100644 frontend/public/locales/en/login.json
create mode 100644 frontend/public/locales/nb/login.json
create mode 100644 frontend/public/locales/nn/login.json
diff --git a/frontend/public/locales/en/frontpage.json b/frontend/public/locales/en/frontpage.json
index c36fbf7d..81e5e6ca 100644
--- a/frontend/public/locales/en/frontpage.json
+++ b/frontend/public/locales/en/frontpage.json
@@ -1,7 +1,6 @@
{
"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",
diff --git a/frontend/public/locales/en/invite.json b/frontend/public/locales/en/invite.json
index ac094ff1..4ca002bd 100644
--- a/frontend/public/locales/en/invite.json
+++ b/frontend/public/locales/en/invite.json
@@ -1,8 +1,8 @@
{
"description": "Please choose how you want to log in to complete your registration. The recommended way is to log in with either Feide or ID-porten. If that is not possible you can manually fill out the registration form with your passport number or Norwegian national ID number.",
"header": "Guest registration",
- "login": "Log in with FEIDE",
- "manual": "Register manually",
+ "guest": "Guests",
+ "guestInfo": "Only for guests. If you have FEIDE-access, choose FEIDE/ID-porten. If not, choose manuel log-in.",
"errors": {
"invalidToken": "The invitation link you followed is invalid.",
"expiredToken": "The invitation link you followed has expired. Contact your host to get a new link."
diff --git a/frontend/public/locales/en/login.json b/frontend/public/locales/en/login.json
new file mode 100644
index 00000000..ac1ed888
--- /dev/null
+++ b/frontend/public/locales/en/login.json
@@ -0,0 +1 @@
+{ "login": "Log in (FEIDE/ID-porten)", "manual": "Manual registration" }
diff --git a/frontend/public/locales/nb/frontpage.json b/frontend/public/locales/nb/frontpage.json
index 48c13192..2b77a7cc 100644
--- a/frontend/public/locales/nb/frontpage.json
+++ b/frontend/public/locales/nb/frontpage.json
@@ -1,9 +1,8 @@
{
"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 (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/nb/invite.json b/frontend/public/locales/nb/invite.json
index 8ad98cd8..f4c327a0 100644
--- a/frontend/public/locales/nb/invite.json
+++ b/frontend/public/locales/nb/invite.json
@@ -1,8 +1,8 @@
{
"description": "Vennligst velg hvordan du vil logge inn for å fullføre registreringen. Den anbefalte metoden er å logge inn gjennom Feide eller ID-porten. Dersom det ikke er mulig kan du fylle ut registreringskjemaet manuelt med passnummer",
"header": "Gjestetjenesten",
- "login": "Logg inn med FEIDE",
- "manual": "Registrer manuelt",
+ "guest": "Gjester",
+ "guestInfo": "Kun for gjester. Har du FEIDE-innlogging velg FEIDE/ID-porten. Har du ikke FEIDE-innlogging, velg manuell registrering.",
"errors": {
"invalidToken": "Denne invitasjonslenka er ugyldig.",
"expiredToken": "Denne invitasjonslenka er utløpt. Kontakt verten din for å få tilsendt en ny."
diff --git a/frontend/public/locales/nb/login.json b/frontend/public/locales/nb/login.json
new file mode 100644
index 00000000..539d2759
--- /dev/null
+++ b/frontend/public/locales/nb/login.json
@@ -0,0 +1 @@
+{ "login": "Log in (FEIDE/ID-porten)", "manual": "Manuell registrering" }
diff --git a/frontend/public/locales/nn/frontpage.json b/frontend/public/locales/nn/frontpage.json
index 87d32b93..744ff93b 100644
--- a/frontend/public/locales/nn/frontpage.json
+++ b/frontend/public/locales/nn/frontpage.json
@@ -1,9 +1,8 @@
{
"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/public/locales/nn/invite.json b/frontend/public/locales/nn/invite.json
index 155b826b..746306e0 100644
--- a/frontend/public/locales/nn/invite.json
+++ b/frontend/public/locales/nn/invite.json
@@ -1,8 +1,8 @@
{
"description": "Ver venleg og vel korleis du vil logge inn for å fullføre registreringa. Den anbefalte metoden er å logge inn gjennom Feide eller ID-porten. Dersom det ikkje er mogeleg kan du fylle ut registreringskjemaet manuelt med passnummer",
"header": "Gjestetjenesten",
- "login": "Logg inn med FEIDE",
- "manual": "Registrer manuelt",
+ "guest": "Gjestar",
+ "guestInfo": "Kun for gjestar. Har du FEIDE-innlogging velg FEIDE/ID-porten. Har du ikkje FEIDE-innlogging, velg manuell registrering.",
"errors": {
"invalidToken": "Denne invitasjonslenka er ugyldig.",
"expiredToken": "Denne invitasjonslenka har utløpe. Kontakt verten din for å få tilsendt ei ny."
diff --git a/frontend/public/locales/nn/login.json b/frontend/public/locales/nn/login.json
new file mode 100644
index 00000000..e646e775
--- /dev/null
+++ b/frontend/public/locales/nn/login.json
@@ -0,0 +1 @@
+{ "login": "Logg in (FEIDE/ID-porten)", "manual": "Manuell registrering" }
diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
index 448c9e4e..a8e8cc20 100644
--- a/frontend/src/components/loginBox/index.tsx
+++ b/frontend/src/components/loginBox/index.tsx
@@ -5,6 +5,7 @@ import Box from '@mui/material/Box'
import AccountBoxOutlinedIcon from '@mui/icons-material/AccountBoxOutlined'
import { HrefButton } from 'components/button'
+import { Button } from '@mui/material'
const StyledParagraph = styled('p')({
fontSize: '1rem',
@@ -14,7 +15,7 @@ const StyledBox = styled(Box)({
borderStyle: 'solid',
borderColor: 'black',
borderWidth: '2px',
- borderRadius: '1%',
+ borderRadius: '11px',
width: '24rem',
height: '18rem',
})
@@ -22,10 +23,11 @@ const StyledBox = styled(Box)({
interface LoginBoxProps {
header: string
info: string
+ manual?: boolean
}
-export default function LoginBox({ header, info }: LoginBoxProps) {
- const { t } = useTranslation(['frontpage'])
+const LoginBox = ({ header, info, manual }: LoginBoxProps) => {
+ const { t } = useTranslation('login')
return (
<StyledBox
sx={{
@@ -51,11 +53,32 @@ export default function LoginBox({ header, info }: LoginBoxProps) {
</Box>
<StyledParagraph>{info}</StyledParagraph>
</Box>
- <Box sx={{ display: 'flex', margin: '2rem' }}>
+ <Box
+ sx={{
+ display: 'flex',
+ margin: '2rem',
+ flexDirection: 'column',
+ gap: '16px',
+ }}
+ >
<HrefButton to="/oidc/authenticate/">
- <Box sx={{ margin: '0 2rem 0 2rem' }}>{t('login')}</Box>
+ <Box sx={{ margin: '0 2rem 0 2rem', textTransform: 'none' }}>
+ {t('login')}
+ </Box>
</HrefButton>
+
+ {manual && (
+ <Button
+ sx={{ textTransform: 'none', border: '2px solid' }}
+ href="/guestregister/"
+ color="secondary"
+ >
+ <Box sx={{ margin: '0 2rem 0 2rem' }}>{t('manual')}</Box>
+ </Button>
+ )}
</Box>
</StyledBox>
)
}
+LoginBox.defaultProps = { manual: false }
+export default LoginBox
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 07e9c300..2e5975de 100644
--- a/frontend/src/routes/invite/index.tsx
+++ b/frontend/src/routes/invite/index.tsx
@@ -3,17 +3,10 @@ import { useTranslation } from 'react-i18next'
import Page from 'components/page'
import Loading from 'components/loading'
-import { styled } from '@mui/material/styles'
-
import { useUserContext } from 'contexts'
-import { HrefButton } from 'components/button'
-import { HrefLineButton } from 'components/button/linebutton'
import { submitJsonOpts } from 'utils'
-
-const FlexDiv = styled('div')(() => ({
- display: 'flex',
- gap: '0.5rem',
-}))
+import LoginBox from 'components/loginBox'
+import { Box } from '@mui/material'
function ChooseRegistrationMethod() {
const { t } = useTranslation(['invite'])
@@ -22,10 +15,9 @@ function ChooseRegistrationMethod() {
<Page>
<h1>{t('header')}</h1>
<p>{t('description')}</p>
- <FlexDiv>
- <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
- <HrefLineButton to="/guestregister">{t('manual')}</HrefLineButton>
- </FlexDiv>
+ <Box>
+ <LoginBox header={t('guest')} info={t('guestInfo')} manual />
+ </Box>
</Page>
)
}
--
GitLab