Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Domain/Info.vue
| <template> | <template> | ||||
| <div class="container"> | <div class="container"> | ||||
| <div v-if="!isReady" id="domain-status-box" class="card"> | <status-component v-bind:status="status" @status-update="statusUpdate"></status-component> | ||||
| <div class="card-body"> | |||||
| <div class="card-title">Domain status: <span class="text-danger">Not ready</span></div> | |||||
| <div class="card-text"> | |||||
| <p>The process to create the domain has not been completed yet. | |||||
| Some features may be disabled or readonly.</p> | |||||
| <ul class="status-list"> | |||||
| <li v-for="item in statusProcess" :key="item.label"> | |||||
| <svg-icon :icon="['far', item.state ? 'check-square' : 'square']" | |||||
| :class="item.state ? 'text-success' : 'text-muted'" | |||||
| ></svg-icon> | |||||
| <span>{{ item.title }}</span> | |||||
| </li> | |||||
| </ul> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div v-if="domain && !domain.isConfirmed" class="card" id="domain-verify"> | <div v-if="domain && !domain.isConfirmed" class="card" id="domain-verify"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <div class="card-title">Domain verification</div> | <div class="card-title">Domain verification</div> | ||||
| <div class="card-text"> | <div class="card-text"> | ||||
| <p>In order to confirm that you're the actual holder of the domain, | <p>In order to confirm that you're the actual holder of the domain, | ||||
| we need to run a verification process before finally activating it for email delivery.</p> | we need to run a verification process before finally activating it for email delivery.</p> | ||||
| <p>The domain <b>must have one of the following entries</b> in DNS: | <p>The domain <b>must have one of the following entries</b> in DNS: | ||||
| <ul> | <ul> | ||||
| Show All 19 Lines | <div class="container"> | ||||
| the domain or your web hosting provider.</p> | the domain or your web hosting provider.</p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import StatusComponent from '../Widgets/Status' | |||||
| export default { | export default { | ||||
| components: { | |||||
| StatusComponent | |||||
| }, | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| domain_id: null, | domain_id: null, | ||||
| domain: null, | domain: null, | ||||
| app_name: window.config['app.name'], | app_name: window.config['app.name'], | ||||
| isReady: true, | status: {} | ||||
| statusProcess: [] | |||||
| } | } | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| if (this.domain_id = this.$route.params.domain) { | if (this.domain_id = this.$route.params.domain) { | ||||
| axios.get('/api/v4/domains/' + this.domain_id) | axios.get('/api/v4/domains/' + this.domain_id) | ||||
| .then(response => { | .then(response => { | ||||
| this.domain = response.data | this.domain = response.data | ||||
| if (!this.domain.isConfirmed) { | if (!this.domain.isConfirmed) { | ||||
| $('#domain-verify button').focus() | $('#domain-verify button').focus() | ||||
| } | } | ||||
| this.parseStatusInfo(response.data.statusInfo) | this.status = response.data.statusInfo | ||||
| }) | }) | ||||
| .catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
| } else { | } else { | ||||
| this.$root.errorPage(404) | this.$root.errorPage(404) | ||||
| } | } | ||||
| }, | }, | ||||
| destroyed() { | |||||
| clearTimeout(window.domainRequest) | |||||
| }, | |||||
| methods: { | methods: { | ||||
| confirm() { | confirm() { | ||||
| axios.get('/api/v4/domains/' + this.domain_id + '/confirm') | axios.get('/api/v4/domains/' + this.domain_id + '/confirm') | ||||
| .then(response => { | .then(response => { | ||||
| if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
| this.domain.isConfirmed = true | this.domain.isConfirmed = true | ||||
| this.parseStatusInfo(response.data.statusInfo) | this.status = response.data.statusInfo | ||||
| this.$toast.success(response.data.message) | |||||
| } | } | ||||
| }) | |||||
| }, | |||||
| // Displays domain status information | |||||
| parseStatusInfo(info) { | |||||
| this.statusProcess = info.process | |||||
| this.isReady = info.isReady | |||||
| // Update status process info every 10 seconds | if (response.data.message) { | ||||
| // FIXME: This probably should have some limit, or the interval | this.$toast[response.data.status](response.data.message) | ||||
| // should grow (well, until it could be done with websocket notifications) | |||||
| if (!info.isReady) { | |||||
| window.domainRequest = setTimeout(() => { | |||||
| axios.get('/api/v4/domains/' + this.domain_id) | |||||
| .then(response => { | |||||
| this.domain = response.data | |||||
| this.parseStatusInfo(this.domain.statusInfo) | |||||
| }) | |||||
| .catch(error => { | |||||
| this.parseStatusInfo(info) | |||||
| }) | |||||
| }, 10000); | |||||
| } | } | ||||
| }) | |||||
| }, | }, | ||||
| statusUpdate(domain) { | |||||
| this.domain = Object.assign({}, this.domain, domain) | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||