Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Domain/Info.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<status-component :status="status" @status-update="statusUpdate"></status-component> | <status-component v-if="domain_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | ||||
<div v-if="domain" class="card"> | <div class="card"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title">{{ domain.namespace }}</div> | <div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div> | ||||
<div class="card-title" v-else>{{ $t('form.domain') }}</div> | |||||
<div class="card-text"> | <div class="card-text"> | ||||
<ul class="nav nav-tabs mt-3" role="tablist"> | <ul class="nav nav-tabs mt-3" role="tablist"> | ||||
<li class="nav-item" v-if="!domain.isConfirmed"> | <li class="nav-item"> | ||||
<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | |||||
{{ $t('domain.verify') }} | |||||
</a> | |||||
</li> | |||||
<li class="nav-item" v-if="domain.isConfirmed"> | |||||
<a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | <a class="nav-link active" id="tab-general" href="#general" role="tab" aria-controls="general" aria-selected="true" @click="$root.tab"> | ||||
{{ $t('domain.config') }} | {{ $t('form.general') }} | ||||
</a> | </a> | ||||
</li> | </li> | ||||
<li class="nav-item"> | <li class="nav-item" v-if="domain.id"> | ||||
<a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab"> | <a class="nav-link" id="tab-settings" href="#settings" role="tab" aria-controls="settings" aria-selected="false" @click="$root.tab"> | ||||
{{ $t('form.settings') }} | {{ $t('form.settings') }} | ||||
</a> | </a> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div class="tab-content"> | <div class="tab-content"> | ||||
<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general"> | <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="tab-general"> | ||||
<div v-if="!domain.isConfirmed" class="card-body" id="domain-verify"> | <form @submit.prevent="submit" class="card-body"> | ||||
<div v-if="domain.id" class="row plaintext mb-3"> | |||||
<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label> | |||||
<div class="col-sm-8"> | |||||
<span :class="$root.domainStatusClass(domain) + ' form-control-plaintext'" id="status">{{ $root.domainStatusText(domain) }}</span> | |||||
</div> | |||||
</div> | |||||
<div class="row mb-3"> | |||||
<label for="name" class="col-sm-4 col-form-label">{{ $t('domain.namespace') }}</label> | |||||
<div class="col-sm-8"> | |||||
<input type="text" class="form-control" id="namespace" v-model="domain.namespace" :disabled="domain.id"> | |||||
</div> | |||||
</div> | |||||
<div v-if="!domain.id" id="domain-packages" class="row"> | |||||
<label class="col-sm-4 col-form-label">{{ $t('user.package') }}</label> | |||||
<package-select class="col-sm-8 pt-sm-1" type="domain"></package-select> | |||||
</div> | |||||
<div v-if="domain.id" id="domain-skus" class="row"> | |||||
<label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label> | |||||
<subscription-select v-if="domain.id" class="col-sm-8 pt-sm-1" type="domain" :object="domain" :readonly="true"></subscription-select> | |||||
</div> | |||||
<button v-if="!domain.id" class="btn btn-primary mt-3" type="submit"> | |||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | |||||
</button> | |||||
</form> | |||||
<hr class="m-0" v-if="domain.id"> | |||||
<div v-if="domain.id && !domain.isConfirmed" class="card-body" id="domain-verify"> | |||||
<h5 class="mb-3">{{ $t('domain.verify') }}</h5> | |||||
<div class="card-text"> | <div class="card-text"> | ||||
<p>{{ $t('domain.verify-intro') }}</p> | <p>{{ $t('domain.verify-intro') }}</p> | ||||
<p> | <p> | ||||
<span v-html="$t('domain.verify-dns')"></span> | <span v-html="$t('domain.verify-dns')"></span> | ||||
<ul> | <ul> | ||||
<li>{{ $t('domain.verify-dns-txt') }} <code>{{ domain.hash_text }}</code></li> | <li>{{ $t('domain.verify-dns-txt') }} <code>{{ domain.hash_text }}</code></li> | ||||
<li>{{ $t('domain.verify-dns-cname') }} <code>{{ domain.hash_cname }}.{{ domain.namespace }}. IN CNAME {{ domain.hash_code }}.{{ domain.namespace }}.</code></li> | <li>{{ $t('domain.verify-dns-cname') }} <code>{{ domain.hash_cname }}.{{ domain.namespace }}. IN CNAME {{ domain.hash_code }}.{{ domain.namespace }}.</code></li> | ||||
</ul> | </ul> | ||||
<span>{{ $t('domain.verify-outro') }}</span> | <span>{{ $t('domain.verify-outro') }}</span> | ||||
</p> | </p> | ||||
<p>{{ $t('domain.verify-sample') }} <pre>{{ domain.dns.join("\n") }}</pre></p> | <p>{{ $t('domain.verify-sample') }} <pre>{{ domain.dns.join("\n") }}</pre></p> | ||||
<button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.verify') }}</button> | <button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.verify') }}</button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="domain.isConfirmed" class="card-body" id="domain-config"> | <div v-if="domain.isConfirmed" class="card-body" id="domain-config"> | ||||
<h5 class="mb-3">{{ $t('domain.config') }}</h5> | |||||
<div class="card-text"> | <div class="card-text"> | ||||
<p>{{ $t('domain.config-intro', { app: $root.appName }) }}</p> | <p>{{ $t('domain.config-intro', { app: $root.appName }) }}</p> | ||||
<p>{{ $t('domain.config-sample') }} <pre>{{ domain.mx.join("\n") }}</pre></p> | <p>{{ $t('domain.config-sample') }} <pre>{{ domain.mx.join("\n") }}</pre></p> | ||||
<p>{{ $t('domain.config-hint') }}</p> | <p>{{ $t('domain.config-hint') }}</p> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings"> | <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings"> | ||||
Show All 17 Lines | <div class="container"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import ListInput from '../Widgets/ListInput' | import ListInput from '../Widgets/ListInput' | ||||
import PackageSelect from '../Widgets/PackageSelect' | |||||
import StatusComponent from '../Widgets/Status' | import StatusComponent from '../Widgets/Status' | ||||
import SubscriptionSelect from '../Widgets/SubscriptionSelect' | |||||
export default { | export default { | ||||
components: { | components: { | ||||
ListInput, | ListInput, | ||||
StatusComponent | PackageSelect, | ||||
StatusComponent, | |||||
SubscriptionSelect | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
domain_id: null, | domain_id: null, | ||||
domain: null, | domain: {}, | ||||
spf_whitelist: [], | spf_whitelist: [], | ||||
status: {} | status: {} | ||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
if (this.domain_id = this.$route.params.domain) { | this.domain_id = this.$route.params.domain | ||||
if (this.domain_id !== 'new') { | |||||
this.$root.startLoading() | this.$root.startLoading() | ||||
axios.get('/api/v4/domains/' + this.domain_id) | axios.get('/api/v4/domains/' + this.domain_id) | ||||
.then(response => { | .then(response => { | ||||
this.$root.stopLoading() | this.$root.stopLoading() | ||||
this.domain = response.data | this.domain = response.data | ||||
this.spf_whitelist = this.domain.config.spf_whitelist || [] | this.spf_whitelist = this.domain.config.spf_whitelist || [] | ||||
if (!this.domain.isConfirmed) { | if (!this.domain.isConfirmed) { | ||||
$('#domain-verify button').focus() | $('#domain-verify button').focus() | ||||
} | } | ||||
this.status = response.data.statusInfo | this.status = response.data.statusInfo | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
} else { | |||||
this.$root.errorPage(404) | |||||
} | } | ||||
}, | }, | ||||
mounted() { | |||||
$('#namespace').focus() | |||||
}, | |||||
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.status = response.data.statusInfo | this.status = response.data.statusInfo | ||||
} | } | ||||
if (response.data.message) { | if (response.data.message) { | ||||
this.$toast[response.data.status](response.data.message) | this.$toast[response.data.status](response.data.message) | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
statusUpdate(domain) { | statusUpdate(domain) { | ||||
this.domain = Object.assign({}, this.domain, domain) | this.domain = Object.assign({}, this.domain, domain) | ||||
}, | }, | ||||
submit() { | |||||
this.$root.clearFormValidation($('#general form')) | |||||
let method = 'post' | |||||
let location = '/api/v4/domains' | |||||
this.domain.package = $('#domain-packages input:checked').val() | |||||
axios[method](location, this.domain) | |||||
.then(response => { | |||||
this.$toast.success(response.data.message) | |||||
this.$router.push({ name: 'domains' }) | |||||
}) | |||||
}, | |||||
submitSettings() { | submitSettings() { | ||||
this.$root.clearFormValidation($('#settings form')) | this.$root.clearFormValidation($('#settings form')) | ||||
let post = { spf_whitelist: this.spf_whitelist } | let post = { spf_whitelist: this.spf_whitelist } | ||||
axios.post('/api/v4/domains/' + this.domain_id + '/config', post) | axios.post('/api/v4/domains/' + this.domain_id + '/config', post) | ||||
.then(response => { | .then(response => { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
}) | }) | ||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |