Add Domain Verification on Onboarding Wizard

resources/assets/js/views/wizard/database/MysqlDatabase.vue

@@ -1,7 +1,7 @@
 <template>
   <form action="" @submit.prevent="next()">
     <div>
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
+      <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.app_url')"
           :error="urlError"
@@ -16,23 +16,6 @@
           />
         </sw-input-group>
 
-        <sw-input-group
-          :label="$t('wizard.database.app_domain')"
-          :error="domainError"
-          required
-        >
-          <sw-input
-            :invalid="$v.databaseData.app_domain.$error"
-            v-model.trim="databaseData.app_domain"
-            type="text"
-            name="name"
-            placeholder="crater.com"
-            @input="$v.databaseData.app_domain.$touch()"
-          />
-        </sw-input-group>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.connection')"
           :error="connectionError"
@@ -62,9 +45,7 @@
             @input="$v.databaseData.database_port.$touch()"
           />
         </sw-input-group>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.db_name')"
           :error="nameError"
@@ -92,9 +73,7 @@
             @input="$v.databaseData.database_username.$touch()"
           />
         </sw-input-group>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
         <sw-input-group :label="$t('wizard.database.password')">
           <sw-input
             v-model.trim="databaseData.database_password"
@@ -102,7 +81,9 @@
             name="name"
           />
         </sw-input-group>
+      </div>
 
+      <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
         <sw-input-group
           :label="$t('wizard.database.host')"
           :error="hostnameError"
@@ -141,7 +122,7 @@ export default {
   components: {
     SaveIcon,
   },
-   props: {
+  props: {
     configData: {
       type: Object,
       require: true,
@@ -168,7 +149,6 @@ export default {
         database_username: null,
         database_password: null,
         app_url: window.location.origin,
-        app_domain: window.location.origin.replace(/(^\w+:|^)\/\//, ''),
       },
       connections: ['sqlite', 'mysql', 'pgsql', 'sqlsrv'],
     }
@@ -197,12 +177,6 @@ export default {
           return this.$utils.checkValidUrl(val)
         },
       },
-      app_domain: {
-        required,
-        isUrl(val) {
-          return this.$utils.checkValidDomainUrl(val)
-        },
-      },
     },
   },
   computed: {
@@ -219,19 +193,6 @@ export default {
         return this.$tc('validation.invalid_url')
       }
     },
-    domainError() {
-      if (!this.$v.databaseData.app_domain.$error) {
-        return ''
-      }
-
-      if (!this.$v.databaseData.app_domain.required) {
-        return this.$tc('validation.required')
-      }
-
-      if (!this.$v.databaseData.app_domain.isUrl) {
-        return this.$tc('validation.invalid_domain_url')
-      }
-    },
     connectionError() {
       if (!this.$v.databaseData.database_connection.$error) {
         return ''

resources/assets/js/views/wizard/database/PgsqlDatabase.vue

@@ -1,7 +1,7 @@
 <template>
   <form action="" @submit.prevent="next()">
     <div>
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
+      <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.app_url')"
           :error="urlError"
@@ -16,23 +16,6 @@
           />
         </sw-input-group>
 
-        <sw-input-group
-          :label="$t('wizard.database.app_domain')"
-          :error="domainError"
-          required
-        >
-          <sw-input
-            :invalid="$v.databaseData.app_domain.$error"
-            v-model.trim="databaseData.app_domain"
-            type="text"
-            name="name"
-            placeholder="crater.com"
-            @input="$v.databaseData.app_domain.$touch()"
-          />
-        </sw-input-group>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.connection')"
           :error="connectionError"
@@ -62,9 +45,7 @@
             @input="$v.databaseData.database_port.$touch()"
           />
         </sw-input-group>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.db_name')"
           :error="nameError"
@@ -92,9 +73,7 @@
             @input="$v.databaseData.database_username.$touch()"
           />
         </sw-input-group>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
         <sw-input-group :label="$t('wizard.database.password')">
           <sw-input
             v-model.trim="databaseData.database_password"
@@ -134,8 +113,7 @@
 
 <script>
 import { SaveIcon } from '@vue-hero-icons/outline'
-import { validationMixin } from 'vuelidate'
-const { required, numeric, url } = require('vuelidate/lib/validators')
+const { required, numeric } = require('vuelidate/lib/validators')
 
 export default {
   components: {
@@ -168,12 +146,11 @@ export default {
         database_username: null,
         database_password: null,
         app_url: window.location.origin,
-        app_domain: window.location.origin.replace(/(^\w+:|^)\/\//, ''),
       },
       connections: ['sqlite', 'mysql', 'pgsql', 'sqlsrv'],
     }
   },
-   computed: {
+  computed: {
     urlError() {
       if (!this.$v.databaseData.app_url.$error) {
         return ''
@@ -187,19 +164,6 @@ export default {
         return this.$tc('validation.invalid_url')
       }
     },
-    domainError() {
-      if (!this.$v.databaseData.app_domain.$error) {
-        return ''
-      }
-
-      if (!this.$v.databaseData.app_domain.required) {
-        return this.$tc('validation.required')
-      }
-
-      if (!this.$v.databaseData.app_domain.isUrl) {
-        return this.$tc('validation.invalid_domain_url')
-      }
-    },
     connectionError() {
       if (!this.$v.databaseData.database_connection.$error) {
         return ''
@@ -274,12 +238,6 @@ export default {
           return this.$utils.checkValidUrl(val)
         },
       },
-      app_domain: {
-        required,
-        isUrl(val) {
-          return this.$utils.checkValidDomainUrl(val)
-        },
-      },
     },
   },
   mounted() {

resources/assets/js/views/wizard/database/SqliteDatabase.vue

@@ -1,7 +1,7 @@
 <template>
   <form action="" @submit.prevent="next()">
     <div>
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
+      <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.app_url')"
           :error="urlError"
@@ -16,23 +16,6 @@
           />
         </sw-input-group>
 
-        <sw-input-group
-          :label="$t('wizard.database.app_domain')"
-          :error="domainError"
-          required
-        >
-          <sw-input
-            :invalid="$v.databaseData.app_domain.$error"
-            v-model.trim="databaseData.app_domain"
-            type="text"
-            name="name"
-            placeholder="crater.com"
-            @input="$v.databaseData.app_domain.$touch()"
-          />
-        </sw-input-group>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.connection')"
           :error="connectionError"
@@ -81,8 +64,7 @@
 
 <script>
 import { SaveIcon } from '@vue-hero-icons/outline'
-import { validationMixin } from 'vuelidate'
-const { required, numeric, url } = require('vuelidate/lib/validators')
+const { required } = require('vuelidate/lib/validators')
 
 export default {
   components: {
@@ -111,7 +93,6 @@ export default {
         database_connection: 'mysql',
         database_name: null,
         app_url: window.location.origin,
-        app_domain: window.location.origin.replace(/(^\w+:|^)\/\//, ''),
       },
       connections: ['sqlite', 'mysql', 'pgsql', 'sqlsrv'],
     }
@@ -130,12 +111,6 @@ export default {
           return this.$utils.checkValidUrl(val)
         },
       },
-      app_domain: {
-        required,
-        isUrl(val) {
-          return this.$utils.checkValidDomainUrl(val)
-        },
-      },
     },
   },
   computed: {
@@ -152,19 +127,6 @@ export default {
         return this.$tc('validation.invalid_url')
       }
     },
-    domainError() {
-      if (!this.$v.databaseData.app_domain.$error) {
-        return ''
-      }
-
-      if (!this.$v.databaseData.app_domain.required) {
-        return this.$tc('validation.required')
-      }
-
-      if (!this.$v.databaseData.app_domain.isUrl) {
-        return this.$tc('validation.invalid_domain_url')
-      }
-    },
     connectionError() {
       if (!this.$v.databaseData.database_connection.$error) {
         return ''

resources/assets/js/views/wizard/database/SqlsrvDatabase.vue

@@ -1,7 +1,7 @@
 <template>
   <form action="" @submit.prevent="next()">
     <div>
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
+      <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.app_url')"
           :error="urlError"
@@ -16,23 +16,6 @@
           />
         </sw-input-group>
 
-        <sw-input-group
-          :label="$t('wizard.database.app_domain')"
-          :error="domainError"
-          required
-        >
-          <sw-input
-            :invalid="$v.databaseData.app_domain.$error"
-            v-model.trim="databaseData.app_domain"
-            type="text"
-            name="name"
-            placeholder="crater.com"
-            @input="$v.databaseData.app_domain.$touch()"
-          />
-        </sw-input-group>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.connection')"
           :error="connectionError"
@@ -62,9 +45,7 @@
             @input="$v.databaseData.database_port.$touch()"
           />
         </sw-input-group>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
         <sw-input-group
           :label="$t('wizard.database.db_name')"
           :error="nameError"
@@ -92,9 +73,7 @@
             @input="$v.databaseData.database_username.$touch()"
           />
         </sw-input-group>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
         <sw-input-group :label="$t('wizard.database.password')">
           <sw-input
             v-model.trim="databaseData.database_password"
@@ -134,14 +113,13 @@
 
 <script>
 import { SaveIcon } from '@vue-hero-icons/outline'
-import { validationMixin } from 'vuelidate'
-const { required, numeric, url } = require('vuelidate/lib/validators')
+const { required, numeric } = require('vuelidate/lib/validators')
 
 export default {
   components: {
     SaveIcon,
   },
-   props: {
+  props: {
     configData: {
       type: Object,
       require: true,
@@ -168,7 +146,6 @@ export default {
         database_username: null,
         database_password: null,
         app_url: window.location.origin,
-        app_domain: window.location.origin.replace(/(^\w+:|^)\/\//, ''),
       },
       connections: ['sqlite', 'mysql', 'pgsql', 'sqlsrv'],
     }
@@ -197,12 +174,6 @@ export default {
           return this.$utils.checkValidUrl(val)
         },
       },
-      app_domain: {
-        required,
-        isUrl(val) {
-          return this.$utils.checkValidDomainUrl(val)
-        },
-      },
     },
   },
   computed: {
@@ -219,19 +190,6 @@ export default {
         return this.$tc('validation.invalid_url')
       }
     },
-    domainError() {
-      if (!this.$v.databaseData.app_domain.$error) {
-        return ''
-      }
-
-      if (!this.$v.databaseData.app_domain.required) {
-        return this.$tc('validation.required')
-      }
-
-      if (!this.$v.databaseData.app_domain.isUrl) {
-        return this.$tc('validation.invalid_domain_url')
-      }
-    },
     connectionError() {
       if (!this.$v.databaseData.database_connection.$error) {
         return ''
@@ -282,7 +240,7 @@ export default {
       }
     },
   },
-   mounted() {
+  mounted() {
     for (const key in this.databaseData) {
       if (this.configData.hasOwnProperty(key)) {
         this.databaseData[key] = this.configData[key]