From f4c8dbc234f23321c6c1c2bfd6d5771792920b56 Mon Sep 17 00:00:00 2001
From: Pooria Mehregan <pooriamehregan@gmail.com>
Date: Fri, 19 Apr 2024 14:17:51 +0200
Subject: [PATCH] feat: add form validation

---
 .eslintrc.json                                |   7 +-
 .vscode/settings.json                         |   3 +-
 apps/contact-form/app/[lang]/contact-form.tsx | 103 ++++++++++++++
 apps/contact-form/app/[lang]/page.module.css  |  18 +--
 apps/contact-form/app/[lang]/page.tsx         | 130 +++---------------
 apps/contact-form/app/[lang]/schema.ts        |  20 +++
 apps/contact-form/app/actions.ts              |  28 ++++
 apps/contact-form/app/api/hello/route.ts      |   4 -
 apps/contact-form/tsconfig.json               |   4 +
 .../dictionaries/src/lib/dictionaries/en.json |  38 ++---
 .../dictionaries/src/lib/dictionaries/nb.json |  38 ++---
 .../dictionaries/src/lib/dictionaries/nn.json |  38 ++---
 .../dictionaries/src/lib/i18n-config/index.ts |   4 +-
 libs/types/src/index.ts                       |   1 +
 libs/types/src/lib/forms/index.ts             |   6 +
 libs/ui/src/index.ts                          |   1 +
 .../button-submit/button-submit.module.css    |   3 +
 libs/ui/src/lib/button-submit/index.tsx       |  26 ++++
 .../ui/src/lib/container/container.module.css |   7 +-
 libs/ui/src/lib/container/index.tsx           |  18 +--
 .../header/components/language-menu/index.tsx |   4 +-
 libs/ui/src/lib/header/header.module.css      |  13 +-
 libs/ui/src/lib/header/index.tsx              |   2 +-
 .../label-with-tag/text-area-label.module.css |   2 +-
 .../{root-layout => layout-root}/global.css   |   1 +
 .../{root-layout => layout-root}/index.tsx    |   4 +-
 libs/ui/src/server.ts                         |   2 +-
 libs/utils/src/index.ts                       |   2 +
 libs/utils/src/lib/form-utils/form-state.ts   |  43 ++++++
 libs/utils/src/lib/form-utils/index.ts        |   2 +
 libs/utils/src/lib/form-utils/types.ts        |  21 +++
 .../lib/functions/value-extractors/index.ts   |  43 ++++++
 libs/utils/tsconfig.json                      |   5 +-
 package.json                                  |   4 +-
 tsconfig.base.json                            |   3 +-
 yarn.lock                                     |  16 +++
 36 files changed, 444 insertions(+), 220 deletions(-)
 create mode 100644 apps/contact-form/app/[lang]/contact-form.tsx
 create mode 100644 apps/contact-form/app/[lang]/schema.ts
 create mode 100644 apps/contact-form/app/actions.ts
 delete mode 100644 apps/contact-form/app/api/hello/route.ts
 create mode 100644 libs/types/src/lib/forms/index.ts
 create mode 100644 libs/ui/src/lib/button-submit/button-submit.module.css
 create mode 100644 libs/ui/src/lib/button-submit/index.tsx
 rename libs/ui/src/lib/{root-layout => layout-root}/global.css (91%)
 rename libs/ui/src/lib/{root-layout => layout-root}/index.tsx (97%)
 create mode 100644 libs/utils/src/lib/form-utils/form-state.ts
 create mode 100644 libs/utils/src/lib/form-utils/index.ts
 create mode 100644 libs/utils/src/lib/form-utils/types.ts
 create mode 100644 libs/utils/src/lib/functions/value-extractors/index.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index 78bba631..36c579f3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -61,8 +61,11 @@
         "no-implicit-coercion": "warn",
         "no-magic-numbers": ["warn", {"ignoreArrayIndexes": true }],
         "no-param-reassign": "error",
-        "no-shadow": "error",
-        "prefer-const": "error"
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error",
+        "prefer-const": "error",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "error"
       }
     },
     {
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0bf34a9e..2ee98c3d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,5 +6,6 @@
   "editor.formatOnSaveMode": "file",
   "editor.inlineSuggest.suppressSuggestions": false,
   "files.insertFinalNewline": true,
-  "files.trimTrailingWhitespace": true
+  "files.trimTrailingWhitespace": true,
+  "css.lint.validProperties": ["composes"]
 }
diff --git a/apps/contact-form/app/[lang]/contact-form.tsx b/apps/contact-form/app/[lang]/contact-form.tsx
new file mode 100644
index 00000000..cf4ca2e4
--- /dev/null
+++ b/apps/contact-form/app/[lang]/contact-form.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { Paragraph, Textarea, Textfield } from '@digdir/designsystemet-react';
+import { LabelWithTag, SubmitButton } from '@fdk-frontend/ui';
+import { type Dictionary } from '@fdk-frontend/dictionaries';
+import { useFormState } from 'react-dom';
+import styles from './page.module.css';
+import { sendEmailAction } from '../actions';
+import { EMPTY_FORM_STATE, extractErrorMessages } from '@fdk-frontend/utils';
+
+type Props = {
+  dictionary: Dictionary;
+};
+
+const ContactForm = ({ dictionary }: Props) => {
+  const [state, formAction] = useFormState(sendEmailAction, EMPTY_FORM_STATE);
+  const textAreaCols = 100;
+  const textAreaRows = 5;
+
+  return (
+    <form action={formAction}>
+      <Textarea
+        name='dataset'
+        className={styles.textArea}
+        required
+        cols={textAreaCols}
+        rows={textAreaRows}
+        label={
+          <LabelWithTag
+            labelText={dictionary.contactForm.dataset.label}
+            tagText={dictionary.shouldBeFilledOut}
+          />
+        }
+        description={<Paragraph>{dictionary.contactForm.dataset.description}</Paragraph>}
+        error={extractErrorMessages('dataset', state, dictionary)}
+      />
+      <Textarea
+        name='location'
+        className={styles.textArea}
+        cols={textAreaCols}
+        rows={textAreaRows}
+        label={<LabelWithTag labelText={dictionary.contactForm.location.label} />}
+        description={<Paragraph>{dictionary.contactForm.location.description}</Paragraph>}
+      />
+      <Textarea
+        name='efforts'
+        className={styles.textArea}
+        cols={textAreaCols}
+        rows={textAreaRows}
+        label={<LabelWithTag labelText={dictionary.contactForm.efforts.label} />}
+        description={<Paragraph>{dictionary.contactForm.efforts.description}</Paragraph>}
+      />
+      <Textfield
+        name='name'
+        required
+        className={styles.textField}
+        error={extractErrorMessages('name', state, dictionary)}
+        label={
+          <LabelWithTag
+            labelText={dictionary.name}
+            tagText={dictionary.shouldBeFilledOut}
+          />
+        }
+      />
+      <Textfield
+        name='email'
+        required
+        className={styles.textField}
+        error={extractErrorMessages('email', state, dictionary)}
+        type='email'
+        label={
+          <LabelWithTag
+            labelText={dictionary.email}
+            tagText={dictionary.shouldBeFilledOut}
+          />
+        }
+      />
+      <Textfield
+        name='organizationNumber'
+        required
+        className={styles.textFieldHalfWith}
+        error={extractErrorMessages('organizationNumber', state, dictionary)}
+        label={
+          <LabelWithTag
+            labelText={dictionary.organizationNumber}
+            tagText={dictionary.shouldBeFilledOut}
+          />
+        }
+      />
+      <Textfield
+        name='phoneNumber'
+        className={styles.textFieldHalfWith}
+        label={dictionary.phoneNumber}
+      />
+      <SubmitButton
+        buttonText={dictionary.submitRequest}
+        extendedClassName={styles.button}
+      />
+    </form>
+  );
+};
+
+export default ContactForm;
diff --git a/apps/contact-form/app/[lang]/page.module.css b/apps/contact-form/app/[lang]/page.module.css
index 106e5971..a1d93800 100644
--- a/apps/contact-form/app/[lang]/page.module.css
+++ b/apps/contact-form/app/[lang]/page.module.css
@@ -3,24 +3,18 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 843px;
-  margin-top: 5rem;
+  max-width: 843px;
+  margin: 5rem auto;
 }
 
-.contentContainer :nth-child(7) {
-  margin-bottom: 2rem;
+.contentContainer .paragraph {
+  margin-bottom: 3rem;
 }
 
 .paragraph {
   text-align: center;
 }
 
-.alert {
-  margin: 5rem 0 1rem 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-
 .textArea {
   margin-top: 2rem;
 }
@@ -40,7 +34,3 @@
   margin-top: 3rem;
   align-self: flex-start;
 }
-
-.button > p {
-  color: #fff;
-}
diff --git a/apps/contact-form/app/[lang]/page.tsx b/apps/contact-form/app/[lang]/page.tsx
index c61c12c3..aa21a723 100644
--- a/apps/contact-form/app/[lang]/page.tsx
+++ b/apps/contact-form/app/[lang]/page.tsx
@@ -1,126 +1,36 @@
 import 'server-only';
 
 import { getDictionary, type Locale } from '@fdk-frontend/dictionaries';
-import styles from './page.module.css';
-import { Alert, Button, Heading, Paragraph, Textarea, Textfield } from '@digdir/designsystemet-react';
 import { Container } from '@fdk-frontend/ui/server';
-import { LabelWithTag } from '@fdk-frontend/ui';
+import ContactForm from './contact-form';
+import { Heading, Paragraph } from '@digdir/designsystemet-react';
+import styles from './page.module.css';
+import React from 'react';
 
-interface Props {
+type Props = {
   params: {
     lang: Locale['code'];
   };
-}
+};
 
 const Index = async ({ params: { lang } }: Props) => {
   const dictionary = await getDictionary(lang);
 
   return (
-    <Container flexDirection={'column'}>
-      <div className={styles.contentContainer}>
-        <Heading
-          size='xlarge'
-          spacing
-        >
-          {dictionary.contactForm.title}
-        </Heading>
-        <Paragraph
-          size='large'
-          className={styles.paragraph}
-        >
-          {dictionary.contactForm.description}
-        </Paragraph>
-        <Alert
-          severity='info'
-          className={styles.alert}
-        >
-          <Heading
-            size='xsmall'
-            spacing
-          >
-            {dictionary.fillTheFormUnder}
-          </Heading>
-          <Paragraph>{dictionary.contactForm.alertDescription}</Paragraph>
-        </Alert>
-        <Textarea
-          className={styles.textArea}
-          cols={100}
-          rows={5}
-          label={
-            <LabelWithTag
-              labelText={dictionary.contactForm.textArea[0].label}
-              tagText={dictionary.shouldBeFilledOut}
-            />
-          }
-          description={<Paragraph>{dictionary.contactForm.textArea[0].description}</Paragraph>}
-          error=''
-        />
-        <Textarea
-          className={styles.textArea}
-          cols={100}
-          rows={5}
-          label={<LabelWithTag labelText={dictionary.contactForm.textArea[1].label} />}
-          description={<Paragraph>{dictionary.contactForm.textArea[1].description}</Paragraph>}
-          error=''
-        />
-        <Textarea
-          className={styles.textArea}
-          cols={100}
-          rows={5}
-          label={<LabelWithTag labelText={dictionary.contactForm.textArea[2].label} />}
-          description={<Paragraph>{dictionary.contactForm.textArea[2].description}</Paragraph>}
-          error=''
-        />
-        <Textarea
-          className={styles.textArea}
-          cols={100}
-          rows={5}
-          label={<LabelWithTag labelText={dictionary.contactForm.textArea[3].label} />}
-          description={<Paragraph>{dictionary.contactForm.textArea[3].description}</Paragraph>}
-          error=''
-        />
-        <Textfield
-          className={styles.textField}
-          error=''
-          label={
-            <LabelWithTag
-              labelText={dictionary.name}
-              tagText={dictionary.shouldBeFilledOut}
-            />
-          }
-        />
-        <Textfield
-          className={styles.textField}
-          description=''
-          error=''
-          label={
-            <LabelWithTag
-              labelText={dictionary.email}
-              tagText={dictionary.shouldBeFilledOut}
-            />
-          }
-        />
-        <Textfield
-          className={styles.textFieldHalfWith}
-          description=''
-          error=''
-          label={
-            <LabelWithTag
-              labelText={dictionary.organizationNumber}
-              tagText={dictionary.shouldBeFilledOut}
-            />
-          }
-        />
-        <Textfield
-          className={styles.textFieldHalfWith}
-          description=''
-          error=''
-          label={dictionary.phoneNumber}
-        />
-        <Button className={styles.button}>
-          <Paragraph>{dictionary.submitRequest}</Paragraph>
-        </Button>
-      </div>
+    <Container extendedClassName={styles.contentContainer}>
+      <Heading
+        size='xlarge'
+        spacing
+      >
+        {dictionary.contactForm.title}
+      </Heading>
+      <Paragraph
+        size='large'
+        className={styles.paragraph}
+      >
+        {dictionary.contactForm.description}
+      </Paragraph>
+      <ContactForm dictionary={dictionary} />
     </Container>
   );
 };
diff --git a/apps/contact-form/app/[lang]/schema.ts b/apps/contact-form/app/[lang]/schema.ts
new file mode 100644
index 00000000..3b54ce40
--- /dev/null
+++ b/apps/contact-form/app/[lang]/schema.ts
@@ -0,0 +1,20 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-magic-numbers */
+import { z } from 'zod';
+
+/**
+ * The validation schema for the contact form.
+ * Form more information on the schema library, see https://zod.dev/?id=table-of-contents
+ */
+export const schema = z.object({
+  dataset: z.string({ required_error: 'required' }).min(3, { message: 'minimumLength,3'}),
+  location: z.string().optional(),
+  efforts: z.string().optional(),
+  email: z.string({ required_error: 'required' }).email({ message: 'invalidEmail' }),
+  phoneNumber: z.string().optional(),
+  name: z.string({ required_error: 'required' }),
+  organizationNumber: z.string({ required_error: 'required' }).length(9, { message: 'invalidOrganizationNumber' }),
+});
+
+export type SchemaType = z.infer<typeof schema>;
+
diff --git a/apps/contact-form/app/actions.ts b/apps/contact-form/app/actions.ts
new file mode 100644
index 00000000..1f083576
--- /dev/null
+++ b/apps/contact-form/app/actions.ts
@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { extractFormEntries, FormState, FormStatusEnum, getFormState } from '@fdk-frontend/utils';
+import { schema } from './[lang]/schema';
+
+export const sendEmailAction = async (prevState: FormState, formData: FormData) => {
+  const parse = schema.safeParse(extractFormEntries(formData));
+
+  if (!parse.success) {
+    return getFormState(FormStatusEnum.ERROR, parse.error.formErrors.fieldErrors);
+  }
+
+  try {
+    // TODO: Send email with form data
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // const data = parse.data;
+
+    revalidatePath('/');
+    return getFormState(FormStatusEnum.SUCCESS, 'Mail was sent successfully');
+  } catch (e) {
+    // TODO: Log error to some error tracking service, not logging out to console because of security reasons
+    // eslint-disable-next-line no-console
+    console.error('Sending email for Contact Form failed');
+    return getFormState(FormStatusEnum.ERROR, 'Sending email failed');
+  }
+};
diff --git a/apps/contact-form/app/api/hello/route.ts b/apps/contact-form/app/api/hello/route.ts
deleted file mode 100644
index bb27a8f5..00000000
--- a/apps/contact-form/app/api/hello/route.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-export const GET = async (request: Request) => {
-  return new Response('Hello, from API!');
-};
diff --git a/apps/contact-form/tsconfig.json b/apps/contact-form/tsconfig.json
index 7a54ad7d..c2e35b74 100644
--- a/apps/contact-form/tsconfig.json
+++ b/apps/contact-form/tsconfig.json
@@ -10,6 +10,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "incremental": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+    ],
     "plugins": [
       {
         "name": "next"
diff --git a/libs/dictionaries/src/lib/dictionaries/en.json b/libs/dictionaries/src/lib/dictionaries/en.json
index afdbcffd..b0a6e2a7 100644
--- a/libs/dictionaries/src/lib/dictionaries/en.json
+++ b/libs/dictionaries/src/lib/dictionaries/en.json
@@ -21,24 +21,24 @@
   "contactForm": {
     "title": "We help you find datasets",
     "description": "The service is free and is now being launched as a test version. In the event of a large influx, we cannot currently help and solve all inquiries, but must select requests that are useful in terms of testing and further development of the service.",
-    "alertDescription": "Then we put one of our data finders on your case.",
-    "textArea": [
-      {
-        "label": "Which dataset do you need?",
-        "description": "Create as clear a description as possible, e.g. fields, time period, desired update frequency."
-      },
-      {
-        "label": "Do you know where the dataset is located?",
-        "description": "If you have information about where you think we can find the data set, e.g. at which public agency or municipality, this can be of great help to the data hunter."
-      },
-      {
-        "label": "Have you tried to get hold of this data set yourself?",
-        "description": "If you have attempted to obtain the data set yourself, state where you searched and possibly who you have spoken to. Feel free to include why you are not successful if you have been in direct contact with someone in the public sector."
-      },
-      {
-        "label": "What will the dataset be used for?",
-        "description": "In the event of heavy traffic, we may be forced to prioritize business-critical data first. There may also be legal restrictions relating to use which may affect which data can be made available."
-      }
-    ]
+    "dataset": {
+      "label": "Which dataset do you need?",
+      "description": "Create as clear a description as possible, e.g. fields, time period, desired update frequency."
+    },
+    "location": {
+      "label": "Do you know where the dataset is located?",
+      "description": "If you have information about where you think we can find the data set, e.g. at which public agency or municipality, this can be of great help to the data hunter."
+    },
+    "efforts": {
+      "label": "Have you tried to get hold of this data set yourself?",
+      "description": "If you have attempted to obtain the data set yourself, state where you searched and possibly who you have spoken to. Feel free to include why you are not successful if you have been in direct contact with someone in the public sector."
+    }
+  },
+  "error": {
+    "default": "An error occurred",
+    "minimumLength": "Minimum length is",
+    "required": "This field is required",
+    "invalidEmail": "Invalid email address",
+    "invalidOrganizationNumber": "Invalid organization number"
   }
 }
diff --git a/libs/dictionaries/src/lib/dictionaries/nb.json b/libs/dictionaries/src/lib/dictionaries/nb.json
index d3f6c9f8..9a4decc2 100644
--- a/libs/dictionaries/src/lib/dictionaries/nb.json
+++ b/libs/dictionaries/src/lib/dictionaries/nb.json
@@ -21,24 +21,24 @@
   "contactForm": {
     "title": "Vi hjelper deg med å finne datasett",
     "description": "Tjenesten er gratis og lanseres nå som testversjon. Ved stor pågang kan vi foreløpig ikke hjelpe og løse alle henvendelser, men må velge forespørsler som er nyttige med tanke på testing og videreutvikling av tjenesten.",
-    "alertDescription": "Så setter vi en av våre datajegere på saken din.",
-    "textArea": [
-      {
-        "label": "Hvilket datasett trenger du?",
-        "description": "Lag en så tydelig beskrivelse som mulig, f.eks. felter, tidsperiode, ønsket oppdateringsfrekvens."
-      },
-      {
-        "label": "Vet du hvor datasettet befinner seg?",
-        "description": "Hvis du har informasjon om hvor du tror vi kan finne datasettet, f.eks. hos hvilken offentlig etat eller kommune, kan dette være til stor hjelp for datajegeren."
-      },
-      {
-        "label": "Har du forsøkt å få tak i dette datasettet selv?",
-        "description": "Hvis du har gjort forsøk på å få tak i datasettet selv, oppgi hvor du søkt og evt. hvem du har snakket med. Ta gjerne med hvorfor du ikke lykkes hvis du har vært i direkte kontakt med noen i offentlig sektor."
-      },
-      {
-        "label": "Hva skal datasettet brukes til?",
-        "description": "Ved stor pågang kan vi bli tvunget til å prioritere forretningskritiske data først. Det kan også være juridiske begrensninger knyttet til bruk som kan påvirke hvilke data som kan tilgjengeliggjøres."
-      }
-    ]
+    "dataset": {
+      "label": "Hvilket datasett trenger du?",
+      "description": "Lag en så tydelig beskrivelse som mulig, f.eks. felter, tidsperiode, ønsket oppdateringsfrekvens."
+    },
+    "location": {
+      "label": "Vet du hvor datasettet befinner seg?",
+      "description": "Hvis du har informasjon om hvor du tror vi kan finne datasettet, f.eks. hos hvilken offentlig etat eller kommune, kan dette være til stor hjelp for datajegeren."
+    },
+    "efforts": {
+      "label": "Har du forsøkt å få tak i dette datasettet selv?",
+      "description": "Hvis du har gjort forsøk på å få tak i datasettet selv, oppgi hvor du søkt og evt. hvem du har snakket med. Ta gjerne med hvorfor du ikke lykkes hvis du har vært i direkte kontakt med noen i offentlig sektor."
+    }
+  },
+  "error": {
+    "default": "Noe gikk galt",
+    "minimumLength": "Må være minst {length} tegn",
+    "required": "Dette feltet er påkrevd",
+    "invalidEmail": "Ugyldig e-postadresse",
+    "invalidOrganizationNumber": "Ugyldig organisasjonsnummer"
   }
 }
diff --git a/libs/dictionaries/src/lib/dictionaries/nn.json b/libs/dictionaries/src/lib/dictionaries/nn.json
index d97e6ae6..d42a344b 100644
--- a/libs/dictionaries/src/lib/dictionaries/nn.json
+++ b/libs/dictionaries/src/lib/dictionaries/nn.json
@@ -21,24 +21,24 @@
   "contactForm": {
     "title": "Vi hjelper deg med å finne datasett",
     "description": "Tjenesten er gratis og lanseres nå som testversjon. Ved stor pågang kan vi foreløpig ikke hjelpe og løse alle henvendelser, men må velge forespørsler som er nyttige med tanke på testing og videreutvikling av tjenesten.",
-    "alertDescription": "Så setter vi en av våre datajegere på saken din.",
-    "textArea": [
-      {
-        "label": "Hvilket datasett trenger du?",
-        "description": "Lag en så tydelig beskrivelse som mulig, f.eks. felter, tidsperiode, ønsket oppdateringsfrekvens."
-      },
-      {
-        "label": "Vet du hvor datasettet befinner seg?",
-        "description": "Hvis du har informasjon om hvor du tror vi kan finne datasettet, f.eks. hos hvilken offentlig etat eller kommune, kan dette være til stor hjelp for datajegeren."
-      },
-      {
-        "label": "Har du forsøkt å få tak i dette datasettet selv?",
-        "description": "Hvis du har gjort forsøk på å få tak i datasettet selv, oppgi hvor du søkt og evt. hvem du har snakket med. Ta gjerne med hvorfor du ikke lykkes hvis du har vært i direkte kontakt med noen i offentlig sektor."
-      },
-      {
-        "label": "Hva skal datasettet brukes til?",
-        "description": "Ved stor pågang kan vi bli tvunget til å prioritere forretningskritiske data først. Det kan også være juridiske begrensninger knyttet til bruk som kan påvirke hvilke data som kan tilgjengeliggjøres."
-      }
-    ]
+    "dataset": {
+      "label": "Hvilket datasett trenger du?",
+      "description": "Lag en så tydelig beskrivelse som mulig, f.eks. felter, tidsperiode, ønsket oppdateringsfrekvens."
+    },
+    "location": {
+      "label": "Vet du hvor datasettet befinner seg?",
+      "description": "Hvis du har informasjon om hvor du tror vi kan finne datasettet, f.eks. hos hvilken offentlig etat eller kommune, kan dette være til stor hjelp for datajegeren."
+    },
+    "efforts": {
+      "label": "Har du forsøkt å få tak i dette datasettet selv?",
+      "description": "Hvis du har gjort forsøk på å få tak i datasettet selv, oppgi hvor du søkt og evt. hvem du har snakket med. Ta gjerne med hvorfor du ikke lykkes hvis du har vært i direkte kontakt med noen i offentlig sektor."
+    }
+  },
+  "error": {
+    "default": "Noe gikk galt",
+    "minimumLength": "Må være minst {length} tegn",
+    "required": "Dette feltet er påkrevd",
+    "invalidEmail": "Ugyldig e-postadresse",
+    "invalidOrganizationNumber": "Ugyldig organisasjonsnummer"
   }
 }
diff --git a/libs/dictionaries/src/lib/i18n-config/index.ts b/libs/dictionaries/src/lib/i18n-config/index.ts
index 0cd09ce4..08090a48 100644
--- a/libs/dictionaries/src/lib/i18n-config/index.ts
+++ b/libs/dictionaries/src/lib/i18n-config/index.ts
@@ -26,7 +26,9 @@ const dictionaries = {
   no: () => import('../dictionaries/nb.json').then((module) => module.default),
 };
 
-export const getDictionary = async (locale: Locale['code']) => dictionaries[locale]?.() ?? dictionaries.nb();
+export type Dictionary = typeof getDictionary extends (...args: any) => Promise<infer T> ? T : never;
+
+export const getDictionary = async (locale: Locale['code']) => dictionaries[locale]?.() ?? dictionaries[i18n.defaultLocale]();
 
 export const getLocale = (request: NextRequest): Locale | undefined => {
   // Negotiator expects plain object so we need to transform headers
diff --git a/libs/types/src/index.ts b/libs/types/src/index.ts
index 90f9dd9d..02b51575 100644
--- a/libs/types/src/index.ts
+++ b/libs/types/src/index.ts
@@ -1 +1,2 @@
 // Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
+export * from './lib/forms';
diff --git a/libs/types/src/lib/forms/index.ts b/libs/types/src/lib/forms/index.ts
new file mode 100644
index 00000000..8a385a23
--- /dev/null
+++ b/libs/types/src/lib/forms/index.ts
@@ -0,0 +1,6 @@
+import { Schema } from "zod";
+
+export type FormState = {
+  formState?: Schema<unknown>;
+  fieldErrors?: { [key: string]: string[] | undefined };
+};
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index eb361f50..22ddb569 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1,2 +1,3 @@
 // Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
 export * from './lib/label-with-tag';
+export * from './lib/button-submit';
diff --git a/libs/ui/src/lib/button-submit/button-submit.module.css b/libs/ui/src/lib/button-submit/button-submit.module.css
new file mode 100644
index 00000000..4b2d3ab3
--- /dev/null
+++ b/libs/ui/src/lib/button-submit/button-submit.module.css
@@ -0,0 +1,3 @@
+.button > p {
+  color: #fff;
+}
diff --git a/libs/ui/src/lib/button-submit/index.tsx b/libs/ui/src/lib/button-submit/index.tsx
new file mode 100644
index 00000000..802b6e87
--- /dev/null
+++ b/libs/ui/src/lib/button-submit/index.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { type ButtonProps, Button, Paragraph } from '@digdir/designsystemet-react';
+import { useFormStatus } from 'react-dom';
+import cn from 'classnames';
+import styles from './button-submit.module.css';
+
+type Props = {
+  buttonText: string;
+  extendedClassName?: string;
+} & ButtonProps;
+
+const SubmitButton = ({ buttonText, extendedClassName }: Props) => {
+  const { pending } = useFormStatus();
+  return (
+    <Button
+      className={cn(styles.button, extendedClassName)}
+      type='submit'
+      aria-disabled={pending}
+    >
+      <Paragraph>{buttonText}</Paragraph>
+    </Button>
+  );
+};
+
+export { SubmitButton };
diff --git a/libs/ui/src/lib/container/container.module.css b/libs/ui/src/lib/container/container.module.css
index a02c9d1c..f6be747a 100644
--- a/libs/ui/src/lib/container/container.module.css
+++ b/libs/ui/src/lib/container/container.module.css
@@ -2,13 +2,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 1rem 1rem;
+  margin: 1rem auto;
   width: 100%;
   min-width: var(--breakpoint-large);
   max-width: var(--breakpoint-xxx-large);
 }
-
-.containerColumn {
-  composes: containerRow;
-  flex-direction: column;
-}
diff --git a/libs/ui/src/lib/container/index.tsx b/libs/ui/src/lib/container/index.tsx
index c2dc39e6..8cc85597 100644
--- a/libs/ui/src/lib/container/index.tsx
+++ b/libs/ui/src/lib/container/index.tsx
@@ -1,20 +1,16 @@
 import 'server-only';
+import cn from 'classnames';
 
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styles from './container.module.css';
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type Props = {
   children: ReactNode;
-  flexDirection?: 'row' | 'column';
-}
+  extendedClassName?: string;
+};
 
-const Container = ({ children, flexDirection = 'row', ...rest }: Props) => (
-  <div
-    className={flexDirection === 'row' ? styles.containerRow : styles.containerColumn}
-    {...rest}
-  >
-    {children}
-  </div>
+const Container = ({ children, extendedClassName }: Props) => (
+  <div className={cn(styles.container, extendedClassName)}>{children}</div>
 );
 
 export { Container };
diff --git a/libs/ui/src/lib/header/components/language-menu/index.tsx b/libs/ui/src/lib/header/components/language-menu/index.tsx
index 746218f8..4e271e85 100644
--- a/libs/ui/src/lib/header/components/language-menu/index.tsx
+++ b/libs/ui/src/lib/header/components/language-menu/index.tsx
@@ -6,9 +6,9 @@ import { i18n, Locale } from '@fdk-frontend/dictionaries';
 import styles from './language-menu.module.css';
 import { usePathname, useRouter } from 'next/navigation';
 
-interface Props {
+type Props = {
   triggerText: string;
-}
+};
 
 const LanguageMenu = ({ triggerText }: Props) => {
   const pathName = usePathname();
diff --git a/libs/ui/src/lib/header/header.module.css b/libs/ui/src/lib/header/header.module.css
index da2c8575..ce8ff905 100644
--- a/libs/ui/src/lib/header/header.module.css
+++ b/libs/ui/src/lib/header/header.module.css
@@ -3,7 +3,8 @@
   border-bottom: 1px solid rgb(230, 230, 230);
   color: #1E2B3C;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .urlList {
@@ -37,3 +38,13 @@
   height: 45px;
   margin-left: 0.75rem;
 }
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: var(--breakpoint-xxx-large);
+  margin: 0 auto;
+  padding: 1rem;
+}
diff --git a/libs/ui/src/lib/header/index.tsx b/libs/ui/src/lib/header/index.tsx
index 79bff4fd..0bb44846 100644
--- a/libs/ui/src/lib/header/index.tsx
+++ b/libs/ui/src/lib/header/index.tsx
@@ -48,7 +48,7 @@ const Header = async ({ lang }: HeaderProps) => {
 
   return (
     <header className={styles.header}>
-      <Container>
+      <Container extendedClassName={styles.header}>
         <a
           href={homeUrl}
           aria-label={dictionary.goToMainPageAriaLabel}
diff --git a/libs/ui/src/lib/label-with-tag/text-area-label.module.css b/libs/ui/src/lib/label-with-tag/text-area-label.module.css
index 2d8580b4..9a73e4c8 100644
--- a/libs/ui/src/lib/label-with-tag/text-area-label.module.css
+++ b/libs/ui/src/lib/label-with-tag/text-area-label.module.css
@@ -5,5 +5,5 @@
 }
 
 .tag {
-  margin-left: 1rem;
+  margin-left: 0.5rem;
 }
diff --git a/libs/ui/src/lib/root-layout/global.css b/libs/ui/src/lib/layout-root/global.css
similarity index 91%
rename from libs/ui/src/lib/root-layout/global.css
rename to libs/ui/src/lib/layout-root/global.css
index 20e150d1..4827a7fb 100644
--- a/libs/ui/src/lib/root-layout/global.css
+++ b/libs/ui/src/lib/layout-root/global.css
@@ -10,6 +10,7 @@
   --breakpoint-xxx-large: 1600px;
 }
 
+/* suggestions from designsystem.no */
 body {
   font-family: 'Inter', sans-serif;
   font-feature-settings: 'cv05' 1 !important; /* Enable lowercase l with tail */
diff --git a/libs/ui/src/lib/root-layout/index.tsx b/libs/ui/src/lib/layout-root/index.tsx
similarity index 97%
rename from libs/ui/src/lib/root-layout/index.tsx
rename to libs/ui/src/lib/layout-root/index.tsx
index f56a00f7..65856fbf 100644
--- a/libs/ui/src/lib/root-layout/index.tsx
+++ b/libs/ui/src/lib/layout-root/index.tsx
@@ -7,10 +7,10 @@ import '@digdir/designsystemet-css';
 import './global.css';
 import { Header } from '../header';
 
-interface Props {
+type Props = {
   children: ReactNode;
   params: { lang: Locale };
-}
+};
 
 const generateStaticParams = async () => i18n.locales.map((locale: Locale) => ({ lang: locale.code }));
 
diff --git a/libs/ui/src/server.ts b/libs/ui/src/server.ts
index 6657a2e8..6537a178 100644
--- a/libs/ui/src/server.ts
+++ b/libs/ui/src/server.ts
@@ -1,4 +1,4 @@
 // Use this file to export React server components
 export * from './lib/header';
-export * from './lib/root-layout';
+export * from './lib/layout-root';
 export * from './lib/container';
diff --git a/libs/utils/src/index.ts b/libs/utils/src/index.ts
index 5f31fb7d..51bd8f06 100644
--- a/libs/utils/src/index.ts
+++ b/libs/utils/src/index.ts
@@ -1,2 +1,4 @@
 // Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
 export * from './lib/paths';
+export * from './lib/functions/value-extractors';
+export * from './lib/form-utils';
diff --git a/libs/utils/src/lib/form-utils/form-state.ts b/libs/utils/src/lib/form-utils/form-state.ts
new file mode 100644
index 00000000..85bc7ca4
--- /dev/null
+++ b/libs/utils/src/lib/form-utils/form-state.ts
@@ -0,0 +1,43 @@
+import { FieldErrors, FormState, FormStatusEnum, FormStatusType, GetFormStateOverload } from './types';
+
+export const EMPTY_FORM_STATE: FormState = {
+  status: FormStatusEnum.UNSET,
+  message: '',
+  fieldErrors: {},
+  timestamp: 0,
+};
+
+export const getFormState: GetFormStateOverload = (
+  status: FormStatusType,
+  payload?: FormState['message'] | FieldErrors,
+): FormState => {
+  switch (status) {
+    case FormStatusEnum.ERROR:
+      if (typeof payload === 'string') {
+        return {
+          status,
+          message: payload,
+          fieldErrors: EMPTY_FORM_STATE.fieldErrors,
+          timestamp: Date.now(),
+        };
+      }
+      return {
+        status,
+        message: EMPTY_FORM_STATE.message,
+        fieldErrors: payload as FormState['fieldErrors'],
+        timestamp: Date.now(),
+      };
+    case FormStatusEnum.SUCCESS:
+      return {
+        status,
+        message: payload as FormState['message'],
+        fieldErrors: EMPTY_FORM_STATE.fieldErrors,
+        timestamp: Date.now(),
+      };
+    default:
+        return {
+          ...EMPTY_FORM_STATE,
+          timestamp: Date.now(),
+        };
+  }
+};
diff --git a/libs/utils/src/lib/form-utils/index.ts b/libs/utils/src/lib/form-utils/index.ts
new file mode 100644
index 00000000..ae2ae547
--- /dev/null
+++ b/libs/utils/src/lib/form-utils/index.ts
@@ -0,0 +1,2 @@
+export * from './form-state';
+export * from './types';
diff --git a/libs/utils/src/lib/form-utils/types.ts b/libs/utils/src/lib/form-utils/types.ts
new file mode 100644
index 00000000..ae0b5fff
--- /dev/null
+++ b/libs/utils/src/lib/form-utils/types.ts
@@ -0,0 +1,21 @@
+export enum FormStatusEnum {
+  UNSET = 'UNSET',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export type FormStatusType = (typeof FormStatusEnum)[keyof typeof FormStatusEnum];
+
+export type FieldErrors = Record<string, string[] | undefined>;
+
+export type FormState = {
+  status: FormStatusType;
+  message: string;
+  fieldErrors: FieldErrors;
+  timestamp: number;
+};
+
+export type GetFormStateOverload = {
+  (status: FormStatusEnum, message: FormState['message']): FormState;
+  (status: FormStatusEnum.ERROR, fieldErrors: FieldErrors): FormState;
+};
diff --git a/libs/utils/src/lib/functions/value-extractors/index.ts b/libs/utils/src/lib/functions/value-extractors/index.ts
new file mode 100644
index 00000000..f7e9b4bf
--- /dev/null
+++ b/libs/utils/src/lib/functions/value-extractors/index.ts
@@ -0,0 +1,43 @@
+import { Dictionary } from "@fdk-frontend/dictionaries";
+import { FormState } from "@fdk-frontend/types";
+
+/**
+ * This method extracts error messages from the form state and returns them as a string array.
+ * @param fieldName the field name to extract error messages for
+ * @param state the form state to extract error messages from
+ * @param dictionary the dictionary (language) to use for error messages
+ * @returns the error messages as a string array
+ */
+export const extractErrorMessages = (
+  fieldName: string,
+  state: FormState | undefined,
+  dictionary: Dictionary,
+): string[] | string => {
+  if (!state?.fieldErrors) {
+    return '';
+  }
+  const errors = state.fieldErrors[fieldName] || [];
+  const errorMessages = errors.map((error) => {
+    const [message, length] = error.split(',');
+    const errorMessage = dictionary.error[message as keyof typeof dictionary.error];
+    return errorMessage ? `${errorMessage}${length ? ' ' + length : ''}` : dictionary.error.default;
+  });
+  return errorMessages.length ? errorMessages : '';
+};
+
+/**
+ * Form data entries also constains other data than the form data wich is not needed. Here we filter out the data that is not needed.
+ * @param formData the form data to extract entries from
+ * @returns the form entries
+ */
+export const extractFormEntries = (formData: FormData) => ({
+  ...(Array.from(formData.entries())
+    .filter(([key]) => !key.startsWith('$'))
+    .reduce(
+      (acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    ) as Record<string, unknown>),
+});
diff --git a/libs/utils/tsconfig.json b/libs/utils/tsconfig.json
index 95cfeb24..18b8179e 100644
--- a/libs/utils/tsconfig.json
+++ b/libs/utils/tsconfig.json
@@ -6,12 +6,11 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
+  "lib": ["es2020", "dom", "dom.iterable"],
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
+    // Remove the problematic code block
   ],
   "extends": "../../tsconfig.base.json"
 }
diff --git a/package.json b/package.json
index 82379552..304863e8 100644
--- a/package.json
+++ b/package.json
@@ -44,10 +44,12 @@
     "@digdir/designsystemet-theme": "^0.15.1",
     "@formatjs/intl-localematcher": "^0.5.4",
     "@navikt/aksel-icons": "^6.5.0",
+    "classnames": "^2.5.1",
     "next": "14.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.2",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 77e264a9..870c7c77 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -11,7 +11,7 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",
-    "lib": ["es2020", "dom"],
+    "lib": ["es2020", "dom", "dom.iterable"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
@@ -19,7 +19,6 @@
       "@fdk-frontend/data-access": ["libs/data-access/src/index.ts"],
       "@fdk-frontend/data-access/server": ["libs/data-access/src/server.ts"],
       "@fdk-frontend/dictionaries": ["libs/dictionaries/src/index.ts"],
-      "@fdk-frontend/dictionaries/server": ["libs/dictionaries/src/server.ts"],
       "@fdk-frontend/types": ["libs/types/src/index.ts"],
       "@fdk-frontend/types/server": ["libs/types/src/server.ts"],
       "@fdk-frontend/ui": ["libs/ui/src/index.ts"],
diff --git a/yarn.lock b/yarn.lock
index 08c2202c..02333a58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5133,6 +5133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -7098,6 +7105,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^7.6.0"
     "@typescript-eslint/parser": "npm:^7.6.0"
     babel-jest: "npm:^29.7.0"
+    classnames: "npm:^2.5.1"
     eslint: "npm:^8.57.0"
     eslint-config-next: "npm:14.1.4"
     eslint-config-prettier: "npm:^9.1.0"
@@ -7120,6 +7128,7 @@ __metadata:
     tslib: "npm:^2.6.2"
     typescript: "npm:^5.4.5"
     typescript-eslint: "npm:^7.6.0"
+    zod: "npm:^3.22.4"
   languageName: unknown
   linkType: soft
 
@@ -14230,3 +14239,10 @@ __metadata:
   checksum: 10c0/856117aa15cf5103d2a2fb173f0ab4acb12b4b4d0ed3ab249fdbbf612e55d1cadfd27a6110940e24746fb0a78cf640b522cc8bca76f30a3b00b66e90cf82abe0
   languageName: node
   linkType: hard
+
+"zod@npm:^3.22.4":
+  version: 3.22.4
+  resolution: "zod@npm:3.22.4"
+  checksum: 10c0/7578ab283dac0eee66a0ad0fc4a7f28c43e6745aadb3a529f59a4b851aa10872b3890398b3160f257f4b6817b4ce643debdda4fb21a2c040adda7862cab0a587
+  languageName: node
+  linkType: hard