Vue3

app/frontend/src/components/base/BaseStepper.vue

@@ -1,14 +1,18 @@
 <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,
-      default: 1,
+      required: true,
     },
   },
   computed: {
@@ -25,37 +29,52 @@ 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 > 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 > 2" value="1" :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 > 3" value="1" :lang="lang">
+        <v-stepper-item
+          :complete="creatorStep === 3"
+          :step="creatorStep"
+          :value="3"
+          :lang="lang"
+        >
           <slot name="setUpFormTitle">
             {{ $t('trans.baseStepper.manageForm') }}
           </slot>
         </v-stepper-item>
       </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>
@@ -69,7 +88,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>

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

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>

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,28 +26,28 @@ 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);
     },
   },
 
   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>

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>