frontend/package-lock.json

@@ -22,6 +22,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-helmet": "^6.1.0",
+        "react-hook-form": "^7.15.3",
         "react-i18next": "^11.11.4",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
@@ -16394,6 +16395,18 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.15.3.tgz",
+      "integrity": "sha512-z30aZoEHkWE8oZvad4OcYSBI0kQua/T5sFGH9tB2HfeykFnP/pGXNap8lDio4/U1yPj2ffpbvRIvqKd/6jjBVA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "11.11.4",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.4.tgz",
@@ -34277,6 +34290,12 @@
         "react-side-effect": "^2.1.0"
       }
     },
+    "react-hook-form": {
+      "version": "7.15.3",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.15.3.tgz",
+      "integrity": "sha512-z30aZoEHkWE8oZvad4OcYSBI0kQua/T5sFGH9tB2HfeykFnP/pGXNap8lDio4/U1yPj2ffpbvRIvqKd/6jjBVA==",
+      "requires": {}
+    },
     "react-i18next": {
       "version": "11.11.4",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.4.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.15.3",
     "react-i18next": "^11.11.4",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

frontend/src/components/link/index.tsx

-import styled, {css, DefaultTheme} from 'styled-components/macro'
-
+import React from 'react'
+import styled, { css } from 'styled-components/macro'
 
 interface IStyledLink {
-    theme: DefaultTheme
-    external?: boolean
-    underline?: boolean
-    marginRight?: boolean
-    inheritColor?: boolean
-    noUnderline?: boolean
+  external?: boolean
+  underline?: boolean
+  marginRight?: boolean
+  inheritColor?: boolean
+  noUnderline?: boolean
 }
 
 
@@ -38,19 +37,22 @@ const ExternalIcon = styled.span`
   margin-left: 1.2rem;
   position: relative;
   top: 1px;
-  zIndex: -1;
+  z-index: -1;
 `
 
 const baseInputStyles = css<IStyledLink>`
   display: inline-flex;
   align-items: center;
 
-  color: ${props => props.external ? props.theme.linkExternalColor : props.theme.linkInternalColor};
+  color: ${(props) =>
+          props.external
+                  ? props.theme.linkExternalColor
+                  : props.theme.linkInternalColor};
 
-  ${props => props.marginRight ? "margin-right: 3rem;" : ""}
-  ${props => props.inheritColor ? "color: inherit;" : ""}
-  ${props => props.underline ? "text-decoration: underline;" : ""}
-  ${props => props.noUnderline ? ":hover { text-decoration: none };" : ""}
+  ${(props) => (props.marginRight ? 'margin-right: 3rem;' : '')}
+  ${(props) => (props.inheritColor ? 'color: inherit;' : '')}
+  ${(props) => (props.underline ? 'text-decoration: underline;' : '')}
+  ${(props) => (props.noUnderline ? ':hover { text-decoration: none };' : '')}
 `
 
 const StyledLink = styled.a<IStyledLink>`
@@ -62,47 +64,67 @@ const StyledLink = styled.a<IStyledLink>`
 // `
 
 function Link(props: ILink) {
-    const {children, external, to, noExternalIcon, mail} = props
-
-    if (mail) {
-        return (
-            <StyledLink href={`mailto:${to}`} {...props}>
-                {children}
-            </StyledLink>
-        );
-    }
-
-    if (external) {
-        const urlRegex = /^((http|https):\/\/)/;
-        const href = urlRegex.test(to) ? to : `//${to}`;
-
-        return (
-            <StyledLink
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                {...props}
-            >
-                {children}
-                {!noExternalIcon && (
-                    <ExternalIcon>{externalLinkIcon}</ExternalIcon>
-                )}
-            </StyledLink>
-        );
-    }
-
-    // TODO Use StyledRouterLink for internal links when routes are set up
-    // return (
-    //     <StyledRouterLink {...props}>
-    //         {children}
-    //     </StyledRouterLink>
-    // )
+  const { children, external, to, noExternalIcon, mail, underline, marginRight, inheritColor, noUnderline } = props
 
+  if (mail) {
     return (
-        <StyledLink {...props}>
-            {children}
-        </StyledLink>
+      <StyledLink href={`mailto:${to}`}
+                  external={external}
+                  underline={underline}
+                  marginRight={marginRight}
+                  inheritColor={inheritColor}
+                  noUnderline={noUnderline}>
+        {children}
+      </StyledLink>
     )
+  }
+
+  if (external) {
+    const urlRegex = /^((http|https):\/\/)/
+    const href = urlRegex.test(to) ? to : `//${to}`
+
+    return (
+      <StyledLink
+        href={href}
+        target='_blank'
+        rel='noopener noreferrer'
+        external={external}
+        underline={underline}
+        marginRight={marginRight}
+        inheritColor={inheritColor}
+        noUnderline={noUnderline}
+      >
+        {children}
+        {!noExternalIcon && <ExternalIcon>{externalLinkIcon}</ExternalIcon>}
+      </StyledLink>
+    )
+  }
+
+  // TODO Use StyledRouterLink for internal links when routes are set up
+  // return (
+  //     <StyledRouterLink {...props}>
+  //         {children}
+  //     </StyledRouterLink>
+  // )
+
+  return <StyledLink
+    external={external}
+    underline={underline}
+    marginRight={marginRight}
+    inheritColor={inheritColor}
+    noUnderline={noUnderline}>
+    {children}</StyledLink>
+}
+
+Link.defaultProps = {
+  external: false,
+  children: undefined,
+  marginRight: false,
+  noExternalIcon: false,
+  mail: false,
+  inheritColor: false,
+  underline: false,
+  noUnderline: false,
 }
 
-export default Link
\ No newline at end of file
+export default Link

frontend/src/components/page/index.tsx

 import Page from 'components/page/page'
 
-export { Page }
+export default Page

frontend/src/index.tsx

@@ -8,8 +8,8 @@ import 'i18n'
 import getTheme from 'themes'
 import GlobalStyle from 'globalStyles'
 import App from 'routes'
-import reportWebVitals from './reportWebVitals'
 import Loading from 'components/loading'
+import reportWebVitals from './reportWebVitals'
 
 function appRoot() {
   return (

frontend/src/routes/components/notFound.tsx

 import React from 'react'
-import { Page } from 'components/page'
+import Page from 'components/page'
 
 export default function NotFound() {
   return (

frontend/src/routes/frontpage/index.tsx

 import React, { useState } from 'react'
 
-import { Page } from 'components/page'
+import Page from 'components/page'
 import { appTimezone, appVersion, appTheme } from 'appConfig'
 
 export default function FrontPage() {

frontend/src/routes/index.tsx

@@ -10,6 +10,7 @@ import FrontPage from 'routes/frontpage'
 import Footer from 'routes/components/footer'
 import Header from 'routes/components/header'
 import NotFound from 'routes/components/notFound'
+import Link from '../components/link'
 
 const AppWrapper = styled.div`
   display: flex;

frontend/src/routes/register/index.tsx

 import React from 'react'
 
-import { Page } from 'components/page'
+import Page from 'components/page'
 
 export default function Register() {
   return (

frontend/src/routes/sponsor/frontpage/index.tsx

 import React from 'react'
 
-import { Page } from 'components/page'
+import Page from 'components/page'
 
 function FrontPage() {
   return (

frontend/src/routes/sponsor/guestInfo/index.tsx

 import React from 'react'
 import { useParams } from 'react-router-dom'
 
-import {Page} from 'components/page'
+import Page from 'components/page'
 
 type GuestInfoParams = {
   id: string

frontend/src/setupProxy.js

 const { createProxyMiddleware } = require('http-proxy-middleware')
 
-module.exports = function (app) {
+module.exports = (app) => {
   app.use(
     '/api',
     createProxyMiddleware({

frontend/src/test-utils.tsx

@@ -5,9 +5,7 @@ import { ThemeProvider } from 'styled-components/macro'
 import mainTheme from 'themes/main'
 
 // Providers used in test rendering
-const AllTheProviders = ({ children }: any) => {
-  return <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
-}
+const AllTheProviders = ({ children }: any) => <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
 
 // Custom testing-library/react renderer using our providers.
 const customRender = (ui: React.ReactElement, options?: any) =>