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..4ca002bd9675bb9d3588a7d3d2c20adcdc38707c 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 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..2b77a7cc35f71a476f298c3cd4f9902e48ab07f3 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 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..539d2759294a15cad41828598cdf6e7e9f714b15 --- /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 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..e646e77546b58617ade7f47a48e3c5220f46e1ef --- /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 448c9e4ebcff608ce7579eeb6deceb581dc290ea..a8e8cc20a7ec9fe3819f3b278da09e7127ec4ec0 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 07e9c3001665d0ab36b3839899fd8f1f293b22f5..2e5975de3e5bd3e2ed3cf64a7c0882db492e697b 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> ) }