diff --git a/frontend/public/locales/en/frontpage.json b/frontend/public/locales/en/frontpage.json
index c36fbf7d036f65cd03fcf732012925f8d4fd3855..81e5e6cab435c4dbef28e974c279427d65f9994c 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 ac094ff19553d9360f9af1885bc5a40152839691..8c7d0302649a6c5242df7e616c5c25d17551cfe6 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 manual 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 0000000000000000000000000000000000000000..ac1ed888a58320cd4b30ab2c23a68e894286579d
--- /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 48c13192a18ce47aeeca727299ea839e173fce3b..c52c5fa89b0c667c7458c8cbd4537d767aad55b9 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
+ "guestInfo": "Kun for gjester. Innsyn i registert informasjon."
+}
diff --git a/frontend/public/locales/nb/invite.json b/frontend/public/locales/nb/invite.json
index 8ad98cd8c87f22369f8d57a1f9fb94a1eb7cb5cd..f4c327a087e9cba2813071d0816f8e90150e8164 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 0000000000000000000000000000000000000000..ba9a86f4d13b1eb2ab6704d1a2e431b6c80e40cc
--- /dev/null
+++ b/frontend/public/locales/nb/login.json
@@ -0,0 +1 @@
+{ "login": "Logg inn (FEIDE/ID-porten)", "manual": "Manuell registrering" }
diff --git a/frontend/public/locales/nn/frontpage.json b/frontend/public/locales/nn/frontpage.json
index 87d32b93acef3700bad6182ad8badcd00835120d..744ff93bc863a4ff6153996388be5ca1ff4346d0 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 155b826bcf3b540b0a5bfb81ddfeb0d7c878bc6f..746306e08f608266df840f845348e007b6a9b8ff 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 0000000000000000000000000000000000000000..ba9a86f4d13b1eb2ab6704d1a2e431b6c80e40cc
--- /dev/null
+++ b/frontend/public/locales/nn/login.json
@@ -0,0 +1 @@
+{ "login": "Logg inn (FEIDE/ID-porten)", "manual": "Manuell registrering" }
diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
index 448c9e4ebcff608ce7579eeb6deceb581dc290ea..b7e0246c38705717c22f0ba32fab6d7a81f702e2 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,21 +15,23 @@ const StyledBox = styled(Box)({
borderStyle: 'solid',
borderColor: 'black',
borderWidth: '2px',
- borderRadius: '1%',
- width: '24rem',
- height: '18rem',
+ borderRadius: '11px',
})
interface LoginBoxProps {
header: string
info: string
+ manual?: boolean
+ large?: boolean
}
-export default function LoginBox({ header, info }: LoginBoxProps) {
- const { t } = useTranslation(['frontpage'])
+const LoginBox = ({ header, info, manual, large }: LoginBoxProps) => {
+ const { t } = useTranslation('login')
return (
<StyledBox
sx={{
+ width: large ? '48rem' : '24rem',
+ height: '18rem',
marginBottom: { xs: '2rem', md: '0rem' },
}}
>
@@ -51,11 +54,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, large: false }
+export default LoginBox
diff --git a/frontend/src/routes/frontpage/components/loginpage.tsx b/frontend/src/routes/frontpage/components/loginpage.tsx
index 79d2f554f6264e635a20305b4bd9ff44579b8001..0a1e5ba14d0226ebe505cfc4e9b0197dbb2be72f 100644
--- a/frontend/src/routes/frontpage/components/loginpage.tsx
+++ b/frontend/src/routes/frontpage/components/loginpage.tsx
@@ -33,7 +33,7 @@ export default function LoginPage() {
<Container
sx={{
display: 'flex',
- justifyContent: 'space-between',
+ justifyContent: 'space-around',
flexDirection: { xs: 'column', md: 'row' },
alignItems: 'center',
}}
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 07e9c3001665d0ab36b3839899fd8f1f293b22f5..f65303235534871656a6a411af8b38d2544ae7b1 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 { Container } from '@mui/material'
function ChooseRegistrationMethod() {
const { t } = useTranslation(['invite'])
@@ -22,10 +15,16 @@ 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>
+ <Container
+ sx={{
+ display: 'flex',
+ justifyContent: 'space-around',
+ flexDirection: { xs: 'column', md: 'row' },
+ alignItems: 'center',
+ }}
+ >
+ <LoginBox header={t('guest')} info={t('guestInfo')} manual large />
+ </Container>
</Page>
)
}