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)
     }
   }
 }

modoboa/admin/static/admin/css/admin.css

@@ -31,3 +31,19 @@ table tbody tr:hover {
     -webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;
     padding-left: 14px;
 }
+
+.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 {
+    white-space: normal;
+    word-break: break-all;
+}

modoboa/admin/templates/admin/_domain_dkim_key.html

@@ -8,12 +8,12 @@
     </div>
     <div class="modal-body">
       <div class="alert alert-info" style="overflow-wrap: break-word;">
-        <strong>{% trans "Raw format" %}</strong><br>
-        {{ domain.dkim_public_key }}
+        <strong>{% trans "Raw format. Click to copy" %}</strong><br>
+        <button onclick="copyRaw()" class="dkimbutton" id="copy_raw_dkim_key"><pre class="dkim">{{ domain.dkim_public_key }}</pre></button>
       </div>
       <div class="alert alert-info" style="overflow-wrap: break-word;">
-        <strong>{% trans "Bind/named format" %}</strong><br>
-        <span style="white-space: pre">{{ domain.bind_format_dkim_public_key }}</span>
+        <strong>{% trans "Bind/named format. Click to copy" %}</strong><br>
+        <button onclick="copyDns()" class="dkimbutton" id="copy_dns_dkim_key"><pre class="dkim">{{ domain.bind_format_dkim_public_key }}</pre></button>
       </div>
     </div>
     <div class="modal-footer">

modoboa/admin/templates/admin/domain_detail.html

@@ -124,7 +124,27 @@
               <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#domain_dkim_key">
                 {% trans "Show key" %}
               </button>
-              <a id="refresh_dkim_key" class="btn btn-default btn-xs" href="#" title="{% trans 'Generate new key' %}"><span class="fa fa-refresh"></span></a>
+              <button data-toggle="modal" class="btn btn-default btn-xs" data-target="#dkim_regenerate_dialog"><span class="fa fa-refresh"></span></button>
+              
+              <div class="modal fade" id="dkim_regenerate_dialog" tabindex="-1" role="dialog" aria-labelledby="dkim_regenerate_dialog" aria-hidden="true">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="dkim_regenerate_dialog">{% trans "Regenerate ?" %}</h5>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            {% trans "Are you sure you want to regenerate your DKIM key ?" %}
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Cancel" %}</button>
+                            <a id="refresh_dkim_key" class="btn btn-warning" href="#" title="{% trans 'Generate new key' %}" data-dismiss="modal">{% trans "Regenerate" %}</a>
+                        </div>
+                    </div>
+                </div>
+              </div>
             {% else %}
               {% trans "Not generated" %}
             {% endif %}
@@ -187,5 +207,13 @@
           });
       });
   });
+  function copyRaw() {
+    const text = document.getElementById("copy_raw_dkim_key").textContent;
+    navigator.clipboard.writeText(text);
+  }
+  function copyDns() {
+    const text =document.getElementById("copy_dns_dkim_key").textContent;
+    navigator.clipboard.writeText(text);
+  }
   </script>
 {% endblock %}