Add Domain Verification on Onboarding Wizard

resources/assets/js/views/wizard/Wizard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col items-center justify-between w-full h-32 pt-10 step-indicator"
+    class="flex flex-col items-center justify-between w-full h-32 pt-10  step-indicator"
   >
     <img
       id="logo-crater"
@@ -22,6 +22,7 @@
 import SystemRequirement from './WizardSystemRequirementStep'
 import Permission from './WizardPermissionStep'
 import Database from './WizardDatabaseStep'
+import VerifyDomain from './WizardVerifyDomainStep'
 import EmailConfiguration from './WizardEmailConfigStep'
 import UserProfile from './WizardUserProfileStep'
 import CompanyInfo from './WizardCompanyInfoStep'
@@ -32,10 +33,11 @@ export default {
     step_1: SystemRequirement,
     step_2: Permission,
     step_3: Database,
-    step_4: EmailConfiguration,
-    step_5: UserProfile,
-    step_6: CompanyInfo,
-    step_7: Settings,
+    step_4: VerifyDomain,
+    step_5: EmailConfiguration,
+    step_6: UserProfile,
+    step_7: CompanyInfo,
+    step_8: Settings,
   },
   data() {
     return {
@@ -69,16 +71,27 @@ export default {
       let status = {
         profile_complete: data,
       }
-
-      let response = await axios.post('/api/v1/onboarding/wizard-step', status)
+      try {
+        let response = await axios.post(
+          '/api/v1/onboarding/wizard-step',
+          status
+        )
+        return true
+      } catch (e) {
+        if (e?.response?.data?.message === 'The MAC is invalid.') {
+          window.location.reload()
+        }
+        return false
+      }
     },
     async setTab(data) {
       if (data) {
-        this.setProfileComplete(data)
+        let res = await this.setProfileComplete(data)
+        if (!res) return false
       }
       this.step++
 
-      if (this.step <= 7) {
+      if (this.step <= 8) {
         this.tab = 'step_' + this.step
       } else {
         // window.location.reload()

resources/assets/js/views/wizard/WizardCompanyInfoStep.vue

@@ -297,7 +297,7 @@ export default {
           })
         }
 
-        this.$emit('next', 6)
+        this.$emit('next', 7)
         this.isLoading = false
       }
     },

resources/assets/js/views/wizard/WizardDatabaseStep.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
 import Mysql from './database/MysqlDatabase'
 import Pgsql from './database/PgsqlDatabase'
 import Sqlite from './database/SqliteDatabase'
@@ -67,15 +66,11 @@ export default {
     async next(databaseData) {
       this.isLoading = this.isFetching = true
       try {
-        await window.axios.get('/sanctum/csrf-cookie')
-
         let response = await window.axios.post(
           '/api/v1/onboarding/database/config',
           databaseData
         )
 
-        await window.axios.get('/sanctum/csrf-cookie')
-
         if (response.data.success) {
           await window.axios.post('/api/v1/onboarding/finish')
 

resources/assets/js/views/wizard/WizardEmailConfigStep.vue

@@ -67,7 +67,7 @@ export default {
           mailConfigData
         )
         if (response.data.success) {
-          this.$emit('next', 4)
+          this.$emit('next', 5)
           this.showNotification({
             type: 'success',
             message: this.$t('wizard.success.' + response.data.success),

resources/assets/js/views/wizard/WizardUserProfileStep.vue

@@ -246,7 +246,7 @@ export default {
 
           this.uploadAvatar(avatarData)
         }
-        this.$emit('next', 5)
+        this.$emit('next', 6)
         this.isLoading = false
       }
       return true

resources/assets/js/views/wizard/WizardVerifyDomainStep.vue

@@ -0,0 +1,136 @@
+<template>
+  <sw-wizard-step
+    :title="$t('wizard.verify_domain.title')"
+    :description="$t('wizard.verify_domain.desc')"
+  >
+    <div class="w-full md:w-2/3">
+      <sw-input-group
+        :label="$t('wizard.verify_domain.app_domain')"
+        :error="domainError"
+        required
+      >
+        <sw-input
+          :invalid="$v.formData.app_domain.$error"
+          v-model.trim="formData.app_domain"
+          type="text"
+          name="name"
+          placeholder="crater.com"
+          @input="$v.formData.app_domain.$touch()"
+        />
+      </sw-input-group>
+    </div>
+
+    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
+    <ul class="w-full text-gray-600 list-disc list-inside">
+      <li class="text-sm leading-8">
+        App domain should not contain
+        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
+        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
+        the domain.
+      </li>
+      <li class="text-sm leading-8">
+        If you're accessing the website on a different port, please mention the
+        port. For example:
+        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
+      </li>
+    </ul>
+
+    <sw-button
+      :loading="isLoading"
+      :disabled="isLoading"
+      class="mt-8"
+      variant="primary"
+      @click="verifyDomain"
+    >
+      {{ $t('wizard.verify_domain.verify_now') }}
+    </sw-button>
+  </sw-wizard-step>
+</template>
+
+<script>
+import { ArrowRightIcon } from '@vue-hero-icons/solid'
+const { required } = require('vuelidate/lib/validators')
+import { mapActions } from 'vuex'
+
+export default {
+  components: {
+    ArrowRightIcon,
+  },
+  data() {
+    return {
+      formData: {
+        app_domain: window.location.origin.replace(/(^\w+:|^)\/\//, ''),
+      },
+      isLoading: false,
+      isShow: true,
+    }
+  },
+
+  validations: {
+    formData: {
+      app_domain: {
+        required,
+        isUrl(val) {
+          return this.$utils.checkValidDomainUrl(val)
+        },
+      },
+    },
+  },
+
+  computed: {
+    hasNext() {
+      return false
+    },
+    domainError() {
+      if (!this.$v.formData.app_domain.$error) {
+        return ''
+      }
+
+      if (!this.$v.formData.app_domain.required) {
+        return this.$tc('validation.required')
+      }
+
+      if (!this.$v.formData.app_domain.isUrl) {
+        return this.$tc('validation.invalid_domain_url')
+      }
+    },
+  },
+
+  methods: {
+    ...mapActions('notification', ['showNotification']),
+    listToggle() {
+      this.isShow = !this.isShow
+    },
+
+    async verifyDomain() {
+      this.$v.formData.$touch()
+
+      if (this.$v.formData.$invalid) {
+        return true
+      }
+
+      this.isLoading = true
+      try {
+        await window.axios.put('api/v1/onboarding/set-domain', this.formData)
+
+        await window.axios.get('/sanctum/csrf-cookie')
+
+        await window.axios.post('/api/v1/onboarding/login')
+
+        let driverRes = await window.axios.get('/api/v1/auth/check')
+
+        if (driverRes.data) {
+          await this.$emit('next', 4)
+        }
+        this.isLoading = false
+      } catch (e) {
+        this.showNotification({
+          type: 'error',
+          message: this.$t('wizard.errors.domain_verification_failed'),
+        })
+        this.isLoading = false
+      }
+    },
+  },
+}
+</script>

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]