add conditional display of auto config or manual config

app/src/i18n/locales/en.json

@@ -161,7 +161,8 @@
     "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 credentials are incorrect? (Error: {error})",
+    "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",

app/src/views/domain/DomainDns.vue

@@ -3,7 +3,7 @@
     :queries="queries" @queries-response="onQueriesResponse" :loading="loading"
     skeleton="card-info-skeleton"
   >
-    <card :title="$t('domain.dns.auto_config')" icon="wrench">
+    <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>
@@ -64,7 +64,10 @@
     </card>
 
     <!-- MANUAL CONFIG CARD -->
-    <card :title="$t('domain.dns.manual_config')" icon="globe" no-body>
+    <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>
@@ -91,6 +94,8 @@ export default {
         ['GET', `domains/${this.name}/dns/suggest`]
       ],
       loading: true,
+      showAutoConfigCard: true,
+      showManualConfigCard: false,
       dnsConfig: '',
       dnsChanges: undefined,
       dnsErrors: undefined,
@@ -123,7 +128,7 @@ export default {
         ]
         categories.forEach(category => {
           const records = dnsChanges[category.action]
-          if (records.length > 0) {
+          if (records && records.length > 0) {
             const longestName = getLongest(records, 'name')
             const longestType = getLongest(records, 'type')
             records.forEach(record => {
@@ -140,9 +145,17 @@ export default {
         this.loading = false
       }).catch(err => {
         if (err.name !== 'APIBadRequestError') throw err
-        let message = this.$t(err.data.error_key, err.data)
+        const key = err.data.error_key
-        message = message !== err.data.error_key ? message : err.message
+        if (key === 'domain_dns_push_managed_in_parent_domain') {
-        this.dnsErrors = [{ icon: 'ban', variant: 'danger', message }]
+          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
       })
     },