mirror of
https://github.com/jwinterm/modoboa.git
synced 2026-10-20 06:08:35 +02:00
Better domain detail view.
This commit is contained in:
Antoine Nguyen
@@ -2,8 +2,8 @@
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">
|
||||
<translate class="headline">Administrators of </translate>
|
||||
{{ domain.name }}
|
||||
<translate v-if="dialogMode" class="headline">Administrators of {{ domain.name }}</translate>
|
||||
<translate v-else class="headline">Administrators</translate>
|
||||
</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
@@ -52,7 +52,7 @@
|
||||
<v-icon small>mdi-plus</v-icon> <translate>Add administrator</translate>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-card-actions v-if="dialogMode">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="grey darken-1"
|
||||
@@ -71,7 +71,13 @@ import domains from '@/api/domains'
|
||||
import { bus } from '@/main'
|
||||
|
||||
export default {
|
||||
props: ['domain'],
|
||||
props: {
|
||||
domain: Object,
|
||||
dialogMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
accounts: [],
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<translate class="headline">DNS configuration overview for {{ domain.name }}</translate>
|
||||
<span class="headline">DNS</span>
|
||||
<v-btn icon :title="'DNS configuration help'|translate" @click="showConfigHelp = true">
|
||||
<v-icon>mdi-information-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<translate class="overline">MX records</translate>
|
||||
@@ -90,25 +93,37 @@
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="6"><translate>DKIM key</translate></v-col>
|
||||
<v-col cols="6">
|
||||
<div v-if="domain.dkim_public_key">
|
||||
<v-btn color="primary" small>
|
||||
<translate>Show key</translate>
|
||||
</v-btn>
|
||||
<v-btn icon><v-icon>mdi-refresh</v-icon></v-btn>
|
||||
</div>
|
||||
<translate v-else>Not generated</translate>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="grey darken-1"
|
||||
text
|
||||
@click="close"
|
||||
>
|
||||
<translate>Close</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<v-dialog v-model="showConfigHelp"
|
||||
max-width="800px"
|
||||
persistent
|
||||
>
|
||||
<domain-dns-config :domain="domain" @close="showConfigHelp = false" />
|
||||
</v-dialog>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import domains from '@/api/domains'
|
||||
import DomainDNSConfig from './DomainDNSConfig'
|
||||
|
||||
export default {
|
||||
props: ['domain'],
|
||||
components: {
|
||||
'domain-dns-config': DomainDNSConfig
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
detail: {},
|
||||
@@ -116,14 +131,11 @@ export default {
|
||||
{ text: this.$gettext('Name'), value: 'name' },
|
||||
{ text: this.$gettext('Address'), value: 'address' },
|
||||
{ text: this.$gettext('Updated'), value: 'updated' }
|
||||
]
|
||||
],
|
||||
showConfigHelp: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.detail = {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
domain: {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<v-chip :color="chipType"
|
||||
@click="$emit('click', $event)"
|
||||
small>
|
||||
<v-chip :color="chipType" small>
|
||||
{{ label }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">DNS</span>
|
||||
<v-btn icon :title="'DNS configuration help'|translate" @click="showConfigHelp = true">
|
||||
<v-icon>mdi-information-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="6"><translate>Status</translate></v-col>
|
||||
<v-col cols="6">
|
||||
<dns-status-chip :status="domain.dns_global_status" @click="showDetail = true" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="6"><translate>DKIM key</translate></v-col>
|
||||
<v-col cols="6">
|
||||
<div v-if="domain.dkim_public_key">
|
||||
<v-btn color="primary" small>
|
||||
<translate>Show key</translate>
|
||||
</v-btn>
|
||||
<v-btn icon><v-icon>mdi-refresh</v-icon></v-btn>
|
||||
</div>
|
||||
<translate v-else>Not generated</translate>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-dialog v-model="showConfigHelp"
|
||||
max-width="800px"
|
||||
persistent
|
||||
>
|
||||
<domain-dns-config :domain="domain" @close="showConfigHelp = false" />
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showDetail"
|
||||
persistent
|
||||
max-width="800px">
|
||||
<dns-detail @close="showDetail = false" :domain="domain" />
|
||||
</v-dialog>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DomainDNSConfig from './DomainDNSConfig'
|
||||
import DNSDetail from './DNSDetail'
|
||||
import DNSStatusChip from './DNSStatusChip'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'dns-detail': DNSDetail,
|
||||
'dns-status-chip': DNSStatusChip,
|
||||
'domain-dns-config': DomainDNSConfig
|
||||
},
|
||||
props: ['domain'],
|
||||
data () {
|
||||
return {
|
||||
showConfigHelp: false,
|
||||
showDetail: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,129 +1,119 @@
|
||||
<template>
|
||||
<v-layout>
|
||||
<v-flex>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<h1 class="headline"><translate>Edit domain</translate></h1>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-expansion-panels v-model="panel">
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<translate>General</translate>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="8"
|
||||
class="text--secondary"
|
||||
>
|
||||
<v-fade-transition leave-absolute>
|
||||
<span v-if="open"></span>
|
||||
<v-row
|
||||
v-else
|
||||
no-gutters
|
||||
style="width: 100%"
|
||||
>
|
||||
<v-col cols="6">
|
||||
<translate>Name: </translate> {{ editedDomain.name }}
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<translate>Type: </translate> {{ editedDomain.type }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-fade-transition>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<domain-general-form ref="generalForm" :domain="editedDomain" />
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<translate>DNS</translate>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="8"
|
||||
class="text--secondary"
|
||||
>
|
||||
<v-fade-transition leave-absolute>
|
||||
<span v-if="open"></span>
|
||||
<v-row
|
||||
v-else
|
||||
no-gutters
|
||||
style="width: 100%"
|
||||
>
|
||||
<v-col cols="6">
|
||||
<translate class="mr-2">DNS checks</translate>
|
||||
<v-icon color="success" v-if="editedDomain.enable_dns_checks">mdi-check-circle-outline</v-icon>
|
||||
<v-icon v-else>mdi-close-circle-outline</v-icon>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<translate class="mr-2">DKIM signing</translate>
|
||||
<v-icon color="success" v-if="editedDomain.enable_dkim">mdi-check-circle-outline</v-icon>
|
||||
<v-icon v-else>mdi-close-circle-outline</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-fade-transition>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<domain-dns-form ref="dnsForm" :domain="editedDomain" />
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<translate>Limitations</translate>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="8"
|
||||
class="text--secondary"
|
||||
>
|
||||
<v-fade-transition leave-absolute>
|
||||
<span v-if="open"></span>
|
||||
<v-row
|
||||
v-else
|
||||
no-gutters
|
||||
style="width: 100%"
|
||||
>
|
||||
<v-col cols="6">
|
||||
<translate class="mr-2">Quota: </translate> {{ domain.quota }}
|
||||
</v-col>
|
||||
<v-col cols="6" v-if="domain.message_sending_limit">
|
||||
<translate class="mr-2">Sending limit: </translate> {{ domain.message_sending_limit }}
|
||||
</v-col>
|
||||
<v-col cols="6" v-else>
|
||||
<translate class="mr-2">No sending limit</translate>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-fade-transition>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<domain-limitations-form :domain="editedDomain" />
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey darken-1" text @click="close">
|
||||
<translate>Cancel</translate>
|
||||
</v-btn>
|
||||
<v-btn color="primary darken-1" text @click="save">
|
||||
<translate>Save</translate>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<div>
|
||||
<v-expansion-panels v-model="panel">
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<translate>General</translate>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="8"
|
||||
class="text--secondary"
|
||||
>
|
||||
<v-fade-transition leave-absolute>
|
||||
<span v-if="open"></span>
|
||||
<v-row
|
||||
v-else
|
||||
no-gutters
|
||||
style="width: 100%"
|
||||
>
|
||||
<v-col cols="6">
|
||||
<translate>Name: </translate> {{ editedDomain.name }}
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<translate>Type: </translate> {{ editedDomain.type }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-fade-transition>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<domain-general-form ref="generalForm" :domain="editedDomain" />
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<translate>DNS</translate>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="8"
|
||||
class="text--secondary"
|
||||
>
|
||||
<v-fade-transition leave-absolute>
|
||||
<span v-if="open"></span>
|
||||
<v-row
|
||||
v-else
|
||||
no-gutters
|
||||
style="width: 100%"
|
||||
>
|
||||
<v-col cols="6">
|
||||
<translate class="mr-2">DNS checks</translate>
|
||||
<v-icon color="success" v-if="editedDomain.enable_dns_checks">mdi-check-circle-outline</v-icon>
|
||||
<v-icon v-else>mdi-close-circle-outline</v-icon>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<translate class="mr-2">DKIM signing</translate>
|
||||
<v-icon color="success" v-if="editedDomain.enable_dkim">mdi-check-circle-outline</v-icon>
|
||||
<v-icon v-else>mdi-close-circle-outline</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-fade-transition>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<domain-dns-form ref="dnsForm" :domain="editedDomain" />
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<translate>Limitations</translate>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="8"
|
||||
class="text--secondary"
|
||||
>
|
||||
<v-fade-transition leave-absolute>
|
||||
<span v-if="open"></span>
|
||||
<v-row
|
||||
v-else
|
||||
no-gutters
|
||||
style="width: 100%"
|
||||
>
|
||||
<v-col cols="6">
|
||||
<translate class="mr-2">Quota: </translate> {{ domain.quota }}
|
||||
</v-col>
|
||||
<v-col cols="6" v-if="domain.message_sending_limit">
|
||||
<translate class="mr-2">Sending limit: </translate> {{ domain.message_sending_limit }}
|
||||
</v-col>
|
||||
<v-col cols="6" v-else>
|
||||
<translate class="mr-2">No sending limit</translate>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-fade-transition>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<domain-limitations-form :domain="editedDomain" />
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
<div class="mt-4 d-flex justify-end">
|
||||
<v-btn color="grey lighten-1" @click="$router.go(-1)">
|
||||
<translate>Cancel</translate>
|
||||
</v-btn>
|
||||
<v-btn class="ml-4" color="primary darken-1" @click="save">
|
||||
<translate>Save</translate>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -146,11 +136,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.editedDomain = {}
|
||||
this.panel = 0
|
||||
},
|
||||
async save () {
|
||||
if (this.$refs.generalForm !== undefined) {
|
||||
const valid = await this.$refs.generalForm.$refs.observer.validate()
|
||||
@@ -159,7 +144,6 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('domains/updateDomain', this.editedDomain).then(resp => {
|
||||
this.close()
|
||||
bus.$emit('notification', { msg: this.$gettext('Domain updated') })
|
||||
})
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</v-btn>
|
||||
</td>
|
||||
<td>
|
||||
<dns-status-chip :status="item.dns_global_status" @click="openDNSDetail(item)" />
|
||||
<dns-status-chip :status="item.dns_global_status" />
|
||||
</td>
|
||||
<td>
|
||||
<v-progress-linear v-model="item.allocated_quota_in_percent" />
|
||||
@@ -102,12 +102,6 @@
|
||||
max-width="800px">
|
||||
<dns-detail @close="showDNSdetail = false" :domain="selectedDomain" />
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showDomainForm"
|
||||
persistent
|
||||
max-width="800px"
|
||||
>
|
||||
<domain-form :domain="selectedDomain" @close="showDomainForm = false" />
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showAliasForm"
|
||||
persistent
|
||||
max-width="800px">
|
||||
@@ -124,6 +118,7 @@
|
||||
<administrator-list
|
||||
:domain="selectedDomain"
|
||||
@close="showAdminList = false"
|
||||
dialog-mode
|
||||
/>
|
||||
</v-dialog>
|
||||
</v-card>
|
||||
@@ -138,7 +133,6 @@ import ConfirmDialog from '@/components/layout/ConfirmDialog'
|
||||
import DNSDetail from '@/components/domains/DNSDetail'
|
||||
import DNSStatusChip from './DNSStatusChip'
|
||||
import DomainAliasForm from '@/components/domains/DomainAliasForm'
|
||||
import DomainForm from '@/components/domains/DomainForm'
|
||||
import MenuItems from '@/components/tools/MenuItems'
|
||||
|
||||
export default {
|
||||
@@ -148,7 +142,6 @@ export default {
|
||||
'dns-detail': DNSDetail,
|
||||
'dns-status-chip': DNSStatusChip,
|
||||
DomainAliasForm,
|
||||
DomainForm,
|
||||
MenuItems
|
||||
},
|
||||
computed: mapGetters({
|
||||
@@ -176,7 +169,6 @@ export default {
|
||||
showConfirmDialog: false,
|
||||
showAliasForm: false,
|
||||
showDNSdetail: false,
|
||||
showDomainForm: false,
|
||||
search: '',
|
||||
selected: [],
|
||||
expanded: [],
|
||||
@@ -219,8 +211,7 @@ export default {
|
||||
this.closeDomainAliasForm()
|
||||
},
|
||||
editDomain (domain) {
|
||||
this.selectedDomain = domain
|
||||
this.showDomainForm = true
|
||||
this.$router.push({ name: 'DomainEdit', params: { id: domain.pk } })
|
||||
},
|
||||
editDomainAlias (domain, alias) {
|
||||
this.selectedDomain = domain
|
||||
|
||||
@@ -33,6 +33,14 @@ const routes = [
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/domains/:id/edit',
|
||||
name: 'DomainEdit',
|
||||
component: () => import('../views/DomainEdit.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/parameters/:app',
|
||||
name: 'ParametersEdit',
|
||||
|
||||
@@ -2,18 +2,21 @@
|
||||
<div>
|
||||
<v-toolbar flat>
|
||||
<v-toolbar-title><translate>Domain</translate> {{ domain.name }}</v-toolbar-title>
|
||||
<v-btn color="primary" icon @click="showEditForm = true"><v-icon>mdi-circle-edit-outline</v-icon></v-btn>
|
||||
<v-btn icon @click="showAdminList = true" :title="'Show administrator list'|translate">
|
||||
<v-icon>mdi-account-supervisor</v-icon>
|
||||
<v-btn color="primary" icon :to="{ name: 'DomainEdit', params: { id: domain.pk } }">
|
||||
<v-icon>mdi-circle-edit-outline</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<v-layout>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<domain-summary :domain="domain" />
|
||||
<div class="mt-4" />
|
||||
<administrator-list
|
||||
:domain="domain"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<domain-dns-summary :domain="domain" />
|
||||
<dns-detail :domain="domain" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-layout>
|
||||
@@ -33,31 +36,22 @@
|
||||
>
|
||||
<domain-form :domain="domain" @close="showEditForm = false" />
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showAdminList"
|
||||
persistent
|
||||
max-width="800px"
|
||||
>
|
||||
<administrator-list
|
||||
:domain="domain"
|
||||
@close="showAdminList = false"
|
||||
/>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import domains from '@/api/domains'
|
||||
import AdministratorList from '@/components/domains/AdministratorList'
|
||||
import DNSDetail from '@/components/domains/DNSDetail'
|
||||
import DomainForm from '@/components/domains/DomainForm'
|
||||
import DomainDNSSummary from '@/components/domains/DomainDNSSummary'
|
||||
import DomainSummary from '@/components/domains/DomainSummary'
|
||||
import TimeSerieChart from '@/components/tools/TimeSerieChart'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AdministratorList,
|
||||
'dns-detail': DNSDetail,
|
||||
DomainForm,
|
||||
'domain-dns-summary': DomainDNSSummary,
|
||||
DomainSummary,
|
||||
TimeSerieChart
|
||||
},
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="text-h4"><translate>Edit domain</translate></span>
|
||||
<div class="mt-4" />
|
||||
<domain-form :domain="domain" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import domains from '@/api/domains'
|
||||
import DomainForm from '@/components/domains/DomainForm'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DomainForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
domain: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
domains.getDomain(this.$route.params.id).then(resp => {
|
||||
this.domain = resp.data
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user