From fc5f57f064d42139593f1d7f2082a261b9555cf1 Mon Sep 17 00:00:00 2001
From: Tim Arney <timarney@users.noreply.github.com>
Date: Thu, 4 May 2023 09:11:07 -0400
Subject: [PATCH 1/7] Disable locale prop for links on landing page (#2033)

add locale prop
---
 pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index b6c7b6b5a0..8ba5751e92 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -21,13 +21,13 @@ const Home = () => {
       </div>
       <div className="border-gray-400 p-10 grid grid-cols-2 gap-x-4 max-w-2xl  w-2/4 m-auto">
         <p>
-          <Link href="/en/form-builder" lang="en">
+          <Link href="/en/form-builder" lang="en" locale={false}>
             English
           </Link>
         </p>
 
         <p>
-          <Link href="/fr/form-builder" className="block" lang="fr">
+          <Link href="/fr/form-builder" className="block" lang="fr" locale={false}>
             Français
           </Link>
         </p>

From b789397f4c9c291758235d4b401d3d09f45cd24a Mon Sep 17 00:00:00 2001
From: Tim Arney <timarney@users.noreply.github.com>
Date: Thu, 4 May 2023 13:32:24 -0400
Subject: [PATCH 2/7] Fix translation on the Response Delivery page (#2035)

* fix content

* Small FR tweak

---------

Co-authored-by: Anik Brazeau <38330843+anikbrazeau@users.noreply.github.com>
---
 components/form-builder/app/SetResponseDelivery.tsx | 2 +-
 public/static/locales/en/form-builder.json          | 2 +-
 public/static/locales/fr/form-builder.json          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/form-builder/app/SetResponseDelivery.tsx b/components/form-builder/app/SetResponseDelivery.tsx
index bcea19d8bc..fda7f88592 100644
--- a/components/form-builder/app/SetResponseDelivery.tsx
+++ b/components/form-builder/app/SetResponseDelivery.tsx
@@ -229,7 +229,7 @@ export const SetResponseDelivery = () => {
               {t("settingsResponseDelivery.selectClassification")}
             </p>
             <p className="inline-block mb-5 p-3 bg-purple-200 font-bold text-sm">
-              {t("beforePublishMessage")}
+              {t("settingsResponseDelivery.beforePublishMessage")}
             </p>
             <select
               disabled={isPublished}
diff --git a/public/static/locales/en/form-builder.json b/public/static/locales/en/form-builder.json
index 738fdeb235..8383aaf4c4 100644
--- a/public/static/locales/en/form-builder.json
+++ b/public/static/locales/en/form-builder.json
@@ -447,6 +447,7 @@
   "settingsResponseHint1": "Submitted responses will be emailed to this inbox.",
   "settingsResponseDelivery": {
     "selectClassification": "Select the data classification of your form responses",
+    "beforePublishMessage": "You can change these settings anytime before publishing.",
     "title": "Select a response delivery option",
     "vaultOption": "Download responses from GC Forms",
     "vaultOptionHint": {
@@ -619,6 +620,5 @@
       "body2": "unconfirmed responses 35 days overdue. Confirm the receipt of all overdue downloaded responses before saving new ones."
     }
   },
-  "beforePublishMessage": "You can change these settings anytime before publishing.",
   "loading": "Loading..."
 }
diff --git a/public/static/locales/fr/form-builder.json b/public/static/locales/fr/form-builder.json
index b5156818fb..69774b74ce 100644
--- a/public/static/locales/fr/form-builder.json
+++ b/public/static/locales/fr/form-builder.json
@@ -448,10 +448,11 @@
   "settingsResponseTitle": "Destination de livraison des réponses.",
   "settingsResponseDelivery": {
     "selectClassification": "Sélectionnez la classification des données des réponses de votre formulaire",
+    "beforePublishMessage": "Vous pouvez modifier ces paramètres à tout moment avant de publier le formulaire.",
     "title": "Sélectionnez une option de livraison des réponses",
     "vaultOption": "Télécharger les réponses de Formulaires GC",
     "vaultOptionHint": {
-      "text1": " Les réponses reçues apparaîtront à la page Réponses",
+      "text1": " Les réponses reçues apparaîtront sur",
       "text2": "la page Réponses"
     },
     "emailOption": "Les réponses soumises seront envoyées par courriel à cette boîte de réception.",
@@ -619,7 +620,6 @@
       "body1": "Il y a",
       "body2": "réponses non confirmées avec 35 jours de retard ou plus. Confirmez la réception de toute réponse téléchargée en retard avant d'en enregistrer de nouvelles."
     },
-    "beforePublishMessage": "Vous pouvez modifier ces paramètres à tout moment avant de publier le formulaire.",
     "loading": "Chargement..."
   }
 }

From 75659c6f681e97e76e0ee1d0bbe33f5ef0d26889 Mon Sep 17 00:00:00 2001
From: Tim Arney <timarney@users.noreply.github.com>
Date: Thu, 4 May 2023 15:31:32 -0400
Subject: [PATCH 3/7] Expanding question inputs (#2038)

* initial setup

* update test
---
 components/form-builder/app/edit/Edit.tsx     |  2 ++
 .../form-builder/app/edit/RefsContext.tsx     |  4 +--
 .../edit/elements/question/QuestionInput.tsx  | 12 +++----
 .../app/shared/ExpandingInput.tsx             | 11 +++---
 cypress/e2e/form-builder/add-elements.cy.js   | 36 +++++--------------
 cypress/e2e/form-builder/autocomplete.cy.js   |  6 ++--
 styles/_form-builder.scss                     |  2 --
 7 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/components/form-builder/app/edit/Edit.tsx b/components/form-builder/app/edit/Edit.tsx
index c3a9c92ea4..6344e82f9b 100644
--- a/components/form-builder/app/edit/Edit.tsx
+++ b/components/form-builder/app/edit/Edit.tsx
@@ -97,6 +97,8 @@ export const Edit = () => {
             </label>
             <ExpandingInput
               id="formTitle"
+              wrapperClassName="w-full laptop:w-3/4 mt-2 laptop:mt-0 laptop:text-3xl mb-4 my-2"
+              className="font-bold laptop:text-3xl"
               ref={titleInput}
               placeholder={t("placeHolderFormTitle")}
               value={value}
diff --git a/components/form-builder/app/edit/RefsContext.tsx b/components/form-builder/app/edit/RefsContext.tsx
index 78d21c6fa6..3250d48b20 100644
--- a/components/form-builder/app/edit/RefsContext.tsx
+++ b/components/form-builder/app/edit/RefsContext.tsx
@@ -1,13 +1,13 @@
 import React, { createContext, useContext, useRef, RefObject } from "react";
 
 interface RefsContextType {
-  refs?: RefObject<HTMLInputElement[]> | undefined;
+  refs?: RefObject<HTMLTextAreaElement[]> | undefined;
 }
 
 const RefsContext = createContext<RefsContextType>({});
 
 export function RefsProvider({ children }: { children: React.ReactNode }) {
-  const refs = useRef<HTMLInputElement[]>([]);
+  const refs = useRef<HTMLTextAreaElement[]>([]);
 
   return <RefsContext.Provider value={{ refs }}>{children}</RefsContext.Provider>;
 }
diff --git a/components/form-builder/app/edit/elements/question/QuestionInput.tsx b/components/form-builder/app/edit/elements/question/QuestionInput.tsx
index ddff22c97f..a5cabb0ce9 100644
--- a/components/form-builder/app/edit/elements/question/QuestionInput.tsx
+++ b/components/form-builder/app/edit/elements/question/QuestionInput.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
 import debounce from "lodash.debounce";
 
-import { Input } from "@formbuilder/app/shared";
+import { ExpandingInput } from "@formbuilder/app/shared";
 import { Language } from "@formbuilder/types";
 import { useTemplateStore } from "@formbuilder/store";
 import { useRefsContext } from "@formbuilder/app/edit/RefsContext";
@@ -24,7 +24,7 @@ export const QuestionInput = ({
   const [value, setValue] = useState(initialValue);
 
   const { refs } = useRefsContext();
-  const getRef = (element: HTMLInputElement) => {
+  const getRef = (element: HTMLTextAreaElement) => {
     if (!refs || !refs.current || !element || !id) {
       return;
     }
@@ -73,17 +73,17 @@ export const QuestionInput = ({
   );
 
   return (
-    <Input
+    <ExpandingInput
       ref={getRef}
       type="text"
       id={`item-${id}`}
       name={`item${index}`}
       placeholder={t("question")}
-      className="w-full"
+      wrapperClassName="w-full text-base"
+      className="font-bold text-base"
       value={value}
       describedBy={describedById ?? undefined}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateValue(index, e.target.value)}
-      theme="title"
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => updateValue(index, e.target.value)}
       {...getLocalizationAttribute()}
     />
   );
diff --git a/components/form-builder/app/shared/ExpandingInput.tsx b/components/form-builder/app/shared/ExpandingInput.tsx
index 7fec14bc6a..c9ede60be4 100644
--- a/components/form-builder/app/shared/ExpandingInput.tsx
+++ b/components/form-builder/app/shared/ExpandingInput.tsx
@@ -4,6 +4,8 @@ interface Props {
   id: string;
   name?: string;
   type?: string;
+  wrapperClassName?: string;
+  className?: string;
   placeholder?: string;
   describedBy?: string;
   value: string | number;
@@ -29,18 +31,17 @@ const ExpandingInput = React.forwardRef<Ref, Props>((props, ref) => {
     isInvalid = false,
     lang,
     onBlur,
+    wrapperClassName,
+    className,
   } = props;
 
   return (
-    <div
-      className="input-sizer stacked w-full laptop:w-3/4 mt-2 laptop:mt-0 mb-4 my-2 "
-      data-value={value}
-    >
+    <div className={`input-sizer stacked ${wrapperClassName}`} data-value={value}>
       <textarea
         rows={1}
         maxLength={2000}
         id={id}
-        className="text-base font-bold border-b-1.5 border-black-default border-solid focus:bg-gray-default focus:outline-0 !font-sans"
+        className={`border-b-1.5 border-black-default border-solid focus:bg-gray-default focus:outline-0 !font-sans ${className}`}
         name={name}
         aria-describedby={describedBy}
         aria-invalid={isInvalid ? true : false}
diff --git a/cypress/e2e/form-builder/add-elements.cy.js b/cypress/e2e/form-builder/add-elements.cy.js
index 4244fe3ec1..a7aedfdb46 100644
--- a/cypress/e2e/form-builder/add-elements.cy.js
+++ b/cypress/e2e/form-builder/add-elements.cy.js
@@ -40,9 +40,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="textField"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get(".example-text").should("contain", "Short answer");
   });
@@ -54,9 +52,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="textArea"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get(".example-text").should("contain", "Long answer text");
   });
@@ -68,9 +64,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="radio"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get('[id="option--1--1"]')
       .should("have.attr", "type", "text")
@@ -86,13 +80,9 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="checkbox"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
-    cy.get('[id="option--1--1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Option 1");
+    cy.get('[id="option--1--1"]').should("have.attr", "placeholder", "Option 1");
 
     cy.get(".example-text").should("contain", "Multiple choice");
   });
@@ -104,13 +94,9 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="dropdown"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
-    cy.get('[id="option--1--1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Option 1");
+    cy.get('[id="option--1--1"]').should("have.attr", "placeholder", "Option 1");
 
     cy.get(".example-text").should("contain", "Dropdown");
   });
@@ -122,9 +108,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="date"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get('[data-testid="description-text"]').should(
       "contain",
@@ -140,9 +124,7 @@ describe("Test FormBuilder Add Elements", () => {
     cy.get('[data-testid="number"]').click();
     cy.get("button").contains("Select block").click();
 
-    cy.get('[id="item-1"]')
-      .should("have.attr", "type", "text")
-      .should("have.attr", "placeholder", "Question");
+    cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
     cy.get('[data-testid="description-text"]').should("contain", "Only enter numbers");
     cy.get('[data-testid="number"]').should("contain", "0123456789");
diff --git a/cypress/e2e/form-builder/autocomplete.cy.js b/cypress/e2e/form-builder/autocomplete.cy.js
index aea8b4224d..de1703cb51 100644
--- a/cypress/e2e/form-builder/autocomplete.cy.js
+++ b/cypress/e2e/form-builder/autocomplete.cy.js
@@ -65,16 +65,14 @@ describe("Test FormBuilder autocomplete props", () => {
   });
 
   autocompleteOptions.forEach((option) => {
-    it(`Adds a TextInput with ${option[0]} autocomplete`, () => {
+    it(`Adds a TextAreaInput with ${option[0]} autocomplete`, () => {
       cy.visit("/form-builder/edit");
       cy.get("button").contains("Add").click();
 
       cy.get('[data-testid="textField"]').click();
       cy.get("button").contains("Select block").click();
 
-      cy.get('[id="item-1"]')
-        .should("have.attr", "type", "text")
-        .should("have.attr", "placeholder", "Question");
+      cy.get('[id="item-1"]').should("have.attr", "placeholder", "Question");
 
       cy.get(".example-text").should("contain", "Short answer");
 
diff --git a/styles/_form-builder.scss b/styles/_form-builder.scss
index fcb63bf67b..c16ce3a362 100644
--- a/styles/_form-builder.scss
+++ b/styles/_form-builder.scss
@@ -21,8 +21,6 @@
       grid-area: 1 / 2;
       resize: none;
       appearance: none;
-      font-size: 30px !important;
-      line-height: 38px !important;
       padding-top: 0.625rem;
       padding-bottom: 0.375rem;
       padding-left: 0.625rem;

From c32775e2fd064d351f94c22b8f6c046a0c086aa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20JANIN?= <clement.janin@cds-snc.ca>
Date: Thu, 4 May 2023 16:08:02 -0400
Subject: [PATCH 4/7] refactor: reworked API error responses when message was
 'Malformed API Request' (#2008)

---
 lib/middleware/cors.ts            |   2 +-
 lib/middleware/csrfProtected.ts   |  31 +++---
 lib/middleware/jsonIDValidator.ts | 153 +++++++++++++-----------------
 lib/middleware/jsonValidator.ts   |  12 +--
 lib/tests/jsonValidator.test.js   |   6 +-
 pages/api/acceptableuse.ts        |   2 +-
 pages/api/templates/[formID].ts   |  74 +++++++--------
 pages/api/templates/index.ts      |  61 ++++++------
 pages/api/verify.ts               |   4 +-
 9 files changed, 159 insertions(+), 186 deletions(-)

diff --git a/lib/middleware/cors.ts b/lib/middleware/cors.ts
index 2dd7b7f213..91106b8f6c 100644
--- a/lib/middleware/cors.ts
+++ b/lib/middleware/cors.ts
@@ -57,7 +57,7 @@ export const cors = ({
       return { next: true };
     } catch (e) {
       logMessage.error(e as Error);
-      res.status(500).json({ error: "Malformed API Request" });
+      res.status(400).json({ error: "Malformed API Request" });
       return { next: false };
     }
   };
diff --git a/lib/middleware/csrfProtected.ts b/lib/middleware/csrfProtected.ts
index dc439a2105..a6c71f505f 100644
--- a/lib/middleware/csrfProtected.ts
+++ b/lib/middleware/csrfProtected.ts
@@ -4,27 +4,22 @@ import { getCsrfToken } from "next-auth/react";
 
 export const csrfProtected = (protectedMethods: string[]): MiddlewareRequest => {
   return async (req: NextApiRequest, res: NextApiResponse): Promise<MiddlewareReturn> => {
-    try {
-      if (isProtected(req, protectedMethods)) {
-        // Need to remove body from NextApiRequest due to Next-Auth bug
-        // Next-Auth sets the method Call based on if a Body is present on the request.
-        // This causes issues with CSRF protection so only required arguments are passed.
-        const clonedReq = { body: undefined, headers: req.headers };
+    if (isProtected(req, protectedMethods)) {
+      // Need to remove body from NextApiRequest due to Next-Auth bug
+      // Next-Auth sets the method Call based on if a Body is present on the request.
+      // This causes issues with CSRF protection so only required arguments are passed.
+      const clonedReq = { body: undefined, headers: req.headers };
 
-        const csrfToken = await getCsrfToken({ req: clonedReq });
-        if (csrfToken && csrfToken === req.headers["x-csrf-token"]) {
-          return { next: true };
-        } else {
-          res.status(403).json({ error: "Access Denied" });
-          return { next: false };
-        }
-      } else {
-        //allow unrestricted method
+      const csrfToken = await getCsrfToken({ req: clonedReq }).catch(() => null);
+      if (csrfToken && csrfToken === req.headers["x-csrf-token"]) {
         return { next: true };
+      } else {
+        res.status(403).json({ error: "Access Denied" });
+        return { next: false };
       }
-    } catch (error) {
-      res.status(500).json({ error: "Malformed API Request" });
-      return { next: false };
+    } else {
+      //allow unrestricted method
+      return { next: true };
     }
   };
 };
diff --git a/lib/middleware/jsonIDValidator.ts b/lib/middleware/jsonIDValidator.ts
index d13818b47b..39bc20363c 100644
--- a/lib/middleware/jsonIDValidator.ts
+++ b/lib/middleware/jsonIDValidator.ts
@@ -14,29 +14,22 @@ export type ValidateOptions = {
  */
 export const uniqueIDValidator = (options?: ValidateOptions): MiddlewareRequest => {
   return async (req: NextApiRequest, res: NextApiResponse): Promise<MiddlewareReturn> => {
-    try {
-      if (options?.runValidationIf?.(req) === false) {
-        return { next: true };
-      }
-      const formProperties: FormProperties = options?.jsonKey
-        ? req.body[options.jsonKey]
-        : req.body;
-      const elementIDs: Array<number> = formProperties.elements.map((element) => {
-        return element.id;
+    if (options?.runValidationIf?.(req) === false) {
+      return { next: true };
+    }
+    const formProperties: FormProperties = options?.jsonKey ? req.body[options.jsonKey] : req.body;
+    const elementIDs: Array<number> = formProperties.elements.map((element) => {
+      return element.id;
+    });
+    const duplicateElementIDs = elementIDs.filter(
+      (value, index, array) => array.indexOf(value) !== index
+    );
+    if (duplicateElementIDs.length === 0) {
+      return { next: true };
+    } else {
+      res.status(400).json({
+        error: `JSON Validation Error: Duplicate IDs detected: ${duplicateElementIDs.join()}`,
       });
-      const duplicateElementIDs = elementIDs.filter(
-        (value, index, array) => array.indexOf(value) !== index
-      );
-      if (duplicateElementIDs.length === 0) {
-        return { next: true };
-      } else {
-        res.status(400).json({
-          error: `JSON Validation Error: Duplicate IDs detected: ${duplicateElementIDs.join()}`,
-        });
-        return { next: false };
-      }
-    } catch {
-      res.status(500).json({ error: "Malformed API Request" });
       return { next: false };
     }
   };
@@ -49,29 +42,22 @@ export const uniqueIDValidator = (options?: ValidateOptions): MiddlewareRequest
  */
 export const layoutIDValidator = (options?: ValidateOptions): MiddlewareRequest => {
   return async (req: NextApiRequest, res: NextApiResponse): Promise<MiddlewareReturn> => {
-    try {
-      if (options?.runValidationIf?.(req) === false) {
-        return { next: true };
-      }
-      const formProperties: FormProperties = options?.jsonKey
-        ? req.body[options.jsonKey]
-        : req.body;
-      const elementIDs: Array<number> = formProperties.elements.map((element) => {
-        return element.id;
+    if (options?.runValidationIf?.(req) === false) {
+      return { next: true };
+    }
+    const formProperties: FormProperties = options?.jsonKey ? req.body[options.jsonKey] : req.body;
+    const elementIDs: Array<number> = formProperties.elements.map((element) => {
+      return element.id;
+    });
+    const missingLayoutIDs = formProperties.layout.filter(
+      (layoutID) => elementIDs.indexOf(layoutID) === -1
+    );
+    if (missingLayoutIDs.length === 0) {
+      return { next: true };
+    } else {
+      res.status(400).json({
+        error: `JSON Validation Error: Layout IDs not found: ${missingLayoutIDs.join()}`,
       });
-      const missingLayoutIDs = formProperties.layout.filter(
-        (layoutID) => elementIDs.indexOf(layoutID) === -1
-      );
-      if (missingLayoutIDs.length === 0) {
-        return { next: true };
-      } else {
-        res.status(400).json({
-          error: `JSON Validation Error: Layout IDs not found: ${missingLayoutIDs.join()}`,
-        });
-        return { next: false };
-      }
-    } catch {
-      res.status(500).json({ error: "Malformed API Request" });
       return { next: false };
     }
   };
@@ -84,57 +70,48 @@ export const layoutIDValidator = (options?: ValidateOptions): MiddlewareRequest
  */
 export const subElementsIDValidator = (options?: ValidateOptions): MiddlewareRequest => {
   return async (req: NextApiRequest, res: NextApiResponse): Promise<MiddlewareReturn> => {
-    try {
-      if (options?.runValidationIf?.(req) === false) {
-        return { next: true };
-      }
-      const formProperties: FormProperties = options?.jsonKey
-        ? req.body[options.jsonKey]
-        : req.body;
+    if (options?.runValidationIf?.(req) === false) {
+      return { next: true };
+    }
+    const formProperties: FormProperties = options?.jsonKey ? req.body[options.jsonKey] : req.body;
 
-      const dynamicRowElements: Array<FormElement> = formProperties.elements.filter((element) => {
-        return element.type === FormElementTypes.dynamicRow;
-      });
+    const dynamicRowElements: Array<FormElement> = formProperties.elements.filter((element) => {
+      return element.type === FormElementTypes.dynamicRow;
+    });
 
-      let duplicateSubElementIDs: Array<number> = [];
-      let unmatchedSubElementIDs: Array<number> = [];
+    let duplicateSubElementIDs: Array<number> = [];
+    let unmatchedSubElementIDs: Array<number> = [];
 
-      dynamicRowElements.forEach((dynamicRow: FormElement) => {
-        if (dynamicRow.properties.subElements) {
-          const subElementIDs: Array<number> = dynamicRow.properties.subElements.map(
-            (subElement) => {
-              return subElement.id;
-            }
-          );
+    dynamicRowElements.forEach((dynamicRow: FormElement) => {
+      if (dynamicRow.properties.subElements) {
+        const subElementIDs: Array<number> = dynamicRow.properties.subElements.map((subElement) => {
+          return subElement.id;
+        });
 
-          duplicateSubElementIDs = duplicateSubElementIDs.concat(
-            subElementIDs.filter((value, index, array) => array.indexOf(value) !== index)
-          );
+        duplicateSubElementIDs = duplicateSubElementIDs.concat(
+          subElementIDs.filter((value, index, array) => array.indexOf(value) !== index)
+        );
 
-          const dynamicRowId = dynamicRow.id;
-          unmatchedSubElementIDs = unmatchedSubElementIDs.concat(
-            subElementIDs.filter((subElementID) => {
-              return subElementID.toString().startsWith(dynamicRowId.toString()) === false;
-            })
-          );
-        }
-      });
-      if (duplicateSubElementIDs.length > 0) {
-        res.status(400).json({
-          error: `JSON Validation Error: Duplicate subElement IDs detected: ${duplicateSubElementIDs.join()}`,
-        });
-        return { next: false };
+        const dynamicRowId = dynamicRow.id;
+        unmatchedSubElementIDs = unmatchedSubElementIDs.concat(
+          subElementIDs.filter((subElementID) => {
+            return subElementID.toString().startsWith(dynamicRowId.toString()) === false;
+          })
+        );
       }
-      if (unmatchedSubElementIDs.length > 0) {
-        res.status(400).json({
-          error: `JSON Validation Error: Incorrect subElement IDs detected: ${unmatchedSubElementIDs.join()}`,
-        });
-        return { next: false };
-      }
-      return { next: true };
-    } catch {
-      res.status(500).json({ error: "Malformed API Request" });
+    });
+    if (duplicateSubElementIDs.length > 0) {
+      res.status(400).json({
+        error: `JSON Validation Error: Duplicate subElement IDs detected: ${duplicateSubElementIDs.join()}`,
+      });
+      return { next: false };
+    }
+    if (unmatchedSubElementIDs.length > 0) {
+      res.status(400).json({
+        error: `JSON Validation Error: Incorrect subElement IDs detected: ${unmatchedSubElementIDs.join()}`,
+      });
       return { next: false };
     }
+    return { next: true };
   };
 };
diff --git a/lib/middleware/jsonValidator.ts b/lib/middleware/jsonValidator.ts
index 4e4d91d55c..cbb86fa93c 100644
--- a/lib/middleware/jsonValidator.ts
+++ b/lib/middleware/jsonValidator.ts
@@ -58,21 +58,15 @@ export const jsonValidator = (schema: Schema, options?: ValidateOptions): Middle
         schema,
         options?.noHTML ? { preValidateProperty: htmlChecker } : undefined
       );
+
       if (validatorResult.valid) {
         return { next: true };
       } else {
-        res
-          .status(400)
-          .json({ error: "JSON Validation Error: " + validatorResult.errors.toString() });
-        return { next: false };
+        throw new Error(validatorResult.errors.toString());
       }
     } catch (e) {
       const validationError = e as Error;
-      if (validationError.message === "HTML detected in JSON") {
-        res.status(400).json({ error: "JSON Validation Error: HTML detected in JSON" });
-      } else {
-        res.status(500).json({ error: "Malformed API Request" });
-      }
+      res.status(400).json({ error: `JSON Validation Error: ${validationError.message}` });
       return { next: false };
     }
   };
diff --git a/lib/tests/jsonValidator.test.js b/lib/tests/jsonValidator.test.js
index 9adf34998a..99ac4f19d9 100644
--- a/lib/tests/jsonValidator.test.js
+++ b/lib/tests/jsonValidator.test.js
@@ -60,8 +60,10 @@ describe("Test JSON validation scenarios", () => {
 
     await jsonValidator("", { jsonKey: "formConfig" })(req, res);
 
-    expect(JSON.parse(res._getData()).error).toEqual("Malformed API Request");
-    expect(res.statusCode).toBe(500);
+    expect(res.statusCode).toBe(400);
+    expect(JSON.parse(res._getData()).error).toEqual(
+      "JSON Validation Error: Expected `schema` to be an object or boolean"
+    );
   });
 
   it("Should fail if there is any HTML in string fields", async () => {
diff --git a/pages/api/acceptableuse.ts b/pages/api/acceptableuse.ts
index 37987b2156..eb748cbc49 100644
--- a/pages/api/acceptableuse.ts
+++ b/pages/api/acceptableuse.ts
@@ -13,7 +13,7 @@ const acceptableUse = async (
     await setAcceptableUse(session.user.id);
     res.status(200).json({});
   } catch (err) {
-    res.status(500).json({ error: "Malformed API Request" });
+    res.status(500).json({ error: "Internal server error" });
   }
 };
 
diff --git a/pages/api/templates/[formID].ts b/pages/api/templates/[formID].ts
index 77f8f134ee..f984d712a9 100644
--- a/pages/api/templates/[formID].ts
+++ b/pages/api/templates/[formID].ts
@@ -3,7 +3,6 @@ import {
   updateTemplate,
   updateIsPublishedForTemplate,
   updateAssignedUsersForTemplate,
-  onlyIncludePublicProperties,
   TemplateAlreadyPublishedError,
   getFullTemplateByID,
   removeDeliveryOption,
@@ -24,54 +23,48 @@ import {
   DeliveryOption,
   UserAbility,
   SecurityAttribute,
+  WithRequired,
 } from "@lib/types";
 import { AccessControlError, createAbility } from "@lib/privileges";
+import { logMessage } from "@lib/logger";
 
-const allowedMethods = ["GET", "POST", "PUT", "DELETE"];
-const authenticatedMethods = ["POST", "PUT", "DELETE"];
+class MalformedAPIRequest extends Error {}
 
-const templates = async (
-  req: NextApiRequest,
-  res: NextApiResponse,
-  { session }: MiddlewareProps
-) => {
+const templates = async (req: NextApiRequest, res: NextApiResponse, props: MiddlewareProps) => {
   try {
-    if (!session) return res.status(401).json({ error: "Unauthorized" });
+    const { session } = props as WithRequired<MiddlewareProps, "session">;
 
     const ability = createAbility(session);
 
-    const response = await templateCRUD({
+    const response = await route({
       ability: ability,
       method: req.method,
       request: req,
       ...req.body,
     });
 
-    if (!response) return res.status(500).json({ error: "Error on Server Side" });
+    if (!response) throw new Error("Null operation response");
 
-    if (req.method === "GET") {
-      if (Array.isArray(response)) {
-        const publicTemplates = response.map((template) => onlyIncludePublicProperties(template));
-        return res.status(200).json(publicTemplates);
-      }
-    }
-
-    // If not GET then we're authenticated and can safely return the complete Form Record.
     return res.status(200).json(response);
-  } catch (err) {
-    if (err instanceof AccessControlError) {
+  } catch (e) {
+    const error = e as Error;
+
+    if (e instanceof AccessControlError) {
       return res.status(403).json({ error: "Forbidden" });
-    } else if (err instanceof TemplateAlreadyPublishedError) {
+    } else if (e instanceof TemplateAlreadyPublishedError) {
       return res.status(409).json({ error: "Can't update published form" });
-    } else if (err instanceof TemplateHasUnprocessedSubmissions) {
+    } else if (e instanceof TemplateHasUnprocessedSubmissions) {
       return res.status(405).json({ error: "Found unprocessed submissions" });
+    } else if (e instanceof MalformedAPIRequest) {
+      return res.status(400).json({ error: `Malformed API Request. Reason: ${error.message}.` });
     } else {
-      return res.status(400).json({ error: "Malformed API Request" });
+      logMessage.error(error);
+      return res.status(500).json({ error: `Internal server error. Reason: ${error.message}.` });
     }
   }
 };
 
-const templateCRUD = async ({
+const route = async ({
   ability,
   method,
   request,
@@ -94,13 +87,17 @@ const templateCRUD = async ({
   users?: { id: string; action: "add" | "remove" }[];
   sendResponsesToVault?: boolean;
 }) => {
-  const formID = request.query.formID as string;
+  const formID = request.query.formID;
+
+  if (!formID || typeof formID !== "string") {
+    throw new MalformedAPIRequest("Invalid or missing formID");
+  }
+
   switch (method) {
     case "GET":
-      if (formID) return await getFullTemplateByID(ability, formID);
-      break;
+      return await getFullTemplateByID(ability, formID);
     case "PUT":
-      if (formID && formConfig) {
+      if (formConfig) {
         return await updateTemplate({
           ability: ability,
           formID: formID,
@@ -109,19 +106,20 @@ const templateCRUD = async ({
           deliveryOption: deliveryOption,
           securityAttribute: securityAttribute,
         });
-      } else if (formID && isPublished !== undefined) {
+      } else if (isPublished !== undefined) {
         return await updateIsPublishedForTemplate(ability, formID, isPublished);
-      } else if (formID && users) {
+      } else if (users) {
         return await updateAssignedUsersForTemplate(ability, formID, users);
-      } else if (formID && sendResponsesToVault) {
+      } else if (sendResponsesToVault) {
         return await removeDeliveryOption(ability, formID);
       }
-      throw new Error("Missing formID and/or formConfig");
+      throw new MalformedAPIRequest(
+        "Missing additional request parameter (formConfig, isPublished, users, sendResponsesToVault)"
+      );
     case "DELETE":
-      if (formID) return await deleteTemplate(ability, formID);
-      throw new Error("Missing formID");
+      return await deleteTemplate(ability, formID);
     default:
-      throw new Error("Unsupported Method");
+      throw new MalformedAPIRequest("Unsupported method");
   }
 };
 
@@ -131,8 +129,8 @@ const runValidationCondition = (req: NextApiRequest) => {
 
 export default middleware(
   [
-    cors({ allowedMethods }),
-    sessionExists(authenticatedMethods),
+    cors({ allowedMethods: ["GET", "POST", "PUT", "DELETE"] }),
+    sessionExists(),
     jsonValidator(templatesSchema, {
       jsonKey: "formConfig",
       noHTML: true,
diff --git a/pages/api/templates/index.ts b/pages/api/templates/index.ts
index 8ff56e7dfc..47bff7ab6f 100644
--- a/pages/api/templates/index.ts
+++ b/pages/api/templates/index.ts
@@ -7,6 +7,7 @@ import {
   MiddlewareProps,
   SecurityAttribute,
   UserAbility,
+  WithRequired,
 } from "@lib/types";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { Session } from "next-auth";
@@ -16,36 +17,36 @@ import {
   subElementsIDValidator,
   uniqueIDValidator,
 } from "@lib/middleware/jsonIDValidator";
+import { logMessage } from "@lib/logger";
 
-const allowedMethods = ["GET", "POST"];
-const authenticatedMethods = ["POST"];
+class MalformedAPIRequest extends Error {}
 
-const templates = async (
-  req: NextApiRequest,
-  res: NextApiResponse,
-  { session }: MiddlewareProps
-) => {
+const templates = async (req: NextApiRequest, res: NextApiResponse, props: MiddlewareProps) => {
   try {
-    if (!session) return res.status(401).json({ error: "Unauthorized" });
+    const { session } = props as WithRequired<MiddlewareProps, "session">;
 
     const ability = createAbility(session);
-    const user = session.user;
 
-    const response = await route({ ability: ability, user: user, method: req.method, ...req.body });
+    const response = await route({
+      ability: ability,
+      user: session.user,
+      method: req.method,
+      ...req.body,
+    });
 
-    if (!response) return res.status(500).json({ error: "Error on Server Side" });
-
-    if (req.method === "GET") {
-      if (Array.isArray(response)) {
-        const publicTemplates = response.map((template) => onlyIncludePublicProperties(template));
-        return res.status(200).json(publicTemplates);
-      }
-    }
+    if (!response) throw new Error("Null operation response");
 
     return res.status(200).json(response);
-  } catch (err) {
-    if (err instanceof AccessControlError) return res.status(403).json({ error: "Forbidden" });
-    else return res.status(500).json({ error: "Malformed API Request" });
+  } catch (e) {
+    const error = e as Error;
+    if (error instanceof AccessControlError) {
+      return res.status(403).json({ error: "Forbidden" });
+    } else if (error instanceof MalformedAPIRequest) {
+      return res.status(400).json({ error: `Malformed API Request. Reason: ${error.message}.` });
+    } else {
+      logMessage.error(error);
+      return res.status(500).json({ error: `Internal server error. Reason: ${error.message}.` });
+    }
   }
 };
 
@@ -67,10 +68,12 @@ const route = async ({
   securityAttribute?: SecurityAttribute;
 }) => {
   switch (method) {
-    case "GET":
-      return getAllTemplates(ability, user.id);
+    case "GET": {
+      const templates = await getAllTemplates(ability, user.id);
+      return templates.map((template) => onlyIncludePublicProperties(template));
+    }
     case "POST":
-      if (formConfig)
+      if (formConfig) {
         return await createTemplate({
           ability: ability,
           userID: user.id,
@@ -79,7 +82,11 @@ const route = async ({
           deliveryOption: deliveryOption,
           securityAttribute: securityAttribute,
         });
-      throw new Error("Missing Form Configuration");
+      } else {
+        throw new MalformedAPIRequest("Missing formConfig");
+      }
+    default:
+      throw new MalformedAPIRequest("Unsupported method");
   }
 };
 
@@ -89,8 +96,8 @@ const runValidationCondition = (req: NextApiRequest) => {
 
 export default middleware(
   [
-    cors({ allowedMethods }),
-    sessionExists(authenticatedMethods),
+    cors({ allowedMethods: ["GET", "POST"] }),
+    sessionExists(),
     jsonValidator(templatesSchema, { jsonKey: "formConfig", noHTML: true }),
     uniqueIDValidator({
       runValidationIf: runValidationCondition,
diff --git a/pages/api/verify.ts b/pages/api/verify.ts
index 49a41bbf49..2ae18e9c58 100644
--- a/pages/api/verify.ts
+++ b/pages/api/verify.ts
@@ -14,10 +14,10 @@ const verifyReCaptchaToken = async (req: NextApiRequest, res: NextApiResponse) =
       });
       res.status(200).json({ ...response.data });
     } else {
-      res.status(404).json({ error: "Bad request" });
+      res.status(400).json({ error: "Malformed API Request" });
     }
   } catch (err) {
-    res.status(500).json({ error: "Malformed API Request" });
+    res.status(500).json({ error: "Failed to verify ReCaptcha token" });
   }
 };
 

From 4062af5b6f1f9f0766903fab44e824c907dd6018 Mon Sep 17 00:00:00 2001
From: Tim Arney <timarney@users.noreply.github.com>
Date: Fri, 5 May 2023 10:14:23 -0400
Subject: [PATCH 5/7] Update translate interface to use TextArea for form title
 (#2050)

* cleanup

* switch to textarea
---
 components/form-builder/app/edit/Edit.tsx     | 24 ++++++++++---------
 .../edit/elements/question/QuestionInput.tsx  |  2 +-
 .../app/shared/ExpandingInput.tsx             |  7 ++++--
 .../form-builder/app/translate/Translate.tsx  |  6 ++---
 styles/_form-builder.scss                     |  2 ++
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/components/form-builder/app/edit/Edit.tsx b/components/form-builder/app/edit/Edit.tsx
index 6344e82f9b..6be868785b 100644
--- a/components/form-builder/app/edit/Edit.tsx
+++ b/components/form-builder/app/edit/Edit.tsx
@@ -95,17 +95,19 @@ export const Edit = () => {
             <label htmlFor="formTitle" className="visually-hidden" {...getLocalizationAttribute()}>
               {t("formTitle")}
             </label>
-            <ExpandingInput
-              id="formTitle"
-              wrapperClassName="w-full laptop:w-3/4 mt-2 laptop:mt-0 laptop:text-3xl mb-4 my-2"
-              className="font-bold laptop:text-3xl"
-              ref={titleInput}
-              placeholder={t("placeHolderFormTitle")}
-              value={value}
-              onChange={updateValue}
-              onBlur={updateName}
-              {...getLocalizationAttribute()}
-            />
+            <div className="mb-4 my-2">
+              <ExpandingInput
+                id="formTitle"
+                wrapperClassName="w-full laptop:w-3/4 mt-2 laptop:mt-0 font-bold laptop:text-3xl"
+                className="font-bold laptop:text-3xl"
+                ref={titleInput}
+                placeholder={t("placeHolderFormTitle")}
+                value={value}
+                onChange={updateValue}
+                onBlur={updateName}
+                {...getLocalizationAttribute()}
+              />
+            </div>
             <p className="text-sm mb-4">{t("startFormIntro")}</p>
           </>
         }
diff --git a/components/form-builder/app/edit/elements/question/QuestionInput.tsx b/components/form-builder/app/edit/elements/question/QuestionInput.tsx
index a5cabb0ce9..97a5b7c41e 100644
--- a/components/form-builder/app/edit/elements/question/QuestionInput.tsx
+++ b/components/form-builder/app/edit/elements/question/QuestionInput.tsx
@@ -79,7 +79,7 @@ export const QuestionInput = ({
       id={`item-${id}`}
       name={`item${index}`}
       placeholder={t("question")}
-      wrapperClassName="w-full text-base"
+      wrapperClassName="w-full font-bold text-base"
       className="font-bold text-base"
       value={value}
       describedBy={describedById ?? undefined}
diff --git a/components/form-builder/app/shared/ExpandingInput.tsx b/components/form-builder/app/shared/ExpandingInput.tsx
index c9ede60be4..92a2918f3b 100644
--- a/components/form-builder/app/shared/ExpandingInput.tsx
+++ b/components/form-builder/app/shared/ExpandingInput.tsx
@@ -36,12 +36,15 @@ const ExpandingInput = React.forwardRef<Ref, Props>((props, ref) => {
   } = props;
 
   return (
-    <div className={`input-sizer stacked ${wrapperClassName}`} data-value={value}>
+    <div
+      className={`input-sizer stacked border-solid border-black border-b-1.5 ${wrapperClassName}`}
+      data-value={value}
+    >
       <textarea
         rows={1}
         maxLength={2000}
         id={id}
-        className={`border-b-1.5 border-black-default border-solid focus:bg-gray-default focus:outline-0 !font-sans ${className}`}
+        className={` focus:bg-gray-default focus:outline-0 !font-sans ${className} overflow-y-visible`}
         name={name}
         aria-describedby={describedBy}
         aria-invalid={isInvalid ? true : false}
diff --git a/components/form-builder/app/translate/Translate.tsx b/components/form-builder/app/translate/Translate.tsx
index 6e4bd30918..9859cdbdd8 100644
--- a/components/form-builder/app/translate/Translate.tsx
+++ b/components/form-builder/app/translate/Translate.tsx
@@ -135,11 +135,10 @@ export const Translate = () => {
                 <LanguageLabel id="form-title-en-language" lang={primaryLanguage}>
                   <>{t(primaryLanguage)}</>
                 </LanguageLabel>
-                <input
+                <textarea
                   className="w-full p-4 h-full focus:outline-blue-focus"
                   id="form-title-en"
                   aria-describedby="form-title-en-language"
-                  type="text"
                   value={form[localizeField(LocalizedFormProperties.TITLE, primaryLanguage)]}
                   onChange={(e) => {
                     updateField(
@@ -157,11 +156,10 @@ export const Translate = () => {
                 <LanguageLabel id="form-title-fr-language" lang={secondaryLanguage}>
                   <>{t(secondaryLanguage)}</>
                 </LanguageLabel>
-                <input
+                <textarea
                   className="w-full p-4 h-full focus:outline-blue-focus"
                   id="form-title-fr"
                   aria-describedby="form-title-fr-language"
-                  type="text"
                   value={form[localizeField(LocalizedFormProperties.TITLE, secondaryLanguage)]}
                   onChange={(e) => {
                     updateField(
diff --git a/styles/_form-builder.scss b/styles/_form-builder.scss
index c16ce3a362..491c232883 100644
--- a/styles/_form-builder.scss
+++ b/styles/_form-builder.scss
@@ -6,6 +6,7 @@
   .input-sizer {
     display: inline-grid;
     vertical-align: top;
+    box-sizing: border-box;
 
     &.stacked {
       align-items: stretch;
@@ -21,6 +22,7 @@
       grid-area: 1 / 2;
       resize: none;
       appearance: none;
+      
       padding-top: 0.625rem;
       padding-bottom: 0.375rem;
       padding-left: 0.625rem;

From a3016537225d131381c06562c2c1c2d44170f4c4 Mon Sep 17 00:00:00 2001
From: Tim Arney <timarney@users.noreply.github.com>
Date: Fri, 5 May 2023 15:01:24 -0400
Subject: [PATCH 6/7] Use pathname for language toggle (#2058)

use pathname
---
 components/globals/LanguageToggle.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/components/globals/LanguageToggle.tsx b/components/globals/LanguageToggle.tsx
index ea842eb333..321b37d19a 100644
--- a/components/globals/LanguageToggle.tsx
+++ b/components/globals/LanguageToggle.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import { StyledLink } from "./StyledLink/StyledLink";
@@ -6,20 +6,11 @@ import { StyledLink } from "./StyledLink/StyledLink";
 const LanguageToggle = () => {
   const { t, i18n } = useTranslation("common");
   const locale = i18n.language;
-  const loading = useRef(true);
-  const { isReady, asPath } = useRouter();
-
-  useEffect(() => {
-    if (isReady) {
-      loading.current = false;
-    }
-  }, [isReady]);
-
-  if (loading.current) return null;
+  const { pathname } = useRouter();
 
   return (
     <StyledLink
-      href={asPath}
+      href={pathname}
       className="text-base text-right"
       locale={locale === "en" ? "fr" : "en"}
       ariaLabel={`${t("lang-toggle")}: ${locale == "en" ? "Français" : "English"}`}

From de0850ebe02251362f85ad91e38e93b2fdf2f19c Mon Sep 17 00:00:00 2001
From: Bryan Robitaille <bryan.robitaille.work@gmail.com>
Date: Fri, 5 May 2023 15:23:39 -0400
Subject: [PATCH 7/7] Bump sem version + changelog

---
 CHANGELOG.md | 7 +++++++
 VERSION      | 2 +-
 package.json | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d37556dbdb..54b568d5a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.4] 2023-05-05
+
+### Fixed
+
+- Expanding question inputs in form builder
+- Language toggle not appearing on first page visit
+
 ## [3.0.3] 2023-05-03
 
 ### Fixed
diff --git a/VERSION b/VERSION
index 75a22a26ac..b0f2dcb32f 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-3.0.3
+3.0.4
diff --git a/package.json b/package.json
index e29f632679..53e23a064c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gcforms",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "private": true,
   "prisma": {
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seeds/seed.ts --environment=development"