Add copy-to-clipboard button for backup id

dashboard/src/components/BackupList.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, ButtonGroup, ProgressBar, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
-import { prettyLongDate } from '@cloudron/pankow/utils';
+import { prettyLongDate, copyToClipboard } from '@cloudron/pankow/utils';
 import { TASK_TYPES, SECRET_PLACEHOLDER } from '../constants.js';
 import Section from  '../components/Section.vue';
 import BackupsModel from '../models/BackupsModel.js';
@@ -223,6 +223,10 @@ async function onEditSubmit() {
   editDialog.value.close();
 }
 
+function onCopyToClipboard(value) {
+  copyToClipboard(value);
+  window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
+}
 
 onMounted(async () => {
   await refreshBackups();
@@ -248,7 +252,8 @@ onMounted(async () => {
       </div>
       <div class="info-row">
         <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-        <div class="info-value">{{ infoBackup.remotePath }}</div>
+        <div class="info-value" style="cursor: pointer;">{{ infoBackup.remotePath }}</div>
+        <div style="cursor: pointer; padding-left: 6px;" @click="onCopyToClipboard(infoBackup.remotePath)"><i class="fa fa-clipboard"></i></div>
       </div>
       <div class="info-row">
         <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>