delete database: copy verification code to clipboard on click + improved styling

src/main/resources/languages/base_de.properties

@@ -125,8 +125,8 @@ notification.template.delete.success=Die Vorlage "{0}" wurde erfolgreich gelösc
 notification.template.add.success=Die Vorlage "{0}" wurde erfolgreich angelegt.
 
 info.title.database.delete=Datenbank löschen
-info.header.text.database.delete=Soll die Datenbank wirklich unwiderruflich gelöscht werden?<br>Hinweis: Beim Löschen der Datenbank werden alle Buchungen, Kategorien, Konten, Diagramme, Vorlagen und Bilder unwiderruflich gelöscht.
-info.text.database.delete=Zur Bestätigung gib folgenden Code ein:\t{0}
+info.header.text.database.delete=Soll die Datenbank wirklich unwiderruflich gelöscht werden?<br>Hinweis: Beim Löschen der Datenbank werden alle Buchungen, Kategorien, Konten, Diagramme, Vorlagen und Bilder unwiderruflich gelöscht. Alle Einstellungen bleiben erhalten.
+info.text.database.delete=Gib den folgenden Code zur Bestätigung ein:
 info.title.database.import.dialog=Datenbank importieren
 info.database.import=Folgende Daten werden importiert
 info.database.import.result=Import abgeschlossen
@@ -562,3 +562,5 @@ import.entity.transaction=Alle Buchungen werden nacheinander importiert und dabe
 import.entity.template=Alle Vorlagen werden nacheinander importiert und dabei die verknüpften Konten neu zugeordnet.<br>Der Import von Vorlagen ist optional.
 import.entity.image=Icons werden automatisch mit den zugehörigen Konten und Vorlagen importiert.
 import.entity.chart=Es werden nur die benutzerdefinierten Diagramme importiert.<br>Der Import von Diagrammen ist optional.
+
+copied=Kopiert!
\ No newline at end of file

src/main/resources/languages/base_en.properties

@@ -126,8 +126,8 @@ notification.template.delete.success=Successfully deleted template "{0}".
 notification.template.add.success=Successfully added new template "{0}".
 
 info.title.database.delete=Delete Database
-info.header.text.database.delete=Do you really want to delete the database? This can''t be undone.<br>Note: Deleting the database will delete all transactions, categories, accounts, charts, templates and images permanently.
-info.text.database.delete=Please enter the following code for verification:\t{0}
+info.header.text.database.delete=Do you really want to delete the database? This can''t be undone.<br>Note: Deleting the database will delete all transactions, categories, accounts, charts, templates and images permanently. All settings will be preserved. 
+info.text.database.delete=Please enter the following code for verification:
 info.title.database.import.dialog=Import database
 info.database.import=The following data will be imported
 info.database.import.result=Import completed
@@ -561,3 +561,5 @@ import.entity.transaction=All transactions will be imported one by one, assignin
 import.entity.template=All templates will be imported one by one, reassigning the linked accounts.<br>The import of templates is optional.
 import.entity.image=Icons are automatically imported with their associated accounts and templates.
 import.entity.chart=Only user-defined charts will be imported.<br>The import of charts is optional.
+
+copied=Copied!
\ No newline at end of file

src/main/resources/static/css/settings.css

@@ -20,3 +20,14 @@
     margin-top: 2em;
     margin-bottom: 2em;
 }
+
+#verificationCode {
+    font-weight: bold;
+    margin-left: 1rem;
+    border: 2px solid var(--color-text);
+    padding: 0.3rem 0.5rem;
+}
+
+#verificationCode:hover {
+    cursor: pointer;
+}
\ No newline at end of file

src/main/resources/static/js/settings.js

@@ -76,6 +76,17 @@ $(document).ready(function()
         document.getElementById('runBackupInput').value = 1;
     });
 
+    $('#verificationCode').click(function()
+    {
+        let verificationCodeElement = document.getElementsByName('verificationCode')[0];
+        verificationCodeElement.type = 'text';
+        verificationCodeElement.select();
+        document.execCommand('copy');
+        verificationCodeElement.type = 'hidden';
+
+        M.toast({html: copiedToClipboard, classes: 'green'});
+    });
+
     // on initial page load
     let autoBackupCheckbox = document.getElementsByName("autoBackupActivated")[0];
     $('#settings-auto-backup').toggle(autoBackupCheckbox.checked);

src/main/resources/templates/settings/settings.ftl

@@ -255,6 +255,10 @@
             <@settingsMacros.update/>
         </#if>
 
+        <script>
+            copiedToClipboard = '${locale.getString("copied")}';
+        </script>
+
         <!-- Scripts-->
         <#import "../helpers/scripts.ftl" as scripts>
         <@scripts.scripts/>

src/main/resources/templates/settings/settingsMacros.ftl

@@ -86,7 +86,7 @@
         <div class="modal-content">
             <h4>${locale.getString("info.title.database.delete")}</h4>
             <p>${locale.getString("info.header.text.database.delete")}</p>
-            <p>${locale.getString("info.text.database.delete", verificationCode)}</p>
+            <p class="valign-wrapper">${locale.getString("info.text.database.delete")} <span id="verificationCode">${verificationCode}</span></p>
 
             <form id="form-confirm-database-delete" action="<@s.url '/settings/database/delete'/>" method="post">
                 <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>