Merge branch 'GREG-141-invite-page-sketch-match' into 'master'

Make invite page match sketches

See merge request !207

frontend/public/locales/en/frontpage.json

 {
   "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",

frontend/public/locales/en/invite.json

 {
   "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."

frontend/public/locales/en/login.json

+{ "login": "Log in (FEIDE/ID-porten)", "manual": "Manual registration" }

frontend/public/locales/nb/frontpage.json

 {
   "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."
+}

frontend/public/locales/nb/invite.json

 {
   "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."

frontend/public/locales/nb/login.json

+{ "login": "Logg inn (FEIDE/ID-porten)", "manual": "Manuell registrering" }

frontend/public/locales/nn/frontpage.json

 {
   "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
+}

frontend/public/locales/nn/invite.json

 {
   "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."

frontend/public/locales/nn/login.json

+{ "login": "Logg inn (FEIDE/ID-porten)", "manual": "Manuell registrering" }

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

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',
         }}

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>
   )
 }