From 60028fe505806f04d655adad57166b48b27e0812 Mon Sep 17 00:00:00 2001
From: Spitap <dev@asdrip.fr>
Date: Mon, 26 Sep 2022 12:17:40 +0200
Subject: [PATCH 1/4] ability to copy dkim key and warning before regenerate

---
 .../src/components/domains/DKIMKeyViewer.vue  |  9 ++++--
 frontend/src/components/domains/DNSDetail.vue | 22 ++++++++++++--
 .../src/components/domains/DomainDKIMKey.vue  | 27 +++++++++++++++--
 modoboa/admin/static/admin/css/admin.css      | 16 ++++++++++
 .../templates/admin/_domain_dkim_key.html     |  8 ++---
 .../admin/templates/admin/domain_detail.html  | 30 ++++++++++++++++++-
 6 files changed, 99 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/domains/DKIMKeyViewer.vue b/frontend/src/components/domains/DKIMKeyViewer.vue
index ece7b7d23..8d12a0dd7 100644
--- a/frontend/src/components/domains/DKIMKeyViewer.vue
+++ b/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)
     }
   }
 }
diff --git a/frontend/src/components/domains/DNSDetail.vue b/frontend/src/components/domains/DNSDetail.vue
index 2c391bf3c..3ae4ac647 100644
--- a/frontend/src/components/domains/DNSDetail.vue
+++ b/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: ''
       }
diff --git a/frontend/src/components/domains/DomainDKIMKey.vue b/frontend/src/components/domains/DomainDKIMKey.vue
index 7a4025590..ce4208b16 100644
--- a/frontend/src/components/domains/DomainDKIMKey.vue
+++ b/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)
     }
   }
 }
diff --git a/modoboa/admin/static/admin/css/admin.css b/modoboa/admin/static/admin/css/admin.css
index 2768bf843..b635d301f 100644
--- a/modoboa/admin/static/admin/css/admin.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/modoboa/admin/templates/admin/_domain_dkim_key.html b/modoboa/admin/templates/admin/_domain_dkim_key.html
index ae71983e3..72c5bbb9b 100644
--- a/modoboa/admin/templates/admin/_domain_dkim_key.html
+++ b/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">
diff --git a/modoboa/admin/templates/admin/domain_detail.html b/modoboa/admin/templates/admin/domain_detail.html
index fb4ef1b37..1827f721c 100644
--- a/modoboa/admin/templates/admin/domain_detail.html
+++ b/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 %}

From d1554504f61a48417090f5453acb87d2b4b9b99a Mon Sep 17 00:00:00 2001
From: Spitap <dev@asdrip.fr>
Date: Mon, 26 Sep 2022 12:46:18 +0200
Subject: [PATCH 2/4] pre tag

---
 frontend/src/components/domains/DKIMKeyViewer.vue | 5 +++--
 frontend/src/components/domains/DomainDKIMKey.vue | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/domains/DKIMKeyViewer.vue b/frontend/src/components/domains/DKIMKeyViewer.vue
index 8d12a0dd7..d995cb73a 100644
--- a/frontend/src/components/domains/DKIMKeyViewer.vue
+++ b/frontend/src/components/domains/DKIMKeyViewer.vue
@@ -1,6 +1,7 @@
 <template>
-<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>
+<button @click="copyDNSToClipboard()" class='dkimbutton'>
+  <pre id='dkimdns' class='dkim'>{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT ({{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }})</pre>
+  </button>
 </template>
 
 <script>
diff --git a/frontend/src/components/domains/DomainDKIMKey.vue b/frontend/src/components/domains/DomainDKIMKey.vue
index ce4208b16..60b1eb1c3 100644
--- a/frontend/src/components/domains/DomainDKIMKey.vue
+++ b/frontend/src/components/domains/DomainDKIMKey.vue
@@ -11,6 +11,7 @@
     transition: all 0.2s
 }
 .dkim {
+  white-space: normal;
   word-break: break-all;
 }
 </style>
@@ -31,7 +32,7 @@
       elevation="2"
       dense
       >
-      <button @click="copyPubKeyToClipboard()" class='dkimbutton'><p id='dkimpub' class='dkim'>{{ domain.dkim_public_key }}</p></button>
+      <button @click="copyPubKeyToClipboard()" class='dkimbutton'><pre id='dkimpub' class='dkim'>{{ domain.dkim_public_key }}</pre></button>
     </v-alert>
   </v-card-text>
   <v-card-text>

From 14dd836e4e1406c45a31cf235695164cc644ce72 Mon Sep 17 00:00:00 2001
From: Spitap <dev@asdrip.fr>
Date: Mon, 26 Sep 2022 18:21:05 +0200
Subject: [PATCH 3/4] fixed quotes, indent, simpler property

---
 .../src/components/domains/DKIMKeyViewer.vue     |  9 ++++-----
 frontend/src/components/domains/DNSDetail.vue    |  2 +-
 .../src/components/domains/DomainDKIMKey.vue     |  7 +++----
 .../admin/templates/admin/_domain_dkim_key.html  |  4 ++--
 modoboa/admin/templates/admin/domain_detail.html | 16 ++++++----------
 5 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/domains/DKIMKeyViewer.vue b/frontend/src/components/domains/DKIMKeyViewer.vue
index d995cb73a..aa63e2b9f 100644
--- a/frontend/src/components/domains/DKIMKeyViewer.vue
+++ b/frontend/src/components/domains/DKIMKeyViewer.vue
@@ -1,6 +1,6 @@
 <template>
-<button @click="copyDNSToClipboard()" class='dkimbutton'>
-  <pre id='dkimdns' class='dkim'>{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT ({{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }})</pre>
+  <button @click="copyDKIM()" class="dkimbutton">
+    <pre id="dkimdns" class="dkim">{{ domain.dkim_key_selector }}._domain_key.{{ domain.name }}. IN TXT ({{ splitKey(`v=DKIM1;k=rsa;p=${domain.dkim_public_key}`) }})</pre>
   </button>
 </template>
 
@@ -24,9 +24,8 @@ export default {
       }
       return result.join('\n')
     },
-    copyDNSToClipboard () {
-      const text = document.getElementById('dkimdns').textContent
-      navigator.clipboard.writeText(text)
+    copyDKIM () {
+      navigator.clipboard.writeText(document.getElementById('dkimdns').textContent)
     }
   }
 }
diff --git a/frontend/src/components/domains/DNSDetail.vue b/frontend/src/components/domains/DNSDetail.vue
index 3ae4ac647..e85ef70d5 100644
--- a/frontend/src/components/domains/DNSDetail.vue
+++ b/frontend/src/components/domains/DNSDetail.vue
@@ -164,7 +164,7 @@ export default {
       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 ?'
+          'DKIM keys already exist for this domain. Do you want to overwrite them?'
         ),
         {
           color: 'error',
diff --git a/frontend/src/components/domains/DomainDKIMKey.vue b/frontend/src/components/domains/DomainDKIMKey.vue
index 60b1eb1c3..0313937b5 100644
--- a/frontend/src/components/domains/DomainDKIMKey.vue
+++ b/frontend/src/components/domains/DomainDKIMKey.vue
@@ -32,7 +32,7 @@
       elevation="2"
       dense
       >
-      <button @click="copyPubKeyToClipboard()" class='dkimbutton'><pre id='dkimpub' class='dkim'>{{ domain.dkim_public_key }}</pre></button>
+      <button @click="copyPubDKIM()" class="dkimbutton"><pre id="dkimpub" class="dkim">{{ domain.dkim_public_key }}</pre></button>
     </v-alert>
   </v-card-text>
   <v-card-text>
@@ -70,9 +70,8 @@ export default {
     close () {
       this.$emit('close')
     },
-    copyPubKeyToClipboard () {
-      const text = document.getElementById('dkimpub').textContent
-      navigator.clipboard.writeText(text)
+    copyPubDKIM () {
+      navigator.clipboard.writeText(document.getElementById('dkimpub').textContent)
     }
   }
 }
diff --git a/modoboa/admin/templates/admin/_domain_dkim_key.html b/modoboa/admin/templates/admin/_domain_dkim_key.html
index 72c5bbb9b..f3732b7bd 100644
--- a/modoboa/admin/templates/admin/_domain_dkim_key.html
+++ b/modoboa/admin/templates/admin/_domain_dkim_key.html
@@ -9,11 +9,11 @@
     <div class="modal-body">
       <div class="alert alert-info" style="overflow-wrap: break-word;">
         <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>
+        <button onclick="copy(`copy_raw_dkim_key`)" 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. 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>
+        <button onclick="copy(`copy_dns_dkim_key`)" class="dkimbutton" id="copy_dns_dkim_key"><pre class="dkim">{{ domain.bind_format_dkim_public_key }}</pre></button>
       </div>
     </div>
     <div class="modal-footer">
diff --git a/modoboa/admin/templates/admin/domain_detail.html b/modoboa/admin/templates/admin/domain_detail.html
index 1827f721c..e382ba8f7 100644
--- a/modoboa/admin/templates/admin/domain_detail.html
+++ b/modoboa/admin/templates/admin/domain_detail.html
@@ -130,17 +130,17 @@
                 <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>
+                            <h5 class="modal-title" id="dkim_regenerate_dialog">{% trans "Warning" %}</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 ?" %}
+                            {% trans "DKIM keys already exist for this domain. Do you want to overwrite them?" %}
                         </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>
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "No" %}</button>
+                            <a id="refresh_dkim_key" class="btn btn-danger" href="#" title="{% trans 'Generate new key' %}" data-dismiss="modal">{% trans "Yes" %}</a>
                         </div>
                     </div>
                 </div>
@@ -207,12 +207,8 @@
           });
       });
   });
-  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;
+  function copy(id) {
+    const text = document.getElementById(id).textContent;
     navigator.clipboard.writeText(text);
   }
   </script>

From c83a6573afa63020de52ec20469a20faeeb8a6d5 Mon Sep 17 00:00:00 2001
From: Spitap <dev@asdrip.fr>
Date: Mon, 26 Sep 2022 18:23:18 +0200
Subject: [PATCH 4/4] simplified js function

---
 modoboa/admin/templates/admin/domain_detail.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/modoboa/admin/templates/admin/domain_detail.html b/modoboa/admin/templates/admin/domain_detail.html
index e382ba8f7..50f689dcf 100644
--- a/modoboa/admin/templates/admin/domain_detail.html
+++ b/modoboa/admin/templates/admin/domain_detail.html
@@ -208,8 +208,7 @@
       });
   });
   function copy(id) {
-    const text = document.getElementById(id).textContent;
-    navigator.clipboard.writeText(text);
+    navigator.clipboard.writeText(document.getElementById(id).textContent);
   }
   </script>
 {% endblock %}