Merge branch 'GREG-75-invitation-page' into 'master'

Greg 75 invitation page

See merge request !117

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.",
+  "header": "Guest Registration",
+  "login": "Log in with FEIDE",
+  "manual": "Registrate manually"
+}

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

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

frontend/src/components/button/index.tsx

@@ -8,7 +8,11 @@ interface IHrefButton {
 
 function HrefButton({ to, children }: IHrefButton) {
   return (
-    <Button variant="contained" href={to} sx={{ backgroundColor: '#18191C' }}>
+    <Button
+      variant="contained"
+      href={to}
+      sx={{ backgroundColor: 'theme.palette.secondary' }}
+    >
       {children}
     </Button>
   )

frontend/src/components/button/linebutton.tsx

+import React from 'react'
+import { Button } from '@mui/material'
+
+interface IHrefButton {
+  to: string
+  children: React.ReactNode
+}
+
+function HrefLineButton({ to, children }: IHrefButton) {
+  return (
+    <Button href={to} sx={{ color: 'theme.palette.secondary' }}>
+      {children}
+    </Button>
+  )
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export { HrefLineButton }

frontend/src/routes/invite/index.tsx

+import { useTranslation } from 'react-i18next'
 import Page from 'components/page'
-import { useUserContext } from 'contexts'
-import { Link } from 'react-router-dom'
+
+import { styled } from '@mui/material/styles'
+
+import { HrefButton } from 'components/button'
+import { HrefLineButton } from 'components/button/linebutton'
+
+const FlexDiv = styled('div')(() => ({
+  display: 'flex',
+  gap: '0.5rem',
+}))
 
 function Invite() {
-  const { user } = useUserContext()
+  const { t } = useTranslation(['invite'])
 
   return (
     <Page>
+      <h1>{t('header')}</h1>
       <p>
-        {user.first_name} {user.last_name}
-        TODO: Put information about login options, and buttons to them on this
-        page
+        {t('description')}
       </p>
-      After login or when clicking on the manual registration option, the user
-      should be sent here:
-      <Link to="/guestregister/">Guest Registration</Link>
+      <FlexDiv>
+        <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
+        <HrefLineButton to="/guestregister/">{t('manual')}</HrefLineButton>
+      </FlexDiv>
     </Page>
   )
 }