ability to copy dkim key and warning before regenerate

frontend/src/components/domains/DKIMKeyViewer.vue

@@ -1,7 +1,6 @@
 <template>
-<pre>
-{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT (
-  {{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }})</pre>
+<button @click="copyDNSToClipboard()" class='dkimbutton'><p id='dkimdns' class='dkim'>
+{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT ({{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }})</p></button>
 </template>
 
 <script>
@@ -23,6 +22,10 @@ export default {
         }
       }
       return result.join('\n')
+    },
+    copyDNSToClipboard () {
+      const text = document.getElementById('dkimdns').textContent
+      navigator.clipboard.writeText(text)
     }
   }
 }

frontend/src/components/domains/DNSDetail.vue

@@ -128,6 +128,8 @@
             >
     <domain-dkim-key :domain="value" @close="showDKIMKey = false" />
   </v-dialog>
+  <confirm-dialog ref="confirm">
+  </confirm-dialog>
 </v-card>
 </template>
 
@@ -136,12 +138,14 @@ import { bus } from '@/main'
 import domains from '@/api/domains'
 import DomainDKIMKey from './DomainDKIMKey'
 import DomainDNSConfig from './DomainDNSConfig'
+import ConfirmDialog from '@/components/layout/ConfirmDialog'
 
 export default {
   props: ['value'],
   components: {
     'domain-dkim-key': DomainDKIMKey,
-    'domain-dns-config': DomainDNSConfig
+    'domain-dns-config': DomainDNSConfig,
+    ConfirmDialog
   },
   data () {
     return {
@@ -156,7 +160,21 @@ export default {
     }
   },
   methods: {
-    generateNewKey () {
+    async generateNewKey (domain) {
+      const confirm = await this.$refs.confirm.open(
+        this.$gettext('Warning'),
+        this.$gettext(
+          'Do you really want to regenerate the DKIM keys set for this domain ?'
+        ),
+        {
+          color: 'error',
+          cancelLabel: this.$gettext('No'),
+          agreeLabel: this.$gettext('Yes')
+        }
+      )
+      if (!confirm) {
+        return
+      }
       const payload = {
         dkim_private_key_path: ''
       }

frontend/src/components/domains/DomainDKIMKey.vue

@@ -1,3 +1,20 @@
+<style>
+.dkimbutton {
+  border-radius: 10px;
+}
+.dkimbutton:hover {
+    background-color: rgba(131, 131, 250, 0.283);
+    transition: all 0.8s
+}
+.dkimbutton:active {
+    background-color: rgba(60, 255, 60, 0.136);
+    transition: all 0.2s
+}
+.dkim {
+  word-break: break-all;
+}
+</style>
+
 <template>
 <v-card>
   <v-card-title>
@@ -6,7 +23,7 @@
     </span>
   </v-card-title>
   <v-card-text>
-    <p><translate>Raw format</translate></p>
+    <p><translate>Raw format. Click to copy</translate></p>
     <v-alert
       border="left"
       colored-border
@@ -14,11 +31,11 @@
       elevation="2"
       dense
       >
-      {{ domain.dkim_public_key }}
+      <button @click="copyPubKeyToClipboard()" class='dkimbutton'><p id='dkimpub' class='dkim'>{{ domain.dkim_public_key }}</p></button>
     </v-alert>
   </v-card-text>
   <v-card-text>
-    <p><translate>Bind/named format</translate></p>
+    <p><translate>Bind/named format. Click to copy</translate></p>
     <v-alert
       border="left"
       colored-border
@@ -51,6 +68,10 @@ export default {
   methods: {
     close () {
       this.$emit('close')
+    },
+    copyPubKeyToClipboard () {
+      const text = document.getElementById('dkimpub').textContent
+      navigator.clipboard.writeText(text)
     }
   }
 }