feat: Adds URL validation for domain and home page links (#5761)

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -160,8 +160,7 @@
         }
       },
       "ADD": {
-        "CREATE_FLOW": [
-          {
+        "CREATE_FLOW": [{
             "title": "Help center information",
             "route": "new_portal_information",
             "body": "Basic information about portal",
@@ -212,20 +211,19 @@
         "SLUG": {
           "LABEL": "Slug",
           "PLACEHOLDER": "Portal slug for urls",
-
           "ERROR": "Slug is required"
         },
         "DOMAIN": {
           "LABEL": "Custom Domain",
           "PLACEHOLDER": "Portal custom domain",
-          "HELP_TEXT": "Add only If you want to use a custom domain for your portals.",
-          "ERROR": "Custom Domain is required"
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
+          "ERROR": "Enter a valid domain URL"
         },
         "HOME_PAGE_LINK": {
           "LABEL": "Home Page Link",
           "PLACEHOLDER": "Portal home page link",
-          "HELP_TEXT": "The link used to return from the portal to the home page.",
-          "ERROR": "Home Page Link is required"
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
+          "ERROR": "Enter a valid home page URL"
         },
         "THEME_COLOR": {
           "LABEL": "Portal theme color",

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue

@@ -35,11 +35,12 @@
         <div class="form-item">
           <woot-input
             v-model.trim="name"
-            :class="{ error: $v.slug.$error }"
+            :class="{ error: $v.name.$error }"
             :error="nameError"
             :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
             :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
             :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
+            @blur="$v.name.$touch"
             @input="onNameChange"
           />
         </div>
@@ -51,15 +52,18 @@
             :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
             :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
             :help-text="domainHelpText"
-            @input="$v.slug.$touch"
+            @blur="$v.slug.$touch"
           />
         </div>
         <div class="form-item">
           <woot-input
             v-model.trim="domain"
+            :class="{ error: $v.domain.$error }"
             :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
             :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
             :help-text="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT')"
+            :error="domainError"
+            @blur="$v.domain.$touch"
           />
         </div>
       </div>
@@ -77,8 +81,8 @@
 </template>
 
 <script>
+import { required, url, minLength } from 'vuelidate/lib/validators';
 import thumbnail from 'dashboard/components/widgets/Thumbnail';
-import { required, minLength } from 'vuelidate/lib/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 
@@ -116,6 +120,9 @@ export default {
     slug: {
       required,
     },
+    domain: {
+      url,
+    },
   },
   computed: {
     nameError() {
@@ -131,7 +138,10 @@ export default {
       return '';
     },
     domainError() {
-      return this.$v.domain.$error;
+      if (this.$v.domain.$error) {
+        return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
+      }
+      return '';
     },
     domainHelpText() {
       return buildPortalURL(this.slug);

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue

@@ -42,12 +42,23 @@
               $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')
             "
             :help-text="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT')"
+            :error="
+              $v.homePageLink.$error
+                ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
+                : ''
+            "
+            :class="{ error: $v.homePageLink.$error }"
+            @blur="$v.homePageLink.$touch"
           />
         </div>
       </div>
     </div>
     <div class="flex-end">
-      <woot-button :is-loading="isSubmitting" @click="onSubmitClick">
+      <woot-button
+        :is-loading="isSubmitting"
+        :is-disabled="$v.$invalid"
+        @click="onSubmitClick"
+      >
         {{
           $t(
             'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.UPDATE_PORTAL_BUTTON'
@@ -59,6 +70,7 @@
 </template>
 
 <script>
+import { url } from 'vuelidate/lib/validators';
 import { getRandomColor } from 'dashboard/helper/labelColor';
 
 import alertMixin from 'shared/mixins/alertMixin';
@@ -85,7 +97,11 @@ export default {
       alertMessage: '',
     };
   },
-  computed: {},
+  validations: {
+    homePageLink: {
+      url,
+    },
+  },
   mounted() {
     this.color = getRandomColor();
     this.updateDataFromStore();
@@ -102,6 +118,10 @@ export default {
       }
     },
     onSubmitClick() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
       const portal = {
         id: this.portal.id,
         slug: this.portal.slug,