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

[enh] quick implementation of domain config panel and dns records auto config

app/src/components/globals/Card.vue

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

app/src/i18n/locales/en.json

@@ -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})",

app/src/router/routes.js

@@ -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',

app/src/scss/main.scss

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

app/src/views/app/AppInfo.vue

@@ -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) {

app/src/views/domain/DomainConfig.vue

@@ -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>

app/src/views/domain/DomainDns.vue

@@ -1,18 +1,100 @@
 <template>
-  <view-base :queries="queries" @queries-response="dnsConfig = $event" skeleton="card-info-skeleton">
+  <view-base
-    <template #top>
+    :queries="queries" @queries-response="onQueriesResponse" :loading="loading"
-      <p class="alert alert-warning">
+    skeleton="card-info-skeleton"
-        <icon iname="warning" /> {{ $t('domain_dns_conf_is_just_a_recommendation') }}
+  >
-      </p>
+    <card v-if="showAutoConfigCard" :title="$t('domain.dns.auto_config')" icon="wrench">
-    </template>
+      <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>
+      <!-- AUTO CONFIG CHANGES -->
-      <pre class="log"><code>{{ dnsConfig }}</code></pre>
+      <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>

app/src/views/domain/DomainInfo.vue

@@ -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>
+      <p>{{ $t('domain.dns.edit') }}</p>
-      <b-button variant="outline-dark" :to="{ name: 'domain-dns', param: { name } }">
+      <b-button variant="warning" :to="{ name: 'domain-dns', param: { name } }">
-        <icon iname="globe" /> {{ $t('domain_dns_config') }}
+        <icon iname="flask" /> {{ $t('domain_dns_config') }}
       </b-button>
       <hr>
 

app/src/views/user/UserImport.vue

@@ -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'])

app/src/views/user/UserList.vue

@@ -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: ''
     }