Merge pull request #396 from YunoHost/enh-dns-autoconf

[enh] quick implementation of domain config panel and dns records auto config
This commit is contained in:
Alexandre Aubin 2021-09-19 23:02:03 +02:00 committed by GitHub
commit ec22a6600d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 438 additions and 28 deletions

View file

@ -84,6 +84,7 @@ export default {
.card-footer {
display: flex;
justify-content: flex-end;
align-items: center;
& > *:not(:first-child) {
margin-left: .5rem;

View file

@ -131,6 +131,25 @@
"disable": "Disable",
"disabled": "Disabled",
"dns": "DNS",
"domain": {
"config": {
"edit": "Edit domain configuration",
"title": "Domain configuration"
},
"dns": {
"auto_config": "Automatic DNS records configuration",
"auto_config_ignored": "ignored, won't be changed by Yunohost unless you check the overwrite option",
"auto_config_ok": "Automatic configuration seems to be OK!",
"auto_config_zone": "Current DNS zone",
"edit": "Edit DNS configuration",
"info": "The automatic DNS records configuration is an experimental feature. <br>Consider saving your current DNS zone from your DNS registrar's interface before pushing records from here.",
"manual_config": "Suggested DNS records for manual configuration",
"push": "Push DNS records to registrar",
"push_force": "Overwrite existing records",
"push_force_confirm": "Are you sure you want to force push all suggested dns records? Be aware that it may overwrite manually or important default records set by you or your registrar.",
"push_force_warning": "It looks like some DNS records that YunoHost would have set are already in the registrar configuration. You can use the overwrite option if you know what you are doing."
}
},
"domain_add": "Add domain",
"domain_add_dns_doc": "… and I have <a href='//yunohost.org/dns_config' target='_blank'>set my DNS correctly</a>.",
"domain_add_dyndns_doc": "… and I want a dynamic DNS service.",
@ -143,6 +162,9 @@
"domain_delete_forbidden_desc": "You cannot remove '{domain}' since it's the default domain, you need to choose another domain (or <a href='#/domains/add'>add a new one</a>) and set it as the default domain to be able to remove this one.",
"domain_dns_config": "DNS configuration",
"domain_dns_longdesc": "View DNS configuration",
"domain_dns_push_failed_to_authenticate": "Failed to authenticate on registrar's API. Most probably the <a href='#/domains/{domain}/config'>credentials</a> are incorrect? (Error: {error})",
"domain_dns_push_managed_in_parent_domain": "The automatic DNS records feature is managed in the parent domain <a href='#/domains/{parent_domain}/dns'>{parent_domain}</a>.",
"domain_dns_push_not_applicable": "The automatic DNS records feature is not applicable to domain {domain},<br> You should manually configure your DNS records following the <a href='https://yunohost.org/dns'>documentation</a> and the suggested configuration below.",
"domain_name": "Domain name",
"domain_visit": "Visit",
"domain_visit_url": "Visit {url}",
@ -374,9 +396,11 @@
"delete": "Delete domain '{name}'",
"install_LE": "Install certificate for '{name}'",
"manual_renew_LE": "Renew certificate for '{name}'",
"push_dns_changes": "Push DNS records to registrar for '{name}'",
"regen_selfsigned": "Renew self-signed certificate for '{name}'",
"revert_to_selfsigned": "Revert to self-signed certificate for '{name}'",
"set_default": "Set '{name}' as default domain"
"set_default": "Set '{name}' as default domain",
"update_config": "Update '{name}' configuration"
},
"firewall": {
"ports": "{action} port {port} ({protocol}, {connection})",

View file

@ -155,6 +155,16 @@ const routes = [
breadcrumb: ['domain-list', 'domain-info']
}
},
{
name: 'domain-config',
path: '/domains/:name/config',
component: () => import(/* webpackChunkName: "views/domain/dns" */ '@/views/domain/DomainConfig'),
props: true,
meta: {
args: { trad: 'config' },
breadcrumb: ['domain-list', 'domain-info', 'domain-config']
}
},
{
name: 'domain-dns',
path: '/domains/:name/dns',

View file

@ -173,4 +173,5 @@ code {
margin-bottom: 0;
padding: 1rem;
background-color: $light;
overflow: auto;
}

View file

@ -111,6 +111,19 @@
</b-form-group>
<hr>
<!-- APP CONFIG PANEL -->
<template v-if="hasConfigPanel">
<b-form-group
:label="$t('app_config_panel_label')" label-for="config"
label-cols-md="4" label-class="font-weight-bold"
>
<b-button id="config" variant="warning" :to="{ name: 'app-config-panel', params: { id } }">
<icon iname="flask" /> {{ $t('app_config_panel') }}
</b-button>
</b-form-group>
<hr>
</template>
<!-- UNINSTALL -->
<b-form-group
:label="$t('app_info_uninstall_desc')" label-for="uninstall"
@ -133,17 +146,6 @@
<icon iname="flask" /> {{ $t('app_actions') }}
</b-button>
</b-form-group>
<hr>
<!-- APP CONFIG PANEL -->
<b-form-group
:label="$t('app_config_panel_label')" label-for="config"
label-cols-md="4" label-class="font-weight-bold"
>
<b-button id="config" variant="warning" :to="{ name: 'app-config-panel', params: { id } }">
<icon iname="flask" /> {{ $t('app_config_panel') }}
</b-button>
</b-form-group>
</card>
<template #skeleton>
@ -178,7 +180,8 @@ export default {
],
infos: undefined,
app: undefined,
form: undefined
form: undefined,
hasConfigPanel: undefined
}
},
@ -248,6 +251,7 @@ export default {
supports_change_url: app.supports_change_url,
permissions
}
this.hasConfigPanel = app.supports_config_panel
},
changeLabel (permName, data) {

View file

@ -0,0 +1,162 @@
<template>
<view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-info-skeleton">
<b-tabs pills card vertical>
<b-tab v-for="{ name, id: id_, sections, help, serverError } in panels"
:key="id_"
:title="name"
>
<template #title>
<icon iname="wrench" /> {{ name }}
</template>
<card-form
:key="id_"
:title="name" icon="wrench" title-tag="h2"
:validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
@submit.prevent="applyConfig(id_)"
>
<template v-if="help" #disclaimer>
<div class="alert alert-info" v-html="help" />
</template>
<template v-for="section in sections">
<div :key="section.id" class="mb-5" v-if="isVisible(section.visible, section)">
<b-card-title v-if="section.name" title-tag="h3">
{{ section.name }} <small v-if="section.help">{{ section.help }}</small>
</b-card-title>
<template v-for="(field, fname) in section.fields">
<form-field :key="fname" v-model="forms[id_][fname]"
:validation="$v.forms[id_][fname]"
v-if="isVisible(field.visible, field)" v-bind="field"
/>
</template>
</div>
</template>
</card-form>
</b-tab>
</b-tabs>
</view-base>
</template>
<script>
import { validationMixin } from 'vuelidate'
import evaluate from 'simple-evaluate'
import api, { objectToParams } from '@/api'
import { formatI18nField, formatYunoHostArguments, formatFormData, pFileReader } from '@/helpers/yunohostArguments'
export default {
name: 'DomainConfig',
mixins: [validationMixin],
props: {
name: { type: String, required: true }
},
data () {
return {
queries: [
['GET', `domains/${this.name}/config?full`]
],
panels: undefined,
forms: undefined,
errors: undefined,
validations: null
}
},
validations () {
return this.validations
},
methods: {
onQueriesResponse (config) {
const forms = {}
const validations_ = {}
const errors_ = {}
const panels_ = []
for (const { id, name, help, sections } of config.panels) {
const panel_ = { id, sections: [] }
if (name) panel_.name = formatI18nField(name)
if (help) panel_.help = formatI18nField(help)
forms[id] = {}
validations_[id] = {}
errors_[id] = {}
for (const { id_, name, help, visible, options } of sections) {
const section_ = { id: id_, isVisible: true, visible }
if (help) section_.help = formatI18nField(help)
if (name) section_.name = formatI18nField(name)
const { form, fields, validations, errors } = formatYunoHostArguments(options)
Object.assign(forms[id], form)
Object.assign(validations_[id], validations)
Object.assign(errors_[id], errors)
section_.fields = fields
panel_.sections.push(section_)
}
panels_.push(panel_)
}
this.forms = forms
this.validations = { forms: validations_ }
this.panels = panels_
this.errors = errors_
},
isVisible (expression, field) {
if (!expression || !field) return true
const context = {}
const promises = []
for (const args of Object.values(this.forms)) {
for (const shortname in args) {
if (args[shortname] instanceof File) {
if (expression.includes(shortname)) {
promises.push(pFileReader(args[shortname], context, shortname, false))
}
} else {
context[shortname] = args[shortname]
}
}
}
// Allow to use match(var,regexp) function
const matchRe = new RegExp('match\\(\\s*(\\w+)\\s*,\\s*"([^"]+)"\\s*\\)', 'g')
let i = 0
Promise.all(promises).then((value) => {
for (const matched of expression.matchAll(matchRe)) {
i++
const varName = matched[1] + '__re' + i.toString()
context[varName] = new RegExp(matched[2], 'm').test(context[matched[1]])
expression = expression.replace(matched[0], varName)
}
try {
field.isVisible = evaluate(context, expression)
} catch (error) {
field.isVisible = false
}
})
// This value should be updated magically when vuejs will detect isVisible changed
return field.isVisible
},
applyConfig (id_) {
formatFormData(this.forms[id_], { promise: true, removeEmpty: false, removeNull: true }).then((formatedData) => {
const args = objectToParams(formatedData)
api.put(
`domains/${this.name}/config`, { key: id_, args }, { key: 'domains.update_config', name: this.name }
).then(response => {
}).catch(err => {
if (err.name !== 'APIBadRequestError') throw err
const panel = this.panels.find(({ id }) => id_ === id)
if (err.data.name) {
this.errors[id_][err.data.name].message = err.message
} else this.$set(panel, 'serverError', err.message)
})
})
}
}
}
</script>

View file

@ -1,18 +1,100 @@
<template>
<view-base :queries="queries" @queries-response="dnsConfig = $event" skeleton="card-info-skeleton">
<template #top>
<p class="alert alert-warning">
<icon iname="warning" /> {{ $t('domain_dns_conf_is_just_a_recommendation') }}
</p>
</template>
<view-base
:queries="queries" @queries-response="onQueriesResponse" :loading="loading"
skeleton="card-info-skeleton"
>
<card v-if="showAutoConfigCard" :title="$t('domain.dns.auto_config')" icon="wrench">
<b-alert variant="warning">
<icon iname="flask" /> <icon iname="warning" /> <span v-html="$t('domain.dns.info')" />
</b-alert>
<card :title="$t('domain_dns_config')" icon="globe" no-body>
<pre class="log"><code>{{ dnsConfig }}</code></pre>
<!-- AUTO CONFIG CHANGES -->
<template v-if="dnsChanges">
<div class="mb-3" v-for="{ action, records, icon, variant} in dnsChanges" :key="icon">
<h4 class="mt-4 mb-2">
{{ action }}
</h4>
<div class="log">
<div
v-for="({ name: record, spaces, old_content, content, type, managed_by_yunohost }, i) in records" :key="i"
class="records px-2" :class="{ 'ignored': managed_by_yunohost === false && force !== true }"
:title="managed_by_yunohost === false && force !== true ? $t('domain.dns.auto_config_ignored') : null"
>
<icon :iname="icon" :class="'text-' + variant" />
{{ record }}
<span class="bg-dark text-light px-1 rounded">{{ type }}</span>{{ spaces }}
<span v-if="old_content"><span class="text-danger">{{ old_content }}</span> --> </span>
<span :class="{ 'text-success': old_content }">{{ content }}</span>
</div>
</div>
</div>
</template>
<!-- CONFIG OK ALERT -->
<b-alert v-else-if="dnsChanges === null" variant="success" class="m-0">
<icon iname="thumbs-up" /> {{ $t('domain.dns.auto_config_ok') }}
</b-alert>
<!-- CONFIG ERROR ALERT -->
<template v-if="dnsErrors && dnsErrors.length">
<b-alert
v-for="({ variant, icon, message }, i) in dnsErrors" :key="i"
:variant="variant" :class="dnsErrors.length === 1 ? 'm-0' : ''"
>
<icon :iname="icon" /> <span v-html="message" />
</b-alert>
</template>
<!-- CONFIG OVERWRITE DISCLAIMER -->
<b-alert v-if="force !== null" variant="warning">
<icon iname="warning" /> <span v-html="$t('domain.dns.push_force_warning')" />
</b-alert>
<!-- CONFIG PUSH SUBMIT -->
<template v-if="dnsChanges" #buttons>
<b-form-checkbox v-if="force !== null" v-model="force">
{{ $t('domain.dns.push_force') }}
</b-form-checkbox>
<b-button variant="success" @click="pushDnsChanges">
{{ $t('domain.dns.push') }}
</b-button>
</template>
</card>
<!-- CURRENT DNS ZONE -->
<card
v-if="showAutoConfigCard && dnsZone && dnsZone.length"
:title="$t('domain.dns.auto_config_zone')" icon="globe" no-body
>
<div class="log">
<div v-for="({ name: record, spaces, content, type }, i) in dnsZone" :key="'zone-' + i" class="records">
{{ record }}
<span class="bg-dark text-light px-1 rounded">{{ type }}</span>{{ spaces }}
<span>{{ content }}</span>
</div>
</div>
</card>
<!-- MANUAL CONFIG CARD -->
<card
v-if="showManualConfigCard"
:title="$t('domain.dns.manual_config')" icon="globe" no-body
>
<b-alert variant="warning" class="m-0">
<icon iname="warning" /> {{ $t('domain_dns_conf_is_just_a_recommendation') }}
</b-alert>
<pre class="log">{{ dnsConfig }}</pre>
</card>
</view-base>
</template>
<script>
import api from '@/api'
import { isEmptyValue } from '@/helpers/commons'
export default {
name: 'DomainDns',
@ -23,10 +105,129 @@ export default {
data () {
return {
queries: [
['GET', `domains/${this.name}/dns`]
['GET', `domains/${this.name}/dns/suggest`]
],
dnsConfig: ''
loading: true,
showAutoConfigCard: true,
showManualConfigCard: false,
dnsConfig: '',
dnsChanges: undefined,
dnsErrors: undefined,
dnsZone: undefined,
force: null
}
},
methods: {
onQueriesResponse (suggestedConfig) {
this.dnsConfig = suggestedConfig
},
getDnsChanges () {
api.post(
`domains/${this.name}/dns/push?dry_run`, {}, null, { wait: false, websocket: false }
).then(dnsChanges => {
function getLongest (arr, key) {
return arr.reduce((acc, obj) => {
if (obj[key].length > acc) return obj[key].length
return acc
}, 0)
}
const changes = []
let canForce = false
const categories = [
{ action: 'create', icon: 'plus', variant: 'success' },
{ action: 'update', icon: 'exchange', variant: 'warning' },
{ action: 'delete', icon: 'minus', variant: 'danger' }
]
categories.forEach(category => {
const records = dnsChanges[category.action]
if (records && records.length > 0) {
const longestName = getLongest(records, 'name')
const longestType = getLongest(records, 'type')
records.forEach(record => {
record.name = record.name + ' '.repeat(longestName - record.name.length + 1)
record.spaces = ' '.repeat(longestType - record.type.length + 1)
if (record.managed_by_yunohost === false) canForce = true
})
changes.push({ ...category, records })
}
})
const unchanged = dnsChanges.unchanged
if (unchanged) {
const longestName = getLongest(unchanged, 'name')
const longestType = getLongest(unchanged, 'type')
unchanged.forEach(record => {
record.name = record.name + ' '.repeat(longestName - record.name.length + 1)
record.spaces = ' '.repeat(longestType - record.type.length + 1)
})
this.dnsZone = unchanged
}
this.dnsChanges = changes.length > 0 ? changes : null
this.force = canForce ? false : null
this.loading = false
}).catch(err => {
if (err.name !== 'APIBadRequestError') throw err
const key = err.data.error_key
if (key === 'domain_dns_push_managed_in_parent_domain') {
const message = this.$t(key, err.data)
this.dnsErrors = [{ icon: 'info', variant: 'info', message }]
} else if (key === 'domain_dns_push_failed_to_authenticate') {
const message = this.$t(key, err.data)
this.dnsErrors = [{ icon: 'ban', variant: 'danger', message }]
} else {
this.showManualConfigCard = true
this.showAutoConfigCard = false
}
this.loading = false
})
},
async pushDnsChanges () {
if (this.force) {
const confirmed = await this.$askConfirmation(this.$i18n.t('domain.dns.push_force_confirm'))
if (!confirmed) return
}
api.post(
`domains/${this.name}/dns/push${this.force ? '?force' : ''}`,
{},
{ key: 'domains.push_dns_changes', name: this.name }
).then(responseData => {
if (isEmptyValue(responseData)) {
this.dnsChanges = null
} else {
this.loading = true
this.getDnsChanges()
this.dnsErrors = Object.keys(responseData).reduce((acc, key) => {
const args = key === 'warnings'
? { icon: 'warning', variant: 'warning' }
: { icon: 'ban', variant: 'danger' }
responseData[key].forEach(message => acc.push({ ...args, message }))
return acc
}, [])
}
})
}
},
created () {
this.getDnsChanges()
}
}
</script>
<style lang="scss" scoped>
.records {
white-space: pre;
font-family: $font-family-monospace;
&.ignored {
opacity: 0.3;
text-decoration: line-through;
}
}
</style>

View file

@ -18,10 +18,17 @@
</b-button>
<hr>
<!-- DOMAIN CONFIG -->
<p>{{ $t('domain.config.edit') }}</p>
<b-button variant="warning" :to="{ name: 'domain-config', param: { name } }">
<icon iname="flask" /> {{ $t('domain.config.title') }}
</b-button>
<hr>
<!-- DNS CONFIG -->
<p>{{ $t('domain_dns_longdesc') }}</p>
<b-button variant="outline-dark" :to="{ name: 'domain-dns', param: { name } }">
<icon iname="globe" /> {{ $t('domain_dns_config') }}
<p>{{ $t('domain.dns.edit') }}</p>
<b-button variant="warning" :to="{ name: 'domain-dns', param: { name } }">
<icon iname="flask" /> {{ $t('domain_dns_config') }}
</b-button>
<hr>

View file

@ -87,7 +87,7 @@ export default {
Object.assign(requestArgs, this.form)
if (!requestArgs.delete) delete requestArgs.delete
if (!requestArgs.update) delete requestArgs.update
const data = formatFormData(requestArgs)
const data = await formatFormData(requestArgs)
api.post('users/import', data, { asFormData: true }).then(() => {
// Reset all cached data related to users.
this.$store.dispatch('RESET_CACHE_DATA', ['users', 'users_details', 'groups', 'permissions'])

View file

@ -58,7 +58,7 @@ export default {
data () {
return {
queries: [
['GET', { uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups' }]
['GET', { uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups', storeKey: 'users' }]
],
search: ''
}