From 401daa4b2f2b0838c9778d6ea854025d298547f9 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 27 Feb 2024 14:45:20 -0400
Subject: [PATCH] Fix design of page creation

---
 src/components/vue-form-builder.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 25667d3a4..99abb395f 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -383,28 +383,30 @@
     <b-modal
       id="addPageModal"
       ref="addPageModal"
-      :ok-title="$t('Save')"
-      :cancel-title="$t('Cancel')"
+      header-class="pb-2"
+      size="lg"
+      :ok-title="$t('SAVE')"
+      :cancel-title="$t('CANCEL')"
       cancel-variant="btn btn-outline-secondary"
       ok-variant="btn btn-secondary ml-2"
-      :title="$t('Add New Page')"
       header-close-content="&times;"
       data-cy="add-page-modal"
       :ok-disabled="!addPageName || !!checkPageName(addPageName)"
       @ok="addPage"
-      @hide="addPageName = ''"
+      @show="addPageName = ''; showAddPageValidations=false;"
     >
-      <required />
+      <template #modal-title>
+        <h5 class="modal-title">{{ $t('Create New Page') }}</h5>
+        <small class="modal-subtitle mb-n2">{{ $t('Create a new page in your screen') }}</small>
+      </template>
       <form-input
         ref="addPageInput"
         v-model="addPageName"
         :name="$t('Page Name')"
         :label="$t('Page Name') + ' *'"
         :helper="$t('The name of the new page to add')"
-        validation="required"
         :error="checkPageName(addPageName)"
         data-cy="add-page-name"
-        required
         aria-required="true"
       />
     </b-modal>
@@ -583,6 +585,7 @@ export default {
     }
 
     return {
+      showAddPageValidations: false,
       openedPages: [0],
       currentPage: 0,
       selected: null,
@@ -758,7 +761,13 @@ export default {
     onClick(page) {
       this.$refs.tabsBar.openPageByIndex(page);
     },
-    checkPageName(value) {
+    checkPageName(value, force = false) {
+      if (!force && !this.showAddPageValidations) {
+        return null;
+      }
+      if (!value.trim()) {
+        return this.$t("The Page Name field is required.");
+      }
       const pageNames = this.config
         .map((config) => config.name)
         .filter((name) => name !== this.originalPageName);
@@ -1133,7 +1142,9 @@ export default {
       this.updateState();
     },
     addPage(e) {
-      if (this.$refs.addPageInput.validator.errorCount) {
+      this.showAddPageValidations = true;
+      const error = this.checkPageName(this.addPageName, true);
+      if (error) {
         e.preventDefault();
         return;
       }