From 95b5c0ef291d8dabc2723b61e74bc9235d3a13c3 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:10:27 -0700
Subject: [PATCH 01/13] Update FormViewerMultiUpload.vue

quick fix to missing module
---
 app/frontend/src/components/designer/FormViewerMultiUpload.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/frontend/src/components/designer/FormViewerMultiUpload.vue b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
index 3441c86c4..8e1d422a3 100644
--- a/app/frontend/src/components/designer/FormViewerMultiUpload.vue
+++ b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapState } from 'pinia';
-import { Formio } from '@formio/vue';
+import { Formio, Utils } from '@formio/vue';
 
 import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
 import { i18n } from '~/internationalization';

From d47ef14afd2c25997b553b357960c7682f5710cd Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:38:09 -0700
Subject: [PATCH 02/13] Update FormViewerMultiUpload.vue

Added lodash and fixed missing error reference
---
 app/frontend/src/components/designer/FormViewerMultiUpload.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/frontend/src/components/designer/FormViewerMultiUpload.vue b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
index 8e1d422a3..4a638e021 100644
--- a/app/frontend/src/components/designer/FormViewerMultiUpload.vue
+++ b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'lodash';
 import { mapActions, mapState } from 'pinia';
 import { Formio, Utils } from '@formio/vue';
 
@@ -70,7 +71,7 @@ export default {
     ...mapState(useFormStore, ['isRTL', 'lang']),
 
     txt_colour() {
-      if (!this.error) return 'success-text';
+      if (!this.response.error) return 'success-text';
       else return 'fail-text';
     },
     fileSize() {

From 35ab54257a1813dee92fc71f7f1c06b3bcc99d3b Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:59:27 -0700
Subject: [PATCH 03/13] Fixed router navigation translation

Translations are seemingly broken when used outside of a Vue component and can't be used in a stage like the beforeEnter router guard. To circumnavigate this, I've kept the locale inside of the router guard, but moved the translation into the Alert and Error views. Even if the message is already translated, it will just ignore it.
---
 app/frontend/package-lock.json                |  40 +++----
 app/frontend/package.json                     |   6 +-
 .../components/base/BaseNotificationBar.vue   |  14 ++-
 .../src/components/bcgov/BCGovAlertBanner.vue |  11 +-
 .../src/internationalization/index.js         |   1 +
 app/frontend/src/router.js                    | 110 +----------------
 app/frontend/src/store/notification.js        |  25 ++--
 app/frontend/src/utils/permissionUtils.js     | 112 ++++++++++++++++++
 app/frontend/src/views/Error.vue              |  19 ++-
 9 files changed, 191 insertions(+), 147 deletions(-)

diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index aa17071b5..14ef6771d 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -10,11 +10,11 @@
       "dependencies": {
         "@bcgov/bc-sans": "^1.0.1",
         "@formio/vue": "github:formio/vue#v5.0.0-rc.2",
-        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "axios": "^1.4.0",
-        "bootstrap-scss": "^5.2.3",
+        "bootstrap-scss": "^5.3.1",
         "crypto-js": "^4.1.1",
         "fast-json-patch": "^3.1.1",
         "font-awesome": "^4.7.0",
@@ -554,33 +554,33 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
       "hasInstallScript": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
-      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
       "hasInstallScript": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
       },
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
       "hasInstallScript": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
       },
       "engines": {
         "node": ">=6"
@@ -1210,9 +1210,9 @@
       "dev": true
     },
     "node_modules/acorn": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
-      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -1427,9 +1427,9 @@
       "dev": true
     },
     "node_modules/bootstrap-scss": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-scss/-/bootstrap-scss-5.3.0.tgz",
-      "integrity": "sha512-LPiZOyp7tfRCcwGt1Go/kOx6OGnnm1TENoDurx8XC3SixRT4d5ojukN6qEwWGDwAYAn3RqqHfym4WbNW653mfQ=="
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-scss/-/bootstrap-scss-5.3.1.tgz",
+      "integrity": "sha512-WEhEFkHTSjaeA7gQ6Eizn50nDM+q8nzaQX52yoQMrnqwY/0rhE+VvC6sD2XKI8KFAxQpK0Jbrg/ggQ6smaXsCA=="
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
diff --git a/app/frontend/package.json b/app/frontend/package.json
index 45b6365a1..2f093a740 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -28,11 +28,11 @@
   "dependencies": {
     "@bcgov/bc-sans": "^1.0.1",
     "@formio/vue": "github:formio/vue#v5.0.0-rc.2",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "axios": "^1.4.0",
-    "bootstrap-scss": "^5.2.3",
+    "bootstrap-scss": "^5.3.1",
     "crypto-js": "^4.1.1",
     "fast-json-patch": "^3.1.1",
     "font-awesome": "^4.7.0",
diff --git a/app/frontend/src/components/base/BaseNotificationBar.vue b/app/frontend/src/components/base/BaseNotificationBar.vue
index 0578f3276..88fc404dd 100644
--- a/app/frontend/src/components/base/BaseNotificationBar.vue
+++ b/app/frontend/src/components/base/BaseNotificationBar.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState } from 'pinia';
 
+import { i18n } from '~/internationalization';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
@@ -19,6 +20,17 @@ export default {
   computed: {
     ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
   },
+  created() {
+    if (this.notification.consoleError) {
+      // eslint-disable-next-line no-console
+      console.error(
+        i18n.t(
+          this.notification.consoleError.text,
+          this.notification.consoleError.options
+        )
+      );
+    }
+  },
   mounted() {
     const notificationStore = useNotificationStore();
     this.timeout = setTimeout(
@@ -52,7 +64,7 @@ export default {
     prominent
     closable
     :title="notification.title"
-    :text="notification.text"
+    :text="$t(notification.text)"
     @update:model-value="alertClosed"
   ></v-alert>
 </template>
diff --git a/app/frontend/src/components/bcgov/BCGovAlertBanner.vue b/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
index c6a319082..0b34cc8a3 100644
--- a/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
+++ b/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapActions } from 'pinia';
 import { i18n } from '~/internationalization';
 
 import { useNotificationStore } from '~/store/notification';
@@ -16,14 +17,15 @@ export default {
     },
     text: {
       type: String,
-      default: i18n.t('trans.bcGovAlertBanner.defaultErrMsg'),
+      default: 'trans.bcGovAlertBanner.defaultErrMsg',
     },
     type: {
       type: String,
-      default: i18n.t('trans.bcGovAlertBanner.error'),
+      default: NotificationTypes.ERROR.type,
     },
   },
   computed: {
+    ...mapActions(useNotificationStore, ['deleteNotification']),
     notificationType() {
       switch (this.type) {
         case NotificationTypes.ERROR.type:
@@ -39,13 +41,12 @@ export default {
       }
     },
     TEXT() {
-      return this.text.replace(/(<([^>]+)>)/gi, '');
+      return i18n.t(this.text).replace(/(<([^>]+)>)/gi, '');
     },
   },
   methods: {
     onClose() {
-      const notificationStore = useNotificationStore();
-      notificationStore.deleteNotification({ id: this.id });
+      this.deleteNotification({ id: this.id });
     },
   },
 };
diff --git a/app/frontend/src/internationalization/index.js b/app/frontend/src/internationalization/index.js
index d6d183f80..4b9148210 100644
--- a/app/frontend/src/internationalization/index.js
+++ b/app/frontend/src/internationalization/index.js
@@ -46,6 +46,7 @@ const instance = createI18n({
   locale: 'en', // set locale
   fallbackLocale: 'en',
   messages, // set locale messages
+  globalInjection: true,
 });
 
 export default instance;
diff --git a/app/frontend/src/router.js b/app/frontend/src/router.js
index ca891c9d7..b596a0bb7 100644
--- a/app/frontend/src/router.js
+++ b/app/frontend/src/router.js
@@ -1,12 +1,10 @@
 import NProgress from 'nprogress';
 import { createRouter, createWebHistory } from 'vue-router';
 
-import i18n from '~/internationalization';
-import { formService } from '~/services';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
-import { useNotificationStore } from '~/store/notification';
-import { IdentityMode, IdentityProviders } from '~/utils/constants';
+import { IdentityProviders } from '~/utils/constants';
+import { preFlightAuth } from '~/utils/permissionUtils';
 
 let isFirstTransition = true;
 let router = undefined;
@@ -19,110 +17,6 @@ let router = undefined;
  */
 const createProps = (route) => ({ ...route.query, ...route.params });
 
-/**
- * @function getErrorMessage
- * Gets the message to display for preflight errors. Expand this to add
- * friendlier messages for other errors.
- * @param {Object} options - The Object containing preflight request details.
- * @param {Error} error - The error that was produced.
- * @returns {string|undefined} - The error message to display, or undefined to
- *    use the default message.
- */
-function getErrorMessage(options, error) {
-  let errorMessage = undefined;
-  if (options.formId) {
-    const status = error?.response?.status;
-    if (status === 404 || status === 422) {
-      errorMessage = i18n.tc('trans.permissionUtils.formNotAvailable');
-    }
-  }
-  return errorMessage;
-}
-
-/**
- * @function preFlightAuth
- * Determines whether to enter a route based on user authentication state and idpHint
- * @param {Object} options Object containing either a formId or submissionId attribute
- * @param {Object} next The callback function
- */
-export async function preFlightAuth(options = {}, next) {
-  const notificationStore = useNotificationStore();
-  // Support lambda functions (Consider making them util functions?)
-  const getIdpHint = (values) => {
-    return Array.isArray(values) && values.length ? values[0] : undefined;
-  };
-  const isValidIdp = (value) =>
-    Object.values(IdentityProviders).includes(value);
-
-  // Determine current form or submission idpHint if available
-  let idpHint = undefined;
-  try {
-    if (options.formId) {
-      const { data } = await formService.readFormOptions(options.formId);
-      idpHint = getIdpHint(data.idpHints);
-    } else if (options.submissionId) {
-      const { data } = await formService.getSubmissionOptions(
-        options.submissionId
-      );
-      idpHint = getIdpHint(data.form.idpHints);
-    } else {
-      throw new Error(
-        i18n.tc('trans.permissionUtils.missingFormIdAndSubmssId')
-      );
-    }
-  } catch (error) {
-    // Halt user with error page, use alertNavigate for "friendly" messages.
-    const message = getErrorMessage(options, error);
-    if (message) {
-      // Don't display the 'An error has occurred...' popup notification.
-      notificationStore.alertNavigate(
-        'error',
-        i18n.tc('trans.permissionUtils.formNotAvailable')
-      );
-    } else {
-      notificationStore.addNotification({
-        text: i18n.tc('trans.permissionUtils.loadingFormErrMsg'),
-        consoleError: i18n.tc('trans.permissionUtils.loadingForm', {
-          options: options,
-          error: error,
-        }),
-      });
-      notificationStore.errorNavigate();
-    }
-
-    return; // Short circuit this function - no point executing further logic
-  }
-
-  const authStore = useAuthStore();
-
-  if (authStore.authenticated) {
-    const userIdp = authStore.identityProvider;
-
-    if (idpHint === IdentityMode.PUBLIC || !idpHint) {
-      next(); // Permit navigation if public or team form
-    } else if (isValidIdp(idpHint) && userIdp === idpHint) {
-      next(); // Permit navigation if idps match
-    } else {
-      const msg = i18n.t('trans.permissionUtils.idpHintMsg', {
-        idpHint: idpHint.toUpperCase(),
-      });
-      notificationStore.addNotification({
-        text: msg,
-        consoleError: msg,
-      });
-      notificationStore.errorNavigate(msg);
-    }
-  } else {
-    if (idpHint === IdentityMode.PUBLIC) {
-      next(); // Permit navigation if public form
-    } else if (isValidIdp(idpHint)) {
-      authStore.login(idpHint); // Force login flow with specified idpHint
-    } else {
-      authStore.login(); // Force login flow with user choice
-    }
-  }
-}
-
 /**
  * @function getRouter
  * Constructs and returns a Vue Router object
diff --git a/app/frontend/src/store/notification.js b/app/frontend/src/store/notification.js
index 189ec05d4..0ead34f27 100644
--- a/app/frontend/src/store/notification.js
+++ b/app/frontend/src/store/notification.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { useRouter } from 'vue-router';
+import getRouter from '~/router';
 
 import { NotificationTypes } from '~/utils/constants';
 
@@ -10,15 +10,23 @@ export const useNotificationStore = defineStore('notification', {
   }),
   getters: {},
   actions: {
+    /*
+     * Navigates to the error view
+     * @param msg The locale message
+     */
     errorNavigate(msg) {
-      const router = useRouter();
+      const router = getRouter();
       router.replace({
         name: 'Error',
-        params: { msg },
+        query: { text: typeof msg === 'object' ? JSON.stringify(msg) : msg },
       });
     },
+    /*
+     * Navigates to the alert banner view
+     * @param msg The locale message
+     */
     alertNavigate(type, msg) {
-      const router = useRouter();
+      const router = getRouter();
       router.replace({
         name: 'Alert',
         params: {
@@ -27,12 +35,15 @@ export const useNotificationStore = defineStore('notification', {
         },
       });
     },
+    /*
+     * We add notifications here that aren't translated. When calling
+     * this function, you need to send in the locale message. We translate
+     * it in the final component.
+     */
     addNotification(notification) {
-      if (notification.consoleError) {
-        console.error(notification.consoleError); // eslint-disable-line no-console
-      }
       if (!notification.type)
         notification = { ...notification, ...NotificationTypes.ERROR };
+
       this.notifications.push({
         ...notification,
         id: this.notificationId++,
diff --git a/app/frontend/src/utils/permissionUtils.js b/app/frontend/src/utils/permissionUtils.js
index 3693a7219..0dc0413bd 100644
--- a/app/frontend/src/utils/permissionUtils.js
+++ b/app/frontend/src/utils/permissionUtils.js
@@ -1,8 +1,12 @@
+import { formService } from '~/services';
+import { useAuthStore } from '~/store/auth';
+import { useNotificationStore } from '~/store/notification';
 import {
   FormPermissions,
   FormManagePermissions,
   IdentityMode,
   IdentityProviders,
+  NotificationTypes,
 } from '~/utils/constants';
 
 //
@@ -56,6 +60,114 @@ export function checkSubmissionView(userForm) {
   );
 }
 
+/**
+ * @function getErrorMessage
+ * Gets the message to display for preflight errors. Expand this to add
+ * friendlier messages for other errors.
+ * @param {Object} options - The Object containing preflight request details.
+ * @param {Error} error - The error that was produced.
+ * @returns {string|undefined} - The error message to display, or undefined to
+ *    use the default message.
+ */
+function getErrorMessage(options, error) {
+  let errorMessage = undefined;
+  if (options.formId) {
+    const status = error?.response?.status;
+    if (status === 404 || status === 422) {
+      errorMessage = 'trans.permissionUtils.formNotAvailable';
+    }
+  }
+  return errorMessage;
+}
+
+/**
+ * @function preFlightAuth
+ * Determines whether to enter a route based on user authentication state and idpHint
+ * @param {Object} options Object containing either a formId or submissionId attribute
+ * @param {Object} next The callback function
+ */
+export async function preFlightAuth(options = {}, next) {
+  const notificationStore = useNotificationStore();
+  // Support lambda functions (Consider making them util functions?)
+  const getIdpHint = (values) => {
+    return Array.isArray(values) && values.length ? values[0] : undefined;
+  };
+  const isValidIdp = (value) =>
+    Object.values(IdentityProviders).includes(value);
+
+  // Determine current form or submission idpHint if available
+  let idpHint = undefined;
+  try {
+    if (options.formId) {
+      const { data } = await formService.readFormOptions(options.formId);
+      idpHint = getIdpHint(data.idpHints);
+    } else if (options.submissionId) {
+      const { data } = await formService.getSubmissionOptions(
+        options.submissionId
+      );
+      idpHint = getIdpHint(data.form.idpHints);
+    } else {
+      throw new Error('trans.permissionUtils.missingFormIdAndSubmssId');
+    }
+  } catch (error) {
+    // Halt user with error page, use alertNavigate for "friendly" messages.
+    const message = getErrorMessage(options, error);
+    if (message) {
+      // Don't display the 'An error has occurred...' popup notification.
+      notificationStore.alertNavigate(
+        NotificationTypes.ERROR.type,
+        'trans.permissionUtils.formNotAvailable'
+      );
+    } else {
+      notificationStore.addNotification({
+        text: 'trans.permissionUtils.loadingFormErrMsg',
+        consoleError: {
+          text: 'trans.permissionUtils.loadingForm',
+          options: {
+            options,
+            error,
+          },
+        },
+      });
+      notificationStore.errorNavigate();
+    }
+
+    return; // Short circuit this function - no point executing further logic
+  }
+
+  const authStore = useAuthStore();
+
+  if (authStore.authenticated) {
+    const userIdp = authStore.identityProvider;
+
+    if (idpHint === IdentityMode.PUBLIC || !idpHint) {
+      next(); // Permit navigation if public or team form
+    } else if (isValidIdp(idpHint) && userIdp === idpHint) {
+      next(); // Permit navigation if idps match
+    } else {
+      const msg = {
+        text: 'trans.permissionUtils.idpHintMsg',
+        options: {
+          idpHint: idpHint.toUpperCase(),
+        },
+      };
+      notificationStore.addNotification({
+        ...msg,
+        consoleError: msg,
+      });
+      notificationStore.errorNavigate(msg);
+    }
+  } else {
+    if (idpHint === IdentityMode.PUBLIC) {
+      next(); // Permit navigation if public form
+    } else if (isValidIdp(idpHint)) {
+      authStore.login(idpHint); // Force login flow with specified idpHint
+    } else {
+      authStore.login(); // Force login flow with user choice
+    }
+  }
+}
+
 /**
  * @function isFormPublic
  * Returns true for a form object if this form can be viewed by public users
diff --git a/app/frontend/src/views/Error.vue b/app/frontend/src/views/Error.vue
index d7ec8cb14..b4c5a40b3 100644
--- a/app/frontend/src/views/Error.vue
+++ b/app/frontend/src/views/Error.vue
@@ -3,17 +3,30 @@ import { mapActions, mapState } from 'pinia';
 import { i18n } from '~/internationalization';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
 
 export default {
   props: {
-    msg: {
-      default: i18n.t('trans.error.somethingWentWrong'),
+    text: {
+      default: 'trans.error.somethingWentWrong',
       type: String,
     },
   },
   computed: {
     ...mapState(useAuthStore, ['authenticated', 'ready']),
     ...mapState(useFormStore, ['lang']),
+    ...mapActions(useNotificationStore, ['addNotification']),
+    TEXT() {
+      let text = this.text;
+      try {
+        text = JSON.parse(text);
+        text = i18n.t(text.text, text.options);
+      } catch {
+        // Can't parse JSON so it's probably already a locale
+        text = i18n.t(text);
+      }
+      return text;
+    },
   },
   methods: mapActions(useAuthStore, ['logout']),
 };
@@ -21,7 +34,7 @@ export default {
 
 <template>
   <v-container class="text-center">
-    <h1 class="my-6">{{ msg }}</h1>
+    <h1 class="my-6">{{ TEXT }}</h1>
     <div v-if="ready" class="d-print-none">
       <v-btn v-if="authenticated" color="primary" size="large" @click="logout">
         <span :lang="lang">{{ $t('trans.error.logout') }}</span>

From 13d109fb7856869a1b855a1cd4eaca828fade1e2 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:24:54 -0700
Subject: [PATCH 04/13] Fixed some tests

Error and BCGovAlertBanner test and view/components fixed. Added a prop to check if the message needs to be translated.
---
 app/frontend/src/components/admin/AddOwner.vue       |  4 ++--
 .../src/components/bcgov/BCGovAlertBanner.vue        |  9 +++++++--
 .../src/internationalization/trans/chefs/en/en.json  |  3 +++
 app/frontend/src/views/Error.vue                     | 12 +++++++++---
 .../unit/components/bcgov/BCGovAlertBanner.spec.js   |  4 ++--
 .../unit/store/modules/notifications.actions.spec.js | 12 +-----------
 app/frontend/tests/unit/views/Error.spec.js          |  4 ++--
 7 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/app/frontend/src/components/admin/AddOwner.vue b/app/frontend/src/components/admin/AddOwner.vue
index 86962e5f1..99be2c662 100644
--- a/app/frontend/src/components/admin/AddOwner.vue
+++ b/app/frontend/src/components/admin/AddOwner.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapActions } from 'pinia';
+import { mapActions, mapState } from 'pinia';
 import { version as uuidVersion, validate as uuidValidate } from 'uuid';
 
 import { useAdminStore } from '~/store/admin';
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     ...mapActions(useAdminStore, ['addFormUser', 'readRoles']),
-    ...mapActions(useFormStore, ['lang']),
+    ...mapState(useFormStore, ['lang']),
     async addOwner() {
       if (this.$refs.addUserForm.validate()) {
         await this.addFormUser({
diff --git a/app/frontend/src/components/bcgov/BCGovAlertBanner.vue b/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
index 0b34cc8a3..b6848a871 100644
--- a/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
+++ b/app/frontend/src/components/bcgov/BCGovAlertBanner.vue
@@ -23,9 +23,12 @@ export default {
       type: String,
       default: NotificationTypes.ERROR.type,
     },
+    translate: {
+      default: false,
+      type: Boolean,
+    },
   },
   computed: {
-    ...mapActions(useNotificationStore, ['deleteNotification']),
     notificationType() {
       switch (this.type) {
         case NotificationTypes.ERROR.type:
@@ -41,10 +44,12 @@ export default {
       }
     },
     TEXT() {
-      return i18n.t(this.text).replace(/(<([^>]+)>)/gi, '');
+      const msg = this.translate ? i18n.t(this.text) : this.text;
+      return msg.replace(/(<([^>]+)>)/gi, '');
     },
   },
   methods: {
+    ...mapActions(useNotificationStore, ['deleteNotification']),
     onClose() {
       this.deleteNotification({ id: this.id });
     },
diff --git a/app/frontend/src/internationalization/trans/chefs/en/en.json b/app/frontend/src/internationalization/trans/chefs/en/en.json
index 452d37a66..d58398793 100644
--- a/app/frontend/src/internationalization/trans/chefs/en/en.json
+++ b/app/frontend/src/internationalization/trans/chefs/en/en.json
@@ -969,5 +969,8 @@
       "history": "HISTORY",
       "user": "User"
     }
+  },
+  "test": {
+    "customError": "This is a custom error message for testing."
   }
 }
\ No newline at end of file
diff --git a/app/frontend/src/views/Error.vue b/app/frontend/src/views/Error.vue
index b4c5a40b3..567fb1121 100644
--- a/app/frontend/src/views/Error.vue
+++ b/app/frontend/src/views/Error.vue
@@ -11,11 +11,14 @@ export default {
       default: 'trans.error.somethingWentWrong',
       type: String,
     },
+    translate: {
+      default: false,
+      type: Boolean,
+    },
   },
   computed: {
     ...mapState(useAuthStore, ['authenticated', 'ready']),
     ...mapState(useFormStore, ['lang']),
-    ...mapActions(useNotificationStore, ['addNotification']),
     TEXT() {
       let text = this.text;
       try {
@@ -23,12 +26,15 @@ export default {
         text = i18n.t(text.text, text.options);
       } catch {
         // Can't parse JSON so it's probably already a locale
-        text = i18n.t(text);
+        if (this.translate) text = i18n.t(text);
       }
       return text;
     },
   },
-  methods: mapActions(useAuthStore, ['logout']),
+  methods: {
+    ...mapActions(useAuthStore, ['logout']),
+    ...mapActions(useNotificationStore, ['addNotification']),
+  },
 };
 </script>
 
diff --git a/app/frontend/tests/unit/components/bcgov/BCGovAlertBanner.spec.js b/app/frontend/tests/unit/components/bcgov/BCGovAlertBanner.spec.js
index e72645991..8ab59c095 100644
--- a/app/frontend/tests/unit/components/bcgov/BCGovAlertBanner.spec.js
+++ b/app/frontend/tests/unit/components/bcgov/BCGovAlertBanner.spec.js
@@ -36,7 +36,7 @@ describe('BCGovAlertBanner.vue', () => {
     await flushPromises();
 
     expect(wrapper.html()).toContain(NotificationTypes.ERROR.type);
-    expect(wrapper.html()).toContain('Error');
+    expect(wrapper.html()).toContain('defaultErrMsg');
   });
 
   it('renders with a custom error message', async () => {
@@ -50,7 +50,7 @@ describe('BCGovAlertBanner.vue', () => {
         text: message,
       },
       global: {
-        plugins: [router],
+        plugins: [pinia, router],
       },
     });
 
diff --git a/app/frontend/tests/unit/store/modules/notifications.actions.spec.js b/app/frontend/tests/unit/store/modules/notifications.actions.spec.js
index 1bc623597..32513bf8d 100644
--- a/app/frontend/tests/unit/store/modules/notifications.actions.spec.js
+++ b/app/frontend/tests/unit/store/modules/notifications.actions.spec.js
@@ -1,18 +1,11 @@
 import { setActivePinia, createPinia } from 'pinia';
-import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useNotificationStore } from '~/store/notification';
 import { NotificationTypes } from '~/utils/constants';
 
 describe('notifications actions', () => {
-  const mockConsoleError = vi.spyOn(console, 'error');
-
   beforeEach(() => {
     setActivePinia(createPinia());
-    mockConsoleError.mockReset();
-  });
-
-  afterAll(() => {
-    mockConsoleError.mockRestore();
   });
 
   it('addNotification should add notification', () => {
@@ -23,7 +16,6 @@ describe('notifications actions', () => {
     };
     const addNotificationSpy = vi.spyOn(mockStore, 'addNotification');
     mockStore.addNotification(obj);
-    expect(mockConsoleError).toHaveBeenCalledTimes(1);
     expect(addNotificationSpy).toHaveBeenCalledTimes(1);
     expect(mockStore.notifications).toEqual([
       {
@@ -46,7 +38,6 @@ describe('notifications actions', () => {
 
     const addNotificationSpy = vi.spyOn(mockStore, 'addNotification');
     mockStore.addNotification(obj);
-    expect(mockConsoleError).toHaveBeenCalledTimes(1);
     expect(addNotificationSpy).toHaveBeenCalledTimes(1);
     expect(mockStore.notifications).toEqual([
       {
@@ -66,7 +57,6 @@ describe('notifications actions', () => {
     };
     const addNotificationSpy = vi.spyOn(mockStore, 'addNotification');
     mockStore.addNotification(obj);
-    expect(mockConsoleError).toHaveBeenCalledTimes(0);
     expect(addNotificationSpy).toHaveBeenCalledTimes(1);
     expect(mockStore.notifications).toEqual([
       {
diff --git a/app/frontend/tests/unit/views/Error.spec.js b/app/frontend/tests/unit/views/Error.spec.js
index 2a7ee3255..3c1a4ca66 100644
--- a/app/frontend/tests/unit/views/Error.spec.js
+++ b/app/frontend/tests/unit/views/Error.spec.js
@@ -29,13 +29,13 @@ describe('Error.vue', () => {
 
     await nextTick();
 
-    expect(wrapper.text()).toMatch('Error: Something went wrong... :(');
+    expect(wrapper.text()).toMatch('trans.error.somethingWentWrong');
   });
 
   it('renders with a custom error message', async () => {
     const wrapper = mount(Error, {
       props: {
-        msg: 'Custom Error Message',
+        text: 'Custom Error Message',
       },
       global: {
         plugins: [pinia],

From 31cfbaa0bb80434f79d0ecf6d54f6b7af8bebf06 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Wed, 20 Sep 2023 14:36:18 -0700
Subject: [PATCH 05/13] Some fixes and sync with main

BaseNotificationBar now allows for translating an unformatted locale message
SubmissionsTable and MySubmissionsTable synced and search is working
---
 .../components/base/BaseNotificationBar.vue   | 15 ++++---
 .../src/components/forms/SubmissionsTable.vue | 37 +++++++---------
 .../forms/submission/MySubmissionsTable.vue   | 43 ++++++++++---------
 app/frontend/src/store/form.js                | 18 +++++++-
 4 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/app/frontend/src/components/base/BaseNotificationBar.vue b/app/frontend/src/components/base/BaseNotificationBar.vue
index 88fc404dd..f2d41b462 100644
--- a/app/frontend/src/components/base/BaseNotificationBar.vue
+++ b/app/frontend/src/components/base/BaseNotificationBar.vue
@@ -20,18 +20,19 @@ export default {
   computed: {
     ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
   },
-  created() {
+  mounted() {
     if (this.notification.consoleError) {
       // eslint-disable-next-line no-console
       console.error(
-        i18n.t(
-          this.notification.consoleError.text,
-          this.notification.consoleError.options
-        )
+        typeof this.notification.consoleError === 'string' ||
+          this.notification.consoleError instanceof String
+          ? this.notification.consoleError
+          : i18n.t(
+              this.notification.consoleError.text,
+              this.notification.consoleError.options
+            )
       );
     }
-  },
-  mounted() {
     const notificationStore = useNotificationStore();
     this.timeout = setTimeout(
       () => notificationStore.deleteNotification(this.notification),
diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
index 5052b141b..dbcbef672 100644
--- a/app/frontend/src/components/forms/SubmissionsTable.vue
+++ b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -25,6 +25,7 @@ export default {
     return {
       // Show only items for the current logged in user
       currentUserOnly: false,
+      debounceInput: null,
       deleteItem: {},
       // Show only deleted items
       deletedOnly: false,
@@ -44,7 +45,6 @@ export default {
       loading: true,
       restoreItem: {},
       search: '',
-      searchEnabled: false,
       selectedSubmissions: [],
       serverItems: [],
       showColumnsDialog: false,
@@ -318,23 +318,10 @@ export default {
     },
     //------------------------ END FILTER COLUMNS
   },
-  watch: {
-    async search(newSearch, oldSearch) {
-      this.searchEnabled = true;
-      if (newSearch !== oldSearch) {
-        if (newSearch === '') {
-          this.searchEnabled = false;
-          await this.getSubmissionData();
-        } else {
-          _.debounce(async () => {
-            await this.getSubmissionData();
-          }, 300);
-          this.refreshSubmissions();
-        }
-      }
-    },
-  },
   mounted() {
+    this.debounceInput = _.debounce(async () => {
+      this.refreshSubmissions();
+    }, 300);
     this.refreshSubmissions();
   },
   methods: {
@@ -378,7 +365,11 @@ export default {
         this.sortBy = {};
       }
       this.itemsPerPage = itemsPerPage;
-      await this.getSubmissionData();
+      if (this.search === '') {
+        await this.getSubmissionData();
+      } else {
+        this.debounceInput();
+      }
     },
     async getSubmissionData() {
       let criteria = {
@@ -388,7 +379,7 @@ export default {
         filterformSubmissionStatusCode: true,
         sortBy: this.sortBy,
         search: this.search,
-        searchEnabled: this.searchEnabled,
+        searchEnabled: this.search.length > 0,
         createdAt: Object.values({
           minDate:
             this.userFormPreferences &&
@@ -469,7 +460,6 @@ export default {
     },
     async refreshSubmissions() {
       this.loading = true;
-      this.page = 0;
       Promise.all([
         this.getFormRolesForUser(this.formId),
         this.getFormPermissionsForUser(this.formId),
@@ -552,6 +542,9 @@ export default {
 
       await this.populateSubmissionsTable();
     },
+    handleSearch(value) {
+      this.search = value;
+    },
   },
 };
 </script>
@@ -660,7 +653,6 @@ export default {
         <!-- search input -->
         <div class="submissions-search">
           <v-text-field
-            v-model="search"
             density="compact"
             variant="underlined"
             :label="$t('trans.submissionsTable.search')"
@@ -670,6 +662,7 @@ export default {
             class="pb-5"
             :class="{ label: isRTL }"
             :lang="lang"
+            @update:modelValue="handleSearch"
           ></v-text-field>
         </div>
       </div>
@@ -689,7 +682,7 @@ export default {
       :loading="loading"
       :loading-text="$t('trans.submissionsTable.loadingText')"
       :no-data-text="
-        searchEnabled
+        search.length > 0
           ? $t('trans.submissionsTable.noMachingRecordText')
           : $t('trans.submissionsTable.noDataText')
       "
diff --git a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
index 2acb5d345..39b654b04 100644
--- a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
+++ b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'lodash';
 import { mapActions, mapState } from 'pinia';
 
 import { i18n } from '~/internationalization';
@@ -19,6 +20,7 @@ export default {
   },
   data() {
     return {
+      debounceInput: null,
       filterData: [],
       filterIgnore: [
         {
@@ -31,9 +33,8 @@ export default {
       headers: [],
       itemsPerPage: 10,
       loading: true,
-      page: 0,
+      page: 1,
       search: '',
-      searchEnabled: false,
       serverItems: [],
       sortBy: {},
       showColumnsDialog: false,
@@ -190,21 +191,6 @@ export default {
       return this.form && this.form.enableCopyExistingSubmission;
     },
   },
-  watch: {
-    async search(newSearch, oldSearch) {
-      this.searchEnabled = true;
-      if (newSearch !== oldSearch) {
-        if (newSearch === '') {
-          this.searchEnabled = false;
-          await this.populateSubmissionsTable();
-        } else {
-          _.debounce(async () => {
-            await this.populateSubmissionsTable();
-          }, 300);
-        }
-      }
-    },
-  },
   async mounted() {
     await this.fetchForm(this.formId).then(async () => {
       await this.fetchFormFields({
@@ -213,6 +199,9 @@ export default {
       });
     });
     await this.populateSubmissionsTable();
+    this.debounceInput = _.debounce(async () => {
+      await this.populateSubmissionsTable();
+    }, 300);
   },
   methods: {
     ...mapActions(useFormStore, [
@@ -272,7 +261,11 @@ export default {
         this.sortBy = {};
       }
       this.itemsPerPage = itemsPerPage;
-      await this.populateSubmissionsTable();
+      if (this.search === '') {
+        await this.populateSubmissionsTable();
+      } else {
+        this.debounceInput();
+      }
     },
     async populateSubmissionsTable() {
       this.loading = true;
@@ -284,7 +277,7 @@ export default {
         itemsPerPage: this.itemsPerPage,
         sortBy: this.sortBy,
         search: this.search,
-        searchEnabled: this.searchEnabled,
+        searchEnabled: this.search.length > 0,
       });
       // Build up the list of forms for the table
       if (this.submissionList) {
@@ -323,6 +316,10 @@ export default {
       this.filterData = data;
       this.showColumnsDialog = false;
     },
+
+    handleSearch(value) {
+      this.search = value;
+    },
   },
 };
 </script>
@@ -390,7 +387,6 @@ export default {
       :class="isRTL ? 'float-left' : 'float-right'"
     >
       <v-text-field
-        v-model="search"
         density="compact"
         variant="underlined"
         :label="$t('trans.mySubmissionsTable.search')"
@@ -400,6 +396,7 @@ export default {
         class="pb-5"
         :class="{ label: isRTL }"
         :lang="lang"
+        @update:model-value="handleSearch"
       />
     </div>
 
@@ -414,7 +411,11 @@ export default {
       :search="search"
       :loading="loading"
       :loading-text="$t('trans.mySubmissionsTable.loadingText')"
-      :no-data-text="$t('trans.mySubmissionsTable.noDataText')"
+      :no-data-text="
+        search.length > 0
+          ? $t('trans.mySubmissionsTable.noMatchingRecordText')
+          : $t('trans.mySubmissionsTable.noDataText')
+      "
       :lang="lang"
       @update:options="updateTableOptions"
     >
diff --git a/app/frontend/src/store/form.js b/app/frontend/src/store/form.js
index b1a4f2f35..e436a00c6 100644
--- a/app/frontend/src/store/form.js
+++ b/app/frontend/src/store/form.js
@@ -525,7 +525,14 @@ export const useFormStore = defineStore('form', {
         });
       }
     },
-    async fetchFormCSVExportFields({ formId, type, draft, deleted, version }) {
+    async fetchFormCSVExportFields({
+      formId,
+      type,
+      draft,
+      deleted,
+      version,
+      singleRow,
+    }) {
       try {
         this.formFields = [];
         const { data } = await formService.readCSVExportFields(
@@ -533,7 +540,8 @@ export const useFormStore = defineStore('form', {
           type,
           draft,
           deleted,
-          version
+          version,
+          singleRow
         );
         this.formFields = data;
       } catch (error) {
@@ -560,6 +568,8 @@ export const useFormStore = defineStore('form', {
       itemsPerPage,
       filterformSubmissionStatusCode,
       sortBy: sortBy,
+      search: search,
+      searchEnabled: searchEnabled,
     }) {
       try {
         this.submissionList = [];
@@ -575,6 +585,8 @@ export const useFormStore = defineStore('form', {
               itemsPerPage: itemsPerPage,
               totalSubmissions: this.totalSubmissions,
               sortBy: sortBy,
+              search: search,
+              searchEnabled: searchEnabled,
             })
           : await formService.listSubmissions(formId, {
               deleted: deletedOnly,
@@ -586,6 +598,8 @@ export const useFormStore = defineStore('form', {
               itemsPerPage: itemsPerPage,
               totalSubmissions: this.totalSubmissions,
               sortBy: sortBy,
+              search: search,
+              searchEnabled: searchEnabled,
             });
         this.submissionList = response.data.results;
         this.totalSubmissions = response.data.total;

From d7017c5f802c7f12a20da9a824f72b859eb02e2e Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Mon, 25 Sep 2023 09:30:31 -0700
Subject: [PATCH 06/13] Form access validation and formio

Form.io CSS styling moved away from the component level and into the root style.scss file. This seems to fix our issue but is not what we used to do.
Unable to detect nested radio group in the form.idps for validation and there's no way to manually enforce a validation rules check. So when we detect a change in the idpType, we set the form idps ourselves and then change the userType twice to re-validate the radio group that is the parent.
---
 app/frontend/src/assets/scss/style.scss       |  2 ++
 .../src/components/designer/FormDesigner.vue  |  3 ---
 .../src/components/designer/FormViewer.vue    |  3 ---
 .../designer/settings/FormAccessSettings.vue  | 27 ++++++++++++++++---
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/frontend/src/assets/scss/style.scss b/app/frontend/src/assets/scss/style.scss
index e20cca29b..f677a6054 100644
--- a/app/frontend/src/assets/scss/style.scss
+++ b/app/frontend/src/assets/scss/style.scss
@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
 @import url('https://fonts.googleapis.com/css?family=Material+Icons');
 @import '@mdi/font/css/materialdesignicons.css';
+@import '~font-awesome/css/font-awesome.min.css';
+@import '~formiojs/dist/formio.builder.min.css';
 @import 'bootstrap-scss/bootstrap.scss'; // TODO: import this only for form designer/renderer formio components
 @import 'vue-json-pretty/lib/styles.css';
 
diff --git a/app/frontend/src/components/designer/FormDesigner.vue b/app/frontend/src/components/designer/FormDesigner.vue
index 85fd363c6..0ca7dfedf 100644
--- a/app/frontend/src/components/designer/FormDesigner.vue
+++ b/app/frontend/src/components/designer/FormDesigner.vue
@@ -778,9 +778,6 @@ export default {
 </template>
 
 <style lang="scss">
-@import '~font-awesome/css/font-awesome.min.css';
-@import '~formiojs/dist/formio.builder.min.css';
-
 /* disable router-link */
 .disabled-router {
   pointer-events: none;
diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
index 16b582bc0..f78e04add 100644
--- a/app/frontend/src/components/designer/FormViewer.vue
+++ b/app/frontend/src/components/designer/FormViewer.vue
@@ -1242,9 +1242,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import '~font-awesome/css/font-awesome.min.css';
-@import '~formiojs/dist/formio.builder.min.css';
-
 .form-wrapper :deep(.formio-form) {
   &.formio-read-only {
     // in submission review mode, make readonly formio fields consistently greyed-out
diff --git a/app/frontend/src/components/designer/settings/FormAccessSettings.vue b/app/frontend/src/components/designer/settings/FormAccessSettings.vue
index 5a77cf2dc..d20c8204d 100644
--- a/app/frontend/src/components/designer/settings/FormAccessSettings.vue
+++ b/app/frontend/src/components/designer/settings/FormAccessSettings.vue
@@ -1,5 +1,7 @@
 <script>
 import { mapState, mapWritableState } from 'pinia';
+import { nextTick } from 'vue';
+
 import BasePanel from '~/components/base/BasePanel.vue';
 import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
 import { IdentityMode, IdentityProviders } from '~/utils/constants';
@@ -16,11 +18,12 @@ export default {
         (v) => {
           return (
             v !== 'login' ||
-            this.form.idps.length === 1 ||
+            this.form.idps.length > 0 ||
             this.$t('trans.formSettings.selectLoginType')
           );
         },
       ],
+      idpType: null,
     };
   },
   computed: {
@@ -50,6 +53,18 @@ export default {
         };
       }
     },
+
+    updateLoginType() {
+      // Unable to detect nested radio group in the form.idps for validation and there's no way
+      // to manually enforce a validation rules check. So when we detect a change in the
+      // idpType, we set the form idps ourselves and then change the userType twice
+      // to re-validate the radio group that is the parent.
+      this.form.idps = [this.idpType];
+      this.form.userType = 'team';
+      nextTick(() => {
+        this.form.userType = 'login';
+      });
+    },
   },
 };
 </script>
@@ -108,7 +123,11 @@ export default {
       </v-radio>
       <v-expand-transition>
         <v-row v-if="form.userType === ID_MODE.LOGIN" class="pl-6">
-          <v-radio-group v-model="form.idps[0]" class="my-0">
+          <v-radio-group
+            v-model="idpType"
+            class="my-0"
+            @update:model-value="updateLoginType"
+          >
             <v-radio class="mx-2" :value="ID_PROVIDERS.IDIR">
               <template #label>
                 <span :class="{ 'mr-2': isRTL }"> IDIR </span>
@@ -128,11 +147,11 @@ export default {
             <v-expand-transition>
               <BaseInfoCard
                 v-if="
-                  form.idps[0] &&
+                  idpType &&
                   [
                     ID_PROVIDERS.BCEIDBASIC,
                     ID_PROVIDERS.BCEIDBUSINESS,
-                  ].includes(form.idps[0])
+                  ].includes(idpType)
                 "
                 class="mr-4"
                 :class="{ 'dir-rtl': isRTL }"

From a7efa9807acaa2e92db7ad664aedef04b8f5ff89 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Mon, 25 Sep 2023 14:38:46 -0700
Subject: [PATCH 07/13] Update form.js

sync with master changes for form store
---
 app/frontend/src/store/form.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/frontend/src/store/form.js b/app/frontend/src/store/form.js
index e436a00c6..0e4979503 100644
--- a/app/frontend/src/store/form.js
+++ b/app/frontend/src/store/form.js
@@ -565,6 +565,7 @@ export const useFormStore = defineStore('form', {
       createdBy = '',
       createdAt,
       page,
+      paginationEnabled,
       itemsPerPage,
       filterformSubmissionStatusCode,
       sortBy: sortBy,
@@ -581,12 +582,6 @@ export const useFormStore = defineStore('form', {
         const response = userView
           ? await rbacService.getUserSubmissions({
               formId: formId,
-              page: page,
-              itemsPerPage: itemsPerPage,
-              totalSubmissions: this.totalSubmissions,
-              sortBy: sortBy,
-              search: search,
-              searchEnabled: searchEnabled,
             })
           : await formService.listSubmissions(formId, {
               deleted: deletedOnly,
@@ -594,6 +589,7 @@ export const useFormStore = defineStore('form', {
               createdBy: createdBy,
               createdAt: createdAt,
               page: page,
+              paginationEnabled: paginationEnabled,
               filterformSubmissionStatusCode: filterformSubmissionStatusCode,
               itemsPerPage: itemsPerPage,
               totalSubmissions: this.totalSubmissions,
@@ -601,8 +597,12 @@ export const useFormStore = defineStore('form', {
               search: search,
               searchEnabled: searchEnabled,
             });
-        this.submissionList = response.data.results;
-        this.totalSubmissions = response.data.total;
+        if (paginationEnabled) {
+          this.submissionList = response.data.results;
+          this.totalSubmissions = response.data.total;
+        } else {
+          this.submissionList = response.data;
+        }
       } catch (error) {
         const notificationStore = useNotificationStore();
         notificationStore.addNotification({

From c75ae080f36d52c37cb39d302104220e77882a91 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:08:22 -0700
Subject: [PATCH 08/13] Fixed errors

SubmissionsTable and MySubmissionsTable were broken but are now fixed
fixed tests
---
 app/frontend/src/components/designer/FormsTable.vue   |  3 ++-
 .../src/components/forms/SubmissionsTable.vue         |  3 ++-
 .../forms/submission/MySubmissionsTable.vue           |  1 -
 .../tests/unit/store/modules/form.actions.spec.js     | 10 +++-------
 app/frontend/tests/unit/utils/permissionUtils.spec.js | 11 +++++------
 5 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/frontend/src/components/designer/FormsTable.vue b/app/frontend/src/components/designer/FormsTable.vue
index 698e44f60..f8aabde05 100644
--- a/app/frontend/src/components/designer/FormsTable.vue
+++ b/app/frontend/src/components/designer/FormsTable.vue
@@ -45,7 +45,8 @@ export default {
     },
     filteredFormList() {
       return this.formList.filter(
-        (f) => checkFormManage(f.permissions) || checkSubmissionView(f.permissions)
+        (f) =>
+          checkFormManage(f.permissions) || checkSubmissionView(f.permissions)
       );
     },
   },
diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
index 0ad1e2d10..2553859f9 100644
--- a/app/frontend/src/components/forms/SubmissionsTable.vue
+++ b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -44,6 +44,7 @@ export default {
       forceTableRefresh: 0,
       itemsPerPage: 10,
       loading: true,
+      page: 1,
       restoreItem: {},
       search: '',
       selectedSubmissions: [],
@@ -366,7 +367,7 @@ export default {
       this.showColumnsDialog = true;
     },
     async updateTableOptions({ page, itemsPerPage, sortBy }) {
-      this.page = page - 1;
+      this.page = page;
       if (sortBy?.length > 0) {
         if (sortBy[0].key === 'date') {
           this.sortBy.column = 'createdAt';
diff --git a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
index b2f21cacf..b0fef8ba8 100644
--- a/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
+++ b/app/frontend/src/components/forms/submission/MySubmissionsTable.vue
@@ -1,5 +1,4 @@
 <script>
-import _ from 'lodash';
 import { mapActions, mapState } from 'pinia';
 
 import { i18n } from '~/internationalization';
diff --git a/app/frontend/tests/unit/store/modules/form.actions.spec.js b/app/frontend/tests/unit/store/modules/form.actions.spec.js
index e3d3c7639..b4e49a700 100644
--- a/app/frontend/tests/unit/store/modules/form.actions.spec.js
+++ b/app/frontend/tests/unit/store/modules/form.actions.spec.js
@@ -242,7 +242,7 @@ describe('form actions', () => {
 
     it('fetchSubmissions should commit to SET_SUBMISSIONLIST', async () => {
       formService.listSubmissions.mockResolvedValue({
-        data: { results: [], total: 0 },
+        data: [],
       });
       await mockStore.fetchSubmissions({ formId: 'fId' });
 
@@ -264,7 +264,7 @@ describe('form actions', () => {
 
     it('fetchSubmissions should call the formService if not for userView', async () => {
       formService.listSubmissions.mockResolvedValue({
-        data: { results: [], total: 0 },
+        data: [],
       });
       await mockStore.fetchSubmissions({
         formId: 'fId',
@@ -289,7 +289,7 @@ describe('form actions', () => {
 
     it('fetchSubmissions should call the rbacService if for userView', async () => {
       rbacService.getUserSubmissions.mockResolvedValue({
-        data: { results: [], total: 0 },
+        data: [],
       });
       await mockStore.fetchSubmissions({
         formId: 'fId',
@@ -300,10 +300,6 @@ describe('form actions', () => {
       expect(getUserSubmissionsSpy).toHaveBeenCalledTimes(1);
       expect(getUserSubmissionsSpy).toHaveBeenCalledWith({
         formId: 'fId',
-        itemsPerPage: undefined,
-        page: undefined,
-        sortBy: undefined,
-        totalSubmissions: 0,
       });
     });
 
diff --git a/app/frontend/tests/unit/utils/permissionUtils.spec.js b/app/frontend/tests/unit/utils/permissionUtils.spec.js
index ecf63be9b..c14bf5be4 100644
--- a/app/frontend/tests/unit/utils/permissionUtils.spec.js
+++ b/app/frontend/tests/unit/utils/permissionUtils.spec.js
@@ -1,4 +1,9 @@
+import { setActivePinia, createPinia } from 'pinia';
 import { describe, expect, it, vi } from 'vitest';
+
+import { formService } from '~/services';
+import { useAuthStore } from '~/store/auth';
+import { useNotificationStore } from '~/store/notification';
 import {
   FormPermissions,
   IdentityProviders,
@@ -6,8 +11,6 @@ import {
 } from '~/utils/constants';
 import * as permissionUtils from '~/utils/permissionUtils';
 
-vi.mock('vue-router');
-
 describe('checkFormSubmit', () => {
   it('should be false when userForm is undefined', () => {
     expect(permissionUtils.checkFormSubmit(undefined)).toBeFalsy();
@@ -106,9 +109,6 @@ describe('preFlightAuth', () => {
   setActivePinia(createPinia());
   const authStore = useAuthStore();
   const notificationStore = useNotificationStore();
-  useRouter.mockReturnValue({
-    replace: vi.fn(),
-  });
   const mockNext = vi.fn();
   const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
   const alertNavigateSpy = vi.spyOn(notificationStore, 'alertNavigate');
@@ -125,7 +125,6 @@ describe('preFlightAuth', () => {
     errorNavigateSpy.mockReset();
     getSubmissionOptionsSpy.mockReset();
     readFormOptionsSpy.mockReset();
-    useRouter().replace.mockReset();
   });
 
   afterAll(() => {

From 5407444d22dfb928e2229ad80552b1e08a6f9d32 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:20:06 -0700
Subject: [PATCH 09/13] Update FormSettings.vue

Passed the disabled prop down to the FormFunctionalitySettings so we can check if the form settings were disabled
---
 app/frontend/src/components/designer/FormSettings.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/frontend/src/components/designer/FormSettings.vue b/app/frontend/src/components/designer/FormSettings.vue
index ca89fa315..634d3c2e9 100644
--- a/app/frontend/src/components/designer/FormSettings.vue
+++ b/app/frontend/src/components/designer/FormSettings.vue
@@ -15,6 +15,12 @@ export default {
     FormScheduleSettings,
     FormSubmissionSettings,
   },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
   computed: {
     ...mapWritableState(useFormStore, ['form']),
     ...mapState(useFormStore, ['isFormPublished', 'isRTL']),
@@ -32,7 +38,7 @@ export default {
         <FormAccessSettings />
       </v-col>
       <v-col cols="12" md="6">
-        <FormFunctionalitySettings />
+        <FormFunctionalitySettings :disabled="disabled" />
       </v-col>
       <v-col cols="12" md="6">
         <FormSubmissionSettings />

From 4f072aa036036b82b87daeae38f596e709ea85e0 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 26 Sep 2023 13:13:33 -0700
Subject: [PATCH 10/13] Update ManageFormActions.vue

Delete dialog was removed, added back in
---
 app/frontend/src/components/forms/manage/ManageFormActions.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/frontend/src/components/forms/manage/ManageFormActions.vue b/app/frontend/src/components/forms/manage/ManageFormActions.vue
index 2508b0bed..d7c6984d2 100644
--- a/app/frontend/src/components/forms/manage/ManageFormActions.vue
+++ b/app/frontend/src/components/forms/manage/ManageFormActions.vue
@@ -106,6 +106,7 @@ export default {
             size="x-small"
             density="default"
             icon="mdi:mdi-delete"
+            @click="showDeleteDialog = true"
           />
         </template>
         <span

From 3b4d134ba3c3953357e91afa3f910af023850367 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Thu, 28 Sep 2023 11:08:34 -0700
Subject: [PATCH 11/13] Update FormViewer.vue

Removed the timeout and added a check to only submit if the submission in the form.io hook matches the submission in the form renderer.
---
 .../src/components/designer/FormViewer.vue        | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
index f78e04add..b5cc57ee4 100644
--- a/app/frontend/src/components/designer/FormViewer.vue
+++ b/app/frontend/src/components/designer/FormViewer.vue
@@ -71,7 +71,6 @@ export default {
       block: false,
       bulkFile: false,
       confirmSubmit: false,
-      confirmSubmitTimer: null,
       currentForm: {},
       doYouWantToSaveTheDraft: false,
       forceNewTabLinks: true,
@@ -180,7 +179,6 @@ export default {
   },
   beforeUnmount() {
     window.removeEventListener('beforeunload', this.beforeWindowUnload);
-    if (this.confirmSubmitTimer) clearTimeout(this.confirmSubmitTimer);
   },
   beforeUpdate() {
     if (this.forceNewTabLinks) {
@@ -865,19 +863,20 @@ export default {
         // while 'confirm submit?' dialog is open..
         while (this.showSubmitConfirmDialog) {
           // await a promise that never resolves to block this thread
-          await new Promise(
-            (resolve) => (this.confirmSubmitTimer = setTimeout(resolve, 500))
-          );
+          await new Promise((resolve) => setTimeout(resolve, 500));
         }
         if (this.confirmSubmit) {
-          clearTimeout(this.confirmSubmitTimer);
-          next();
+          // Weird form.io issue where it's calling this multiple times
+          // with an empty submission.
+          if (_.isEqual(this.submission.data, submission.data)) {
+            // Only execute the next step if the submission is the same
+            next();
+          }
         } else {
           // Force re-render form.io to reset submit button state
           this.reRenderFormIo += 1;
         }
       } else {
-        clearTimeout(this.confirmSubmitTimer);
         next();
       }
     },

From 653b0dca0504d8c9df949d52cc3337721c608502 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 3 Oct 2023 15:35:14 -0700
Subject: [PATCH 12/13] fixes for email templating

fixes for email templating to work in vue3
---
 .../src/components/base/BaseStepper.vue       |  12 +-
 .../forms/manage/EmailManagement.vue          |  94 +++++++-------
 .../components/forms/manage/EmailTemplate.vue | 122 +++++++++---------
 .../forms/manage/ManageFormActions.vue        |   2 -
 app/frontend/src/router.js                    |   5 +-
 app/frontend/src/store/form.js                |  15 +--
 app/frontend/src/views/form/Emails.vue        |  18 +--
 app/jest.config.js                            |   2 +-
 app/package-lock.json                         | 109 +++++++++++++++-
 9 files changed, 239 insertions(+), 140 deletions(-)

diff --git a/app/frontend/src/components/base/BaseStepper.vue b/app/frontend/src/components/base/BaseStepper.vue
index 152953050..4bee1f04f 100644
--- a/app/frontend/src/components/base/BaseStepper.vue
+++ b/app/frontend/src/components/base/BaseStepper.vue
@@ -1,10 +1,14 @@
 <script>
 import { mapState } from 'pinia';
+import BaseSecure from '~/components/base/BaseSecure.vue';
 import { useFormStore } from '~/store/form';
 import { IdentityProviders } from '~/utils/constants';
 
 export default {
   name: 'BaseStepper',
+  components: {
+    BaseSecure,
+  },
   props: {
     step: {
       type: Number,
@@ -25,19 +29,19 @@ export default {
   <BaseSecure :idp="[IDP.IDIR]" :class="{ 'dir-rtl': isRTL }">
     <v-stepper v-model="creatorStep">
       <v-stepper-header>
-        <v-stepper-item :complete="creatorStep > 1" value="1" :lang="lang">
+        <v-stepper-item :complete="creatorStep > 0" value="1" :lang="lang">
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.setUpForm') }}
           </slot>
         </v-stepper-item>
         <v-divider />
-        <v-stepper-item :complete="creatorStep > 2" value="1" :lang="lang">
+        <v-stepper-item :complete="creatorStep > 1" value="2" :lang="lang">
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.designForm') }}
           </slot>
         </v-stepper-item>
         <v-divider />
-        <v-stepper-item :complete="creatorStep > 3" value="1" :lang="lang">
+        <v-stepper-item :complete="creatorStep > 2" value="3" :lang="lang">
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.manageForm') }}
           </slot>
@@ -69,7 +73,7 @@ export default {
 /* unset 'overflow: hidden' from all parents of FormDesigner, so FormDesigner's 'sticky' components menu sticks. */
 .v-stepper,
 .v-stepper__items,
-.v-stepper ::v-deep .v-stepper__wrapper {
+.v-stepper :deep(.v-stepper__wrapper) {
   overflow: initial !important;
 }
 </style>
diff --git a/app/frontend/src/components/forms/manage/EmailManagement.vue b/app/frontend/src/components/forms/manage/EmailManagement.vue
index 157ad3143..4eb888ed3 100644
--- a/app/frontend/src/components/forms/manage/EmailManagement.vue
+++ b/app/frontend/src/components/forms/manage/EmailManagement.vue
@@ -1,3 +1,40 @@
+<script>
+import { mapActions, mapState } from 'pinia';
+
+import EmailTemplate from '~/components/forms/manage/EmailTemplate.vue';
+import { useFormStore } from '~/store/form';
+
+export default {
+  name: 'EmailManagement',
+
+  components: {
+    EmailTemplate,
+  },
+
+  props: {
+    formId: {
+      required: true,
+      type: String,
+    },
+  },
+
+  computed: {
+    ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
+  },
+
+  async created() {
+    await Promise.all([
+      this.fetchEmailTemplates(this.formId),
+      this.fetchForm(this.formId),
+    ]);
+  },
+
+  methods: {
+    ...mapActions(useFormStore, ['fetchEmailTemplates', 'fetchForm']),
+  },
+};
+</script>
+
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
     <div
@@ -6,28 +43,27 @@
       <div>
         <h1 class="mr-auto" :lang="lang">
           {{ $t('trans.emailManagement.emailManagement')
-          }}<font-awesome-icon
-            class="ml-3"
+          }}<v-icon
             color="primary"
-            icon="fa-solid fa-flask"
+            class="ml-3"
             :class="{ 'mr-2': isRTL }"
+            icon="mdi:mdi-flask"
           />
         </h1>
-        <h3>{{ this.form.name }}</h3>
+        <h3>{{ form.name }}</h3>
       </div>
       <div style="z-index: 50">
-        <v-tooltip bottom>
-          <template #activator="{ on, attrs }">
+        <v-tooltip location="bottom">
+          <template #activator="{ props }">
             <router-link :to="{ name: 'FormManage', query: { f: formId } }">
               <v-btn
                 class="mx-1"
                 color="primary"
                 icon
                 :disabled="!formId"
-                v-bind="attrs"
-                v-on="on"
+                v-bind="props"
               >
-                <v-icon>settings</v-icon>
+                <v-icon icon="mdi:mdi-cog"></v-icon>
               </v-btn>
             </router-link>
           </template>
@@ -42,43 +78,3 @@
     />
   </div>
 </template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faFlask } from '@fortawesome/free-solid-svg-icons';
-library.add(faFlask);
-
-import EmailTemplate from '@/components/forms/manage/EmailTemplate.vue';
-
-export default {
-  name: 'EmailManagement',
-
-  components: {
-    EmailTemplate,
-  },
-
-  props: {
-    formId: {
-      required: true,
-      type: String,
-    },
-  },
-
-  computed: {
-    ...mapGetters('form', ['form', 'isRTL', 'lang']),
-  },
-
-  methods: {
-    ...mapActions('form', ['fetchEmailTemplates', 'fetchForm']),
-  },
-
-  async created() {
-    await Promise.all([
-      this.fetchEmailTemplates(this.formId),
-      this.fetchForm(this.formId),
-    ]);
-  },
-};
-</script>
diff --git a/app/frontend/src/components/forms/manage/EmailTemplate.vue b/app/frontend/src/components/forms/manage/EmailTemplate.vue
index 47bb31b51..8278152d5 100644
--- a/app/frontend/src/components/forms/manage/EmailTemplate.vue
+++ b/app/frontend/src/components/forms/manage/EmailTemplate.vue
@@ -1,54 +1,8 @@
-<template>
-  <v-container>
-    <h1 :lang="lang">{{ this.title }}</h1>
-    <v-form ref="emailTemplateForm" lazy-validation>
-      <v-text-field
-        dense
-        flat
-        outlined
-        solid
-        :label="$t('trans.emailTemplate.subject')"
-        :lang="lang"
-        :rules="subjectRules"
-        @input="formChanged = true"
-        v-model="emailTemplate.subject"
-      />
-      <v-text-field
-        dense
-        flat
-        outlined
-        solid
-        :label="$t('trans.emailTemplate.title')"
-        :lang="lang"
-        :rules="titleRules"
-        @input="formChanged = true"
-        v-model="emailTemplate.title"
-      />
-      <v-textarea
-        dense
-        flat
-        outlined
-        solid
-        :label="$t('trans.emailTemplate.body')"
-        :lang="lang"
-        :rules="bodyRules"
-        @input="formChanged = true"
-        v-model="emailTemplate.body"
-      />
-      <v-btn
-        class="mr-5"
-        color="primary"
-        :disabled="!formChanged"
-        @click="saveEmailTemplate"
-      >
-        <span :lang="lang">{{ $t('trans.emailTemplate.save') }}</span>
-      </v-btn>
-    </v-form>
-  </v-container>
-</template>
-
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapState } from 'pinia';
+import { i18n } from '~/internationalization';
+import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
 
 export default {
   name: 'EmailTemplate',
@@ -72,19 +26,19 @@ export default {
 
       // Validation rules.
       bodyRules: [
-        (v) => !!v || this.$t('trans.emailTemplate.validBodyRequired'),
+        (v) => !!v || i18n.t('trans.emailTemplate.validBodyRequired'),
       ],
       subjectRules: [
-        (v) => !!v || this.$t('trans.emailTemplate.validSubjectRequired'),
+        (v) => !!v || i18n.t('trans.emailTemplate.validSubjectRequired'),
       ],
       titleRules: [
-        (v) => !!v || this.$t('trans.emailTemplate.validTitleRequired'),
+        (v) => !!v || i18n.t('trans.emailTemplate.validTitleRequired'),
       ],
     };
   },
 
   computed: {
-    ...mapGetters('form', ['emailTemplates', 'lang']),
+    ...mapState(useFormStore, ['emailTemplates', 'lang']),
 
     emailTemplate() {
       return this.emailTemplates.find((t) => t.type === this.type);
@@ -92,8 +46,8 @@ export default {
   },
 
   methods: {
-    ...mapActions('form', ['updateEmailTemplate']),
-    ...mapActions('notifications', ['addNotification']),
+    ...mapActions(useFormStore, ['updateEmailTemplate']),
+    ...mapActions(useNotificationStore, ['addNotification']),
 
     async saveEmailTemplate() {
       try {
@@ -104,8 +58,8 @@ export default {
         this.formChanged = false;
       } catch (error) {
         this.addNotification({
-          message: this.$t('trans.emailTemplate.saveEmailTemplateErrMsg'),
-          consoleError: this.$t(
+          message: i18n.t('trans.emailTemplate.saveEmailTemplateErrMsg'),
+          consoleError: i18n.t(
             'trans.emailTemplate.saveEmailTemplateConsoleErrMsg',
             {
               formId: this.emailTemplate.formId,
@@ -118,3 +72,55 @@ export default {
   },
 };
 </script>
+
+<template>
+  <v-container>
+    <h1 :lang="lang">{{ title }}</h1>
+    <v-form ref="emailTemplateForm" lazy-validation>
+      <v-text-field
+        v-if="emailTemplates.length > 0"
+        v-model="emailTemplate.subject"
+        density="compact"
+        flat
+        variant="outlined"
+        solid
+        :label="$t('trans.emailTemplate.subject')"
+        :lang="lang"
+        :rules="subjectRules"
+        @update:model-value="formChanged = true"
+      />
+      <v-text-field
+        v-if="emailTemplates.length > 0"
+        v-model="emailTemplate.title"
+        density="compact"
+        flat
+        variant="outlined"
+        solid
+        :label="$t('trans.emailTemplate.title')"
+        :lang="lang"
+        :rules="titleRules"
+        @update:model-value="formChanged = true"
+      />
+      <v-textarea
+        v-if="emailTemplates.length > 0"
+        v-model="emailTemplate.body"
+        density="compact"
+        flat
+        variant="outlined"
+        solid
+        :label="$t('trans.emailTemplate.body')"
+        :lang="lang"
+        :rules="bodyRules"
+        @update:model-value="formChanged = true"
+      />
+      <v-btn
+        class="mr-5"
+        color="primary"
+        :disabled="!formChanged"
+        @click="saveEmailTemplate"
+      >
+        <span :lang="lang">{{ $t('trans.emailTemplate.save') }}</span>
+      </v-btn>
+    </v-form>
+  </v-container>
+</template>
diff --git a/app/frontend/src/components/forms/manage/ManageFormActions.vue b/app/frontend/src/components/forms/manage/ManageFormActions.vue
index 298d17d78..ddbfce254 100644
--- a/app/frontend/src/components/forms/manage/ManageFormActions.vue
+++ b/app/frontend/src/components/forms/manage/ManageFormActions.vue
@@ -116,10 +116,8 @@ export default {
         <span :lang="lang">
           {{ $t('trans.manageFormActions.emailManagement') }}
           <v-icon
-            color="primary"
             class="ml-3"
             :class="{ 'mr-2': isRTL }"
-            v-bind="props"
             icon="mdi:mdi-flask"
           />
         </span>
diff --git a/app/frontend/src/router.js b/app/frontend/src/router.js
index 4f093b497..c348c14f8 100644
--- a/app/frontend/src/router.js
+++ b/app/frontend/src/router.js
@@ -192,10 +192,7 @@ export default function getRouter(basePath = '/') {
           {
             path: 'emails',
             name: 'FormEmails',
-            component: () =>
-              import(
-                /* webpackChunkName: "emails" */ '@/views/form/Emails.vue'
-              ),
+            component: () => import('~/views/form/Emails.vue'),
             meta: {
               breadcrumbTitle: 'Email Management',
               requiresAuth: IdentityProviders.IDIR,
diff --git a/app/frontend/src/store/form.js b/app/frontend/src/store/form.js
index d275c98e4..b40a224c5 100644
--- a/app/frontend/src/store/form.js
+++ b/app/frontend/src/store/form.js
@@ -278,16 +278,15 @@ export const useFormStore = defineStore('form', {
         this.emailTemplates = data;
       } catch (error) {
         const notificationStore = useNotificationStore();
-        const consoleError = i18n.t(
-          'trans.store.form.fetchEmailTemplatesConsErrMsg',
-          {
-            formId,
-            error,
-          }
-        );
         notificationStore.addNotification({
           text: i18n.t('trans.store.form.fetchEmailTemplatesErrMsg'),
-          consoleError: consoleError,
+          consoleError: i18n.t(
+            'trans.store.form.fetchEmailTemplatesConsErrMsg',
+            {
+              formId,
+              error,
+            }
+          ),
         });
       }
     },
diff --git a/app/frontend/src/views/form/Emails.vue b/app/frontend/src/views/form/Emails.vue
index 6d7aff68f..783b65978 100644
--- a/app/frontend/src/views/form/Emails.vue
+++ b/app/frontend/src/views/form/Emails.vue
@@ -1,17 +1,13 @@
-<template>
-  <BaseSecure :idp="[IDP.IDIR]">
-    <EmailManagement :formId="f" />
-  </BaseSecure>
-</template>
-
 <script>
-import EmailManagement from '@/components/forms/manage/EmailManagement.vue';
-import { IdentityProviders } from '@/utils/constants';
+import BaseSecure from '~/components/base/BaseSecure.vue';
+import EmailManagement from '~/components/forms/manage/EmailManagement.vue';
+import { IdentityProviders } from '~/utils/constants';
 
 export default {
   name: 'FormEmails',
 
   components: {
+    BaseSecure,
     EmailManagement,
   },
 
@@ -27,3 +23,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <BaseSecure :idp="[IDP.IDIR]">
+    <EmailManagement :form-id="f" />
+  </BaseSecure>
+</template>
diff --git a/app/jest.config.js b/app/jest.config.js
index 43831a03f..0eac637a6 100755
--- a/app/jest.config.js
+++ b/app/jest.config.js
@@ -4,7 +4,7 @@ module.exports = {
   collectCoverageFrom: ['src/**/*.js', '!src/db/migrations/*.js', '!src/db/seeds/*.js', '!frontend/**/*.*'],
   moduleFileExtensions: ['js', 'json'],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/src/$1',
   },
   testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
   testPathIgnorePatterns: ['frontend'],
diff --git a/app/package-lock.json b/app/package-lock.json
index 59c468745..ac46c2c4f 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -30,6 +30,7 @@
         "fast-json-patch": "^3.1.1",
         "form-data": "^4.0.0",
         "fs-extra": "^10.1.0",
+        "handlebars": "^4.7.8",
         "js-yaml": "^4.1.0",
         "jsonwebtoken": "^9.0.0",
         "keycloak-connect": "^21.1.1",
@@ -6249,6 +6250,26 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -8244,6 +8265,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
     "node_modules/nested-objects-util": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/nested-objects-util/-/nested-objects-util-1.1.2.tgz",
@@ -9640,7 +9666,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10308,6 +10333,18 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/uglify-js": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
+      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -10720,6 +10757,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -12828,6 +12870,7 @@
         "fast-json-patch": "^3.1.1",
         "form-data": "^4.0.0",
         "fs-extra": "^10.1.0",
+        "handlebars": "^4.7.8",
         "jest": "^28.0.0",
         "js-yaml": "^4.1.0",
         "jsonwebtoken": "^9.0.0",
@@ -17570,6 +17613,18 @@
           "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
           "dev": true
         },
+        "handlebars": {
+          "version": "4.7.8",
+          "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+          "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+          "requires": {
+            "minimist": "^1.2.5",
+            "neo-async": "^2.6.2",
+            "source-map": "^0.6.1",
+            "uglify-js": "^3.1.4",
+            "wordwrap": "^1.0.0"
+          }
+        },
         "has": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -19043,6 +19098,11 @@
           "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
           "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
         },
+        "neo-async": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+          "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+        },
         "nested-objects-util": {
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/nested-objects-util/-/nested-objects-util-1.1.2.tgz",
@@ -20082,8 +20142,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-support": {
           "version": "0.5.13",
@@ -20579,6 +20638,12 @@
           "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
           "dev": true
         },
+        "uglify-js": {
+          "version": "3.17.4",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
+          "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+          "optional": true
+        },
         "unbox-primitive": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -20874,6 +20939,11 @@
           "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
           "dev": true
         },
+        "wordwrap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+          "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
+        },
         "wrap-ansi": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -23744,6 +23814,18 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "requires": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -25217,6 +25299,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
       "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
     },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
     "nested-objects-util": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/nested-objects-util/-/nested-objects-util-1.1.2.tgz",
@@ -26256,8 +26343,7 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-support": {
       "version": "0.5.13",
@@ -26753,6 +26839,12 @@
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
+    "uglify-js": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
+      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+      "optional": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -27048,6 +27140,11 @@
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
       "dev": true
     },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
+    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -27143,4 +27240,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}

From 6fa2fc8e86c9f715b862818d24ba8a32107fb0cc Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 3 Oct 2023 16:35:51 -0700
Subject: [PATCH 13/13] Fixed BaseStepper

---
 .../src/components/base/BaseStepper.vue       | 29 ++++++++++++++-----
 .../src/components/designer/FloatButton.vue   |  5 +++-
 app/frontend/src/router.js                    | 10 ++++++-
 app/frontend/src/views/form/Create.vue        |  6 ++--
 app/frontend/src/views/form/Design.vue        |  2 +-
 app/frontend/src/views/form/PublishForm.vue   | 28 ++++++++++++++++--
 6 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/app/frontend/src/components/base/BaseStepper.vue b/app/frontend/src/components/base/BaseStepper.vue
index 4bee1f04f..a370c1580 100644
--- a/app/frontend/src/components/base/BaseStepper.vue
+++ b/app/frontend/src/components/base/BaseStepper.vue
@@ -12,7 +12,7 @@ export default {
   props: {
     step: {
       type: Number,
-      default: 1,
+      required: true,
     },
   },
   computed: {
@@ -29,19 +29,34 @@ export default {
   <BaseSecure :idp="[IDP.IDIR]" :class="{ 'dir-rtl': isRTL }">
     <v-stepper v-model="creatorStep">
       <v-stepper-header>
-        <v-stepper-item :complete="creatorStep > 0" value="1" :lang="lang">
+        <v-stepper-item
+          :complete="creatorStep > 1"
+          :step="creatorStep"
+          :value="1"
+          :lang="lang"
+        >
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.setUpForm') }}
           </slot>
         </v-stepper-item>
         <v-divider />
-        <v-stepper-item :complete="creatorStep > 1" value="2" :lang="lang">
+        <v-stepper-item
+          :complete="creatorStep > 2"
+          :step="creatorStep"
+          :value="2"
+          :lang="lang"
+        >
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.designForm') }}
           </slot>
         </v-stepper-item>
         <v-divider />
-        <v-stepper-item :complete="creatorStep > 2" value="3" :lang="lang">
+        <v-stepper-item
+          :complete="creatorStep === 3"
+          :step="creatorStep"
+          :value="3"
+          :lang="lang"
+        >
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.manageForm') }}
           </slot>
@@ -49,17 +64,17 @@ export default {
       </v-stepper-header>
 
       <v-stepper-window>
-        <v-stepper-window-item value="1">
+        <v-stepper-window-item :value="1">
           <div>
             <slot name="setUpForm"></slot>
           </div>
         </v-stepper-window-item>
-        <v-stepper-window-item value="2">
+        <v-stepper-window-item :value="2">
           <div>
             <slot name="designForm"></slot>
           </div>
         </v-stepper-window-item>
-        <v-stepper-window-item value="3">
+        <v-stepper-window-item :value="3">
           <div>
             <slot name="manageForm"></slot>
           </div>
diff --git a/app/frontend/src/components/designer/FloatButton.vue b/app/frontend/src/components/designer/FloatButton.vue
index 416dcf755..54e4e5bbd 100644
--- a/app/frontend/src/components/designer/FloatButton.vue
+++ b/app/frontend/src/components/designer/FloatButton.vue
@@ -372,7 +372,10 @@ export default {
       </router-link>
       <router-link
         v-slot="{ navigate }"
-        :to="{ name: 'PublishForm', query: { f: formId, d: draftId } }"
+        :to="{
+          name: 'PublishForm',
+          query: { f: formId, fd: false, d: draftId },
+        }"
         custom
       >
         <div
diff --git a/app/frontend/src/router.js b/app/frontend/src/router.js
index c348c14f8..f472dfb7d 100644
--- a/app/frontend/src/router.js
+++ b/app/frontend/src/router.js
@@ -94,7 +94,15 @@ export default function getRouter(basePath = '/') {
               requiresAuth: IdentityProviders.IDIR,
               hasLogin: true,
             },
-            props: createProps,
+            props: (route) => {
+              return {
+                ...route.query,
+                ...route.params,
+                fd:
+                  String(route.query.fd).toLowerCase() === 'true' ||
+                  route.query.fd === true,
+              };
+            },
           },
           {
             path: 'design',
diff --git a/app/frontend/src/views/form/Create.vue b/app/frontend/src/views/form/Create.vue
index b91edc70b..9095e0e9f 100644
--- a/app/frontend/src/views/form/Create.vue
+++ b/app/frontend/src/views/form/Create.vue
@@ -34,7 +34,9 @@ export default {
   computed: {
     ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
     IDP: () => IdentityProviders,
-    stepper: () => this.step,
+    stepper() {
+      return this.step;
+    },
   },
   watch: {
     form() {
@@ -105,7 +107,7 @@ export default {
     </template>
     <template #designForm>
       <FormDesigner ref="formDesigner" />
-      <v-btn variant="outlined" data-test="back-btn" @click="creatorStep = 0">
+      <v-btn variant="outlined" data-test="back-btn" @click="step = 1">
         <span :lang="lang">{{ $t('trans.create.back') }}</span>
       </v-btn>
     </template>
diff --git a/app/frontend/src/views/form/Design.vue b/app/frontend/src/views/form/Design.vue
index 2c64a1eae..e8d28cd6a 100644
--- a/app/frontend/src/views/form/Design.vue
+++ b/app/frontend/src/views/form/Design.vue
@@ -56,7 +56,7 @@ export default {
   methods: {
     ...mapActions(useFormStore, ['listFCProactiveHelp', 'deleteCurrentForm']),
     onFormLoad() {
-      this.$refs.formDesigner.onFormLoad();
+      if (this.$refs?.formDesigner) this.$refs.formDesigner.onFormLoad();
     },
   },
 };
diff --git a/app/frontend/src/views/form/PublishForm.vue b/app/frontend/src/views/form/PublishForm.vue
index 1f88581a0..d17518aa8 100644
--- a/app/frontend/src/views/form/PublishForm.vue
+++ b/app/frontend/src/views/form/PublishForm.vue
@@ -1,4 +1,5 @@
 <script>
+import BaseStepper from '~/components/base/BaseStepper.vue';
 import ManageForm from '~/components/forms/manage/ManageForm.vue';
 import ManageFormActions from '~/components/forms/manage/ManageFormActions.vue';
 import { mapActions, mapState } from 'pinia';
@@ -8,6 +9,7 @@ import { useFormStore } from '~/store/form';
 export default {
   name: 'PublishForm',
   components: {
+    BaseStepper,
     ManageForm,
     ManageFormActions,
   },
@@ -33,6 +35,7 @@ export default {
   },
   data() {
     return {
+      loading: true,
       showManageForm: false,
     };
   },
@@ -40,11 +43,15 @@ export default {
     ...mapState(useFormStore, ['permissions', 'form', 'lang']),
   },
   async beforeMount() {
+    this.loading = true;
+
     await this.fetchForm(this.f);
     await this.getFormPermissionsForUser(this.f);
     if (this.permissions.includes(FormPermissions.DESIGN_READ)) {
       await this.fetchDrafts(this.f).then(() => (this.showManageForm = true));
     }
+
+    this.loading = false;
   },
   methods: {
     ...mapActions(useFormStore, [
@@ -62,9 +69,26 @@ export default {
       <div
         class="mt-6 d-flex flex-md-row justify-space-between flex-sm-column-reverse flex-xs-column-reverse gapRow"
       >
-        <ManageFormActions />
+        <!-- page title -->
+        <div>
+          <h1 :lang="lang">{{ $t('trans.manageLayout.manageForm') }}</h1>
+          <h3>{{ form.name }}</h3>
+        </div>
+        <div>
+          <ManageFormActions />
+        </div>
       </div>
-      <ManageForm v-if="showManageForm" />
+      <v-row no-gutters>
+        <v-col cols="12" order="2">
+          <v-skeleton-loader
+            :loading="loading"
+            type="list-item-two-line"
+            class="bgtrans"
+          >
+            <ManageForm v-if="showManageForm" />
+          </v-skeleton-loader>
+        </v-col>
+      </v-row>
     </template>
   </BaseStepper>
 </template>