diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 23b623dc27804e6390f5ce5422ae88d408e85172..713a15ba11df4cc1687f3576cf281ae912279930 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -8,8 +8,8 @@
},
"fnr": "National identity number",
"header": {
- "applicationTitleShort": "GREG",
- "applicationTitleLong": "Guest Registration",
+ "applicationTitle": "Guest Registration",
+ "applicationDescription": "Registration service for guests",
"selectLanguage": "Select language"
},
"loading": "Loading...",
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index d916c4911609a188677a2bbf3dffcdf27761dbc4..57d358c0dd322350f45ef0216625428a6e76b6ea 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -8,8 +8,8 @@
},
"fnr": "Fødselsnummer",
"header":{
- "applicationTitleShort": "GREG",
- "applicationTitleLong": "Gjesteregistrering",
+ "applicationTitle": "Gjesteregistrering",
+ "applicationDescription": "Registreringstjeneste for gjester",
"selectLanguage": "Velg språk"
},
"loading": "Laster...",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index db11f21eacd26a8402d7d1244315094909efbe62..2e76d48dfcb7f5e3e9582083fdffa687b333cb54 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -9,8 +9,8 @@
},
"fnr": "National identity number",
"header":{
- "applicationTitleShort": "GREG",
- "applicationTitleLong": "Gjesteregistrering",
+ "applicationTitle": "Gjesteregistrering",
+ "applicationDescription": "Registreringsteneste for gjester",
"selectLanguage": "Velg språk"
},
"loading": "Lastar...",
diff --git a/frontend/src/components/dateinput/index.tsx b/frontend/src/components/dateinput/index.tsx
index b7623b9cf0465ac7654eb3ff6ea2ab473034e716..215661edc9b8076bbddff1fe61a6654da2e40605 100644
--- a/frontend/src/components/dateinput/index.tsx
+++ b/frontend/src/components/dateinput/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react'
-import DatePicker, { registerLocale } from 'react-datepicker'
+import { addDays } from 'date-fns'
import nb from 'date-fns/locale/nb'
import nn from 'date-fns/locale/nn'
-import { addDays } from 'date-fns'
-import { useTranslation } from 'react-i18next'
+import React, { useState } from 'react'
+import DatePicker, { registerLocale } from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
+import { useTranslation } from 'react-i18next'
registerLocale('nb', nb)
registerLocale('nn', nn)
diff --git a/frontend/src/components/debug/index.tsx b/frontend/src/components/debug/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6e4f5b4e505a3399cd10c8e7509d42a1e64ce7b
--- /dev/null
+++ b/frontend/src/components/debug/index.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { appTheme, appTimezone, appVersion, appInst } from 'appConfig'
+
+export const Debug = () => {
+ const [apiHealth, setApiHealth] = useState('not yet')
+ const [didContactApi, setDidContactApi] = useState(false)
+ const { i18n } = useTranslation(['common'])
+
+ if (!didContactApi) {
+ setDidContactApi(true)
+ fetch('http://localhost:3000/api/health/')
+ .then((res) => res.text())
+ .then((result) => {
+ if (result === 'OK') {
+ setApiHealth('yes')
+ } else {
+ setApiHealth(result)
+ }
+ })
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ .catch((error) => {
+ setApiHealth('error')
+ })
+ }
+
+ const d = [
+ ['NODE_ENV', process.env.NODE_ENV],
+ ['Version', appVersion],
+ ['Timezone', appTimezone],
+ ['Language', i18n.language],
+ ['Theme', appTheme],
+ ['Institution', appInst],
+ ['API reachable?', apiHealth],
+ ]
+ return (
+ <table>
+ <thead>
+ <strong>Debug</strong>
+ </thead>
+ <tbody>
+ {d.map(([key, value]) => (
+ <tr>
+ <td>{key}</td>
+ <td>{value}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ )
+}
+
+export default Debug
diff --git a/frontend/src/components/page/page.tsx b/frontend/src/components/page/page.tsx
index f7b0c7adb6ed8f029d7b8a268134376cbf0ea197..6a2792ecd1a150c8acb9c49016e3f2f6b7c69467 100644
--- a/frontend/src/components/page/page.tsx
+++ b/frontend/src/components/page/page.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import { Helmet } from 'react-helmet'
+import { useTranslation } from 'react-i18next'
import styled from 'styled-components/macro'
@@ -17,15 +18,18 @@ const StyledPageHeader = styled.h2`
interface IPage {
children: React.ReactNode
- header: string
+ header?: string
}
export default function Page(props: IPage) {
const { header, children } = props
+ const { i18n, t } = useTranslation()
+ const appTitle = t('common:header:applicationTitle')
return (
<>
- <Helmet>
+ <Helmet titleTemplate={`%s - ${appTitle}`} defaultTitle={appTitle}>
+ <html lang={i18n.language} />
<title>{header}</title>
</Helmet>
<StyledPage>
@@ -35,3 +39,7 @@ export default function Page(props: IPage) {
</>
)
}
+
+Page.defaultProps = {
+ header: null,
+}
diff --git a/frontend/src/routes/components/header.tsx b/frontend/src/routes/components/header.tsx
index 0a4f62cbdfa3e2ff31d8a8d7a05155ed1abf5361..bb96b6b82cbf60461f09d60366b50d5187da2619 100644
--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -1,10 +1,10 @@
import React from 'react'
+import { Link } from 'react-router-dom'
import styled from 'styled-components/macro'
import { useTranslation } from 'react-i18next'
import LogoBar from '../../components/logobars/LogoBar'
import LanguageSelector from '../../components/languageselector'
-
const MainWrapper = styled.div`
color: ${({ theme }) => theme.page.headerColor};
background-color: ${({ theme }) => theme.page.headerBackgroundColor};
@@ -14,8 +14,9 @@ const Main = styled.div`
display: flex;
justify-content: space-between;
margin: 0 auto;
- max-width: ${props => props.theme.appMaxWidth};
- padding: ${props => `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
+ max-width: ${(props) => props.theme.appMaxWidth};
+ padding: ${(props) =>
+ `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
`
const Menu = styled.ul`
@@ -33,15 +34,15 @@ const TitleBox = styled.div`
padding-left: 3rem;
`
-const ShortTitle = styled.div`
+const Title = styled.div`
font-size: 2rem;
`
-const LongTitle = styled.div`
+const Description = styled.div`
font-size: 1rem;
`
-function Header() {
+const Header = () => {
const { t } = useTranslation('common')
return (
@@ -50,12 +51,14 @@ function Header() {
<MainWrapper>
<Main>
<TitleBox>
- <ShortTitle>{t('header.applicationTitleShort')}</ShortTitle>
- <LongTitle>{t('header.applicationTitleLong')}</LongTitle>
+ <Link to="/">
+ <Title>{t('header.applicationTitle')}</Title>
+ </Link>
+ <Description>{t('header.applicationDescription')}</Description>
</TitleBox>
<Menu>
<MenuItem>
- <LanguageSelector/>
+ <LanguageSelector />
</MenuItem>
</Menu>
</Main>
diff --git a/frontend/src/routes/frontpage/index.tsx b/frontend/src/routes/frontpage/index.tsx
index 826afe4dd56d8a379c1b0a550e6e05310323ed2c..d48137473b76eaebcbd02ee9b2aaaa7432f71fab 100644
--- a/frontend/src/routes/frontpage/index.tsx
+++ b/frontend/src/routes/frontpage/index.tsx
@@ -1,51 +1,27 @@
-import React, { useState } from 'react'
+import React from 'react'
-import DateInput from 'components/dateinput'
import Page from 'components/page'
-import { appTimezone, appVersion, appTheme } from 'appConfig'
-import { Fnr, Form, Select, Input } from 'components/form'
-import { useTranslation } from 'react-i18next'
+import { Debug } from 'components/debug'
+import { Link } from 'react-router-dom'
export default function FrontPage() {
- const [apiHealth, setApiHealth] = useState('not yet')
- const [didContactApi, setDidContactApi] = useState(false)
- const { t } = useTranslation(['common', 'footer'])
-
- if (!didContactApi) {
- setDidContactApi(true)
- fetch('http://localhost:3000/api/health/')
- .then((res) => res.text())
- .then((result) => {
- if (result === 'OK') {
- setApiHealth('yes')
- } else {
- setApiHealth(result)
- }
- })
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- .catch((error) => {
- setApiHealth('error')
- })
- }
-
return (
- <Page header="Greg main page">
- <DateInput />
- <Form onSubmit={() => {}}>
- <Input name="firstName" />
- <Input name="lastName" />
- <Select name="gender" options={['female', 'male', 'other']} />
- <Fnr name={t('common:fnr')} />
- <button type="submit">Submit</button>
- </Form>
- <br />
- Version {appVersion}
- <br />
- Timezone {appTimezone}
- <br />
- Theme {appTheme}
- <br />
- API reachable? {apiHealth}
+ <Page>
+ <p>
+ <strong>Routes</strong>
+ <ul>
+ <li>
+ <Link to="/">Front page</Link>
+ </li>
+ <li>
+ <Link to="/sponsor/">Sponsor</Link>
+ </li>
+ <li>
+ <Link to="/register/">Registration</Link>
+ </li>
+ </ul>
+ </p>
+ <Debug />
</Page>
)
}
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 2e7736db6ab03af384e17a9c2d9ea3ec75b456b9..42193d0c537d9d8824db10238aa5223a201cc0a8 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -1,11 +1,24 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
+import DateInput from 'components/dateinput'
+import { Fnr, Form, Input, Select } from 'components/form'
import Page from 'components/page'
export default function Register() {
+ const { t } = useTranslation(['common', 'footer'])
+
return (
- <Page header="Register a new guest">
- <p>Todo</p>
+ <Page header="Register as a guest">
+ <Form onSubmit={() => {}}>
+ <Input name="firstName" />
+ <Input name="lastName" />
+ <DateInput />
+ <Select name="gender" options={['female', 'male', 'other']} />
+ <Fnr name={t('common:fnr')} />
+ <button type="submit">Submit</button>
+ </Form>
+ <br />
</Page>
)
}