Page MenuHomePhorge
Differential D1045 Diff 2677 src/resources/vue/Domain/Info.vue

Changeset View

Standalone View

View Options

src/resources/vue/Domain/Info.vue

<template> <template>
<div class="container"> <div class="container">
<div v-if="domain && !is_confirmed" class="card" id="domain-verify"> <div v-if="!isReady" id="domain-status-box" class="card">
<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 have 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>
<router-link v-if="item.link" :to="{ path: item.link }">{{ item.title }}</router-link>
<span v-if="!item.link">{{ item.title }}</span>
</li>
</ul>
</div>
</div>
</div>
<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>
<li>TXT entry with value: <code>{{ domain.hash_text }}</code></li> <li>TXT entry with value: <code>{{ domain.hash_text }}</code></li>
<li>or CNAME entry: <code>{{ domain.hash_cname }}.{{ domain.namespace }}. IN CNAME {{ domain.hash_code }}.{{ domain.namespace }}.</code></li> <li>or CNAME entry: <code>{{ domain.hash_cname }}.{{ domain.namespace }}. IN CNAME {{ domain.hash_code }}.{{ domain.namespace }}.</code></li>
</ul> </ul>
When this is done press the button below to start the verification.</p> When this is done press the button below to start the verification.</p>
<p>Here's a sample zone file for your domain: <pre>{{ domain.dns.join("\n") }}</pre></p> <p>Here's a sample zone file for your domain: <pre>{{ domain.dns.join("\n") }}</pre></p>
<button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> Verify</button> <button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> Verify</button>
</div> </div>
</div> </div>
</div> </div>
<div v-if="domain && is_confirmed" class="card" id="domain-config"> <div v-if="domain && domain.isConfirmed" class="card" id="domain-config">
<div class="card-body"> <div class="card-body">
<div class="card-title">Domain configuration</div> <div class="card-title">Domain configuration</div>
<div class="card-text"> <div class="card-text">
<p>In order to let {{ app_name }} receive email traffic for your domain you need to adjust <p>In order to let {{ app_name }} receive email traffic for your domain you need to adjust
the DNS settings, more precisely the MX entries, accordingly.</p> the DNS settings, more precisely the MX entries, accordingly.</p>
<p>Edit your domain's zone file and replace existing MX <p>Edit your domain's zone file and replace existing MX
entries with the following values: <pre>{{ domain.config.join("\n") }}</pre></p> entries with the following values: <pre>{{ domain.config.join("\n") }}</pre></p>
<p>If you don't know how to set DNS entries for your domain, <p>If you don't know how to set DNS entries for your domain,
please contact the registration service where you registered please contact the registration service where you registered
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>
export default { export default {
data() { data() {
return { return {
domain_id: null, domain_id: null,
domain: null, domain: null,
is_confirmed: false, app_name: window.config['app.name'],
app_name: window.config['app.name'] isReady: true,
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.is_confirmed = response.data.confirmed
this.domain = response.data this.domain = response.data
if (!this.is_confirmed) { if (!this.domain.isConfirmed) {
$('#domain-verify button').focus() $('#domain-verify button').focus()
} }
this.parseStatusInfo(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.is_confirmed = true this.domain.isConfirmed = true
this.parseStatusInfo(response.data.statusInfo)
this.$toastr('success', response.data.message) this.$toastr('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
// FIXME: This probably should have some limit, or the interval
// 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);
} }
},
} }
} }
</script> </script>