Add Domain Verification on Onboarding Wizard

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>