Added DKIM key display in new UI.

fix #2506

frontend/src/api/domains.js

@@ -35,6 +35,9 @@ export default {
   updateDomain (domainId, data) {
     return repository.put(`/${domainResource}/${domainId}/`, data)
   },
+  patchDomain (domainId, data) {
+    return repository.patch(`/${domainResource}/${domainId}/`, data)
+  },
   deleteDomain (domainId, data) {
     return repository.post(`/${domainResource}/${domainId}/delete/`, data)
   },

frontend/src/components/domains/DKIMKeyViewer.vue

@@ -0,0 +1,29 @@
+<template>
+<pre>
+{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT (
+  {{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }})</pre>
+</template>
+
+<script>
+export default {
+  props: {
+    domain: Object
+  },
+  methods: {
+    splitKey (value) {
+      let key = value
+      const result = []
+      while (key.length > 0) {
+        if (key.length > 74) {
+          result.push(`  "${key.substring(0, 74)}"`)
+          key = key.substring(74)
+        } else {
+          result.push(`  "${key}"`)
+          break
+        }
+      }
+      return result.join('\n')
+    }
+  }
+}
+</script>

frontend/src/components/domains/DNSDetail.vue

@@ -101,14 +101,16 @@
         </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>
+    <v-row v-if="domain.enable_dkim">
+      <v-col cols="3"><translate>DKIM key</translate></v-col>
+      <v-col cols="9">
+        <div v-if="domain.dkim_private_key_path && domain.dkim_public_key">
+          <v-btn color="primary" small @click="showDKIMKey = true">
             <translate>Show key</translate>
           </v-btn>
-          <v-btn icon><v-icon>mdi-refresh</v-icon></v-btn>
+          <v-btn icon :title="'Generate a new DKIM key'|translate" @click="generateNewKey">
+            <v-icon>mdi-refresh</v-icon>
+          </v-btn>
         </div>
         <translate v-else>Not generated</translate>
       </v-col>
@@ -120,16 +122,25 @@
             >
     <domain-dns-config :domain="domain" @close="showConfigHelp = false" />
   </v-dialog>
+  <v-dialog v-model="showDKIMKey"
+            max-width="800px"
+            persistent
+            >
+    <domain-dkim-key :domain="domain" @close="showDKIMKey = false" />
+  </v-dialog>
 </v-card>
 </template>
 
 <script>
+import { bus } from '@/main'
 import domains from '@/api/domains'
+import DomainDKIMKey from './DomainDKIMKey'
 import DomainDNSConfig from './DomainDNSConfig'
 
 export default {
   props: ['domain'],
   components: {
+    'domain-dkim-key': DomainDKIMKey,
     'domain-dns-config': DomainDNSConfig
   },
   data () {
@@ -140,7 +151,22 @@ export default {
         { text: this.$gettext('Address'), value: 'address' },
         { text: this.$gettext('Updated'), value: 'updated' }
       ],
-      showConfigHelp: false
+      showConfigHelp: false,
+      showDKIMKey: false
+    }
+  },
+  methods: {
+    generateNewKey () {
+      const payload = {
+        dkim_private_key_path: ''
+      }
+      domains.patchDomain(this.domain.pk, payload).then(resp => {
+        bus.$emit('notification', {
+          msg: this.$gettext('A new key will be generated soon. Refresh the page in a moment to see it.'),
+          type: 'success'
+        })
+        this.domain.dkim_private_key_path = ''
+      })
     }
   },
   watch: {

frontend/src/components/domains/DomainDKIMKey.vue

@@ -0,0 +1,57 @@
+<template>
+<v-card>
+  <v-card-title>
+    <span class="headline">
+      <translate>DKIM public key for </translate> {{ domain.name }}
+    </span>
+  </v-card-title>
+  <v-card-text>
+    <p><translate>Raw format</translate></p>
+    <v-alert
+      border="left"
+      colored-border
+      color="primary lighten-3"
+      elevation="2"
+      dense
+      >
+      {{ domain.dkim_public_key }}
+    </v-alert>
+  </v-card-text>
+  <v-card-text>
+    <p><translate>Bind/named format</translate></p>
+    <v-alert
+      border="left"
+      colored-border
+      color="primary lighten-3"
+      elevation="2"
+      dense
+      >
+      <dkim-key-viewer :domain="domain" />
+    </v-alert>
+  </v-card-text>
+  <v-card-actions>
+    <v-spacer></v-spacer>
+    <v-btn @click="close">
+      <translate>Close</translate>
+    </v-btn>
+  </v-card-actions>
+</v-card>
+</template>
+
+<script>
+import DKIMKeyViewer from './DKIMKeyViewer'
+
+export default {
+  props: {
+    domain: Object
+  },
+  components: {
+    'dkim-key-viewer': DKIMKeyViewer
+  },
+  methods: {
+    close () {
+      this.$emit('close')
+    }
+  }
+}
+</script>

frontend/src/components/domains/DomainDNSConfig.vue

@@ -6,7 +6,7 @@
     </span>
   </v-card-title>
   <v-card-text>
-    <p>Here is an example of DNS configuration (bind format). Replace values between [ ] by the appropriate ones.</p>
+    <p><translate>Here is an example of DNS configuration (bind format). Replace values between [ ] by the appropriate ones.</translate></p>
     <v-alert
       border="left"
       colored-border
@@ -40,9 +40,7 @@ mail.{{ domain.name }}. IN A <strong>[<translate>IP address of your Modoboa serv
       dense
       >
       <div class="title">DKIM</div>
-      <pre>
-{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT (
-  {{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }}</pre>
+      <dkim-key-viewer :domain="domain" />
     </v-alert>
     <v-alert
       border="left"
@@ -62,7 +60,7 @@ _dmarc.{{ domain.name }}. IN TXT "v=DMARC1; p=quarantine; pct=100;"</pre>
       elevation="2"
       dense
       >
-      <div class="title">Auto configuration</div>
+      <div class="title"><translate>Auto configuration</translate></div>
       <pre>
 autoconfig.{{ domain.name }}. IN CNAME <strong>[<translate>hostname of your automx server</translate>]</strong>
 autodiscover.{{ domain.name }}. IN CNAME <strong>[<translate>hostname of your automx server</translate>]</strong></pre>
@@ -78,24 +76,18 @@ autodiscover.{{ domain.name }}. IN CNAME <strong>[<translate>hostname of your au
 </template>
 
 <script>
+import DKIMKeyViewer from './DKIMKeyViewer'
+
 export default {
-  props: ['domain'],
+  props: {
+    domain: Object
+  },
+  components: {
+    'dkim-key-viewer': DKIMKeyViewer
+  },
   methods: {
     close () {
       this.$emit('close')
-    },
-    splitKey (value) {
-      let key = value
-      const result = []
-      while (key.length > 0) {
-        if (key.length > 74) {
-          result.push(`  "${key.substring(0, 74)}"`)
-          key = key.substring(74)
-        } else {
-          result.push(`  "${key}"`)
-        }
-      }
-      return result.join('\n')
     }
   }
 }