Make all ID/UUID labels on the UI onclick -> clipboard copy.

frontend/src/assets/style.scss

@@ -131,6 +131,19 @@ section {
     background-color: #efefef;
   }
 
+.copy-text {
+  color: inherit;
+  .icon {
+    visibility: hidden;
+  }
+
+  &:hover {
+    color: $primary;
+    .icon {
+      visibility: visible;
+    }
+  }
+}
 
 /* Two column sidebar+body layout */
 #app {

frontend/src/components/CopyText.vue

@@ -0,0 +1,31 @@
+<template>
+  <a href="#" class="copy-text" ref="text" @click.prevent="onClick">
+    {{ $props.text }}
+    <b-icon icon="file-multiple-outline" size="is-small" />
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'CopyText',
+
+  props: {
+    text: { type: String, default: '' },
+  },
+
+  methods: {
+    onClick() {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'text');
+      input.style.opacity = '0';
+      input.value = this.$props.text;
+      document.body.appendChild(input);
+      input.select();
+      document.execCommand('copy');
+      document.body.removeChild(input);
+
+      this.$utils.toast(this.$t('globals.messages.copied'));
+    },
+  },
+};
+</script>

frontend/src/views/Campaign.vue

@@ -10,8 +10,8 @@
             {{ $t('lists.optin') }}
           </b-tag>
           <span v-if="isEditing" class="has-text-grey-light is-size-7" :data-campaign-id="data.id">
-            {{ $t('globals.fields.id') }}: {{ data.id }} /
-            {{ $t('globals.fields.uuid') }}: {{ data.uuid }}
+            {{ $t('globals.fields.id') }}: <copy-text :text="`${data.id}`" />
+            {{ $t('globals.fields.uuid') }}: <copy-text :text="data.uuid" />
           </span>
         </p>
         <h4 v-if="isEditing" class="title is-4">
@@ -266,6 +266,7 @@ import htmlToPlainText from 'textversionjs';
 import Vue from 'vue';
 import { mapState } from 'vuex';
 
+import CopyText from '../components/CopyText.vue';
 import Editor from '../components/Editor.vue';
 import ListSelector from '../components/ListSelector.vue';
 import Media from './Media.vue';
@@ -275,6 +276,7 @@ export default Vue.extend({
     ListSelector,
     Editor,
     Media,
+    CopyText,
   },
 
   data() {

frontend/src/views/ListForm.vue

@@ -3,8 +3,8 @@
     <div class="modal-card content" style="width: auto">
       <header class="modal-card-head">
         <p v-if="isEditing" class="has-text-grey-light is-size-7">
-          {{ $t('globals.fields.id') }}: {{ data.id }} /
-          {{ $t('globals.fields.uuid') }}: {{ data.uuid }}
+          {{ $t('globals.fields.id') }}: <copy-text :text="`${data.id}`" />
+          {{ $t('globals.fields.uuid') }}: <copy-text :text="data.uuid" />
         </p>
         <b-tag v-if="isEditing" :class="[data.type, 'is-pulled-right']">
           {{ $t(`lists.types.${data.type}`) }}
@@ -69,10 +69,15 @@
 <script>
 import Vue from 'vue';
 import { mapState } from 'vuex';
+import CopyText from '../components/CopyText.vue';
 
 export default Vue.extend({
   name: 'ListForm',
 
+  components: {
+    CopyText,
+  },
+
   props: {
     data: { type: Object, default: () => ({}) },
     isEditing: { type: Boolean, default: false },

frontend/src/views/SubscriberForm.vue

@@ -13,8 +13,8 @@
         </h4>
 
         <p v-if="isEditing" class="has-text-grey is-size-7">
-          {{ $t('globals.fields.id') }}: <span data-cy="id">{{ data.id }}</span> /
-          {{ $t('globals.fields.uuid') }}: {{ data.uuid }}
+          {{ $t('globals.fields.id') }}: <span data-cy="id"><copy-text :text="`${data.id}`" /></span>
+          {{ $t('globals.fields.uuid') }}: <copy-text :text="data.uuid" />
         </p>
       </header>
 
@@ -72,7 +72,7 @@
           </div>
         </b-field>
 
-        <div class="mb-5" v-if="data.lists">
+        <div class="mb-5 mt-6" v-if="data.lists">
           <h5>{{ $tc('globals.terms.subscriptions', 2) }} ({{ data.lists.length }})</h5>
           <b-table :data="data.lists" hoverable default-sort="createdAt" class="subscriptions">
             <b-table-column v-slot="props" field="name" :label="$tc('globals.terms.list', 1)">
@@ -158,10 +158,12 @@
 import Vue from 'vue';
 import { mapState } from 'vuex';
 import ListSelector from '../components/ListSelector.vue';
+import CopyText from '../components/CopyText.vue';
 
 export default Vue.extend({
   components: {
     ListSelector,
+    CopyText,
   },
 
   props: {

frontend/src/views/TemplateForm.vue

@@ -10,7 +10,7 @@
           <template v-if="isEditing">
             <h4>{{ data.name }}</h4>
             <p class="has-text-grey is-size-7">
-              {{ $t('globals.fields.id') }}: <span data-cy="id">{{ data.id }}</span>
+              {{ $t('globals.fields.id') }}: <span data-cy="id"><copy-text :text="data.id" /></span>
             </p>
           </template>
           <h4 v-else>
@@ -80,10 +80,12 @@ import Vue from 'vue';
 import { mapState } from 'vuex';
 import CampaignPreview from '../components/CampaignPreview.vue';
 import HTMLEditor from '../components/HTMLEditor.vue';
+import CopyText from '../components/CopyText.vue';
 
 export default Vue.extend({
   components: {
     CampaignPreview,
+    CopyText,
     'html-editor': HTMLEditor,
   },
 

i18n/ca.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Clona",
     "globals.buttons.close": "Tanca",
     "globals.buttons.continue": "Continua",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Esborra",
     "globals.buttons.deleteAll": "Esborra tot",
     "globals.buttons.edit": "Edita",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Estàs segur?",
     "globals.messages.confirmDiscard": "Vols descartar els canvis?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" ha estat creat",
     "globals.messages.deleted": "\"{name}\" ha estat esborrat",
     "globals.messages.deletedCount": "{name} ({num}) ha estat esborrat",

i18n/cs-cz.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Klonovat",
     "globals.buttons.close": "Zavřít",
     "globals.buttons.continue": "Pokračovat",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Odstranit",
     "globals.buttons.deleteAll": "Odstranit vše",
     "globals.buttons.edit": "Upravit",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Jste si jisti?",
     "globals.messages.confirmDiscard": "Zrušit změny?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" vytvořen",
     "globals.messages.deleted": "\"{name}\" odstraněn",
     "globals.messages.deletedCount": "{name} ({num}) odstraněn",

i18n/cy.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Clonio",
     "globals.buttons.close": "Cau",
     "globals.buttons.continue": "Parhau",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Dileu",
     "globals.buttons.deleteAll": "Dileu'r cyfan",
     "globals.buttons.edit": "Golygu",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Ydych yn siŵr?",
     "globals.messages.confirmDiscard": "Dileu'r newidiadau?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "wedi creu “[enw]”",
     "globals.messages.deleted": "wedi dileu “{name}”",
     "globals.messages.deletedCount": "wedi dileu {name} ({num})",

i18n/da.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Klon",
     "globals.buttons.close": "Luk",
     "globals.buttons.continue": "Fortsæt",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Slet",
     "globals.buttons.deleteAll": "Slet alle",
     "globals.buttons.edit": "Redigere",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Er du sikker?",
     "globals.messages.confirmDiscard": "Kassér ændringer?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" oprettet",
     "globals.messages.deleted": "\"{name}\" slettet",
     "globals.messages.deletedCount": "{name} ({num}) slettet",

i18n/de.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Duplizieren",
     "globals.buttons.close": "Schließen",
     "globals.buttons.continue": "Fortfahren",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Löschen",
     "globals.buttons.deleteAll": "Alle Löschen",
     "globals.buttons.edit": "Bearbeiten",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Bist du sicher?",
     "globals.messages.confirmDiscard": "Änderungen verwerfen?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" erstellt",
     "globals.messages.deleted": "\"{name}\" gelöscht",
     "globals.messages.deletedCount": "{name} ({num}) gelöscht",

i18n/el.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Κλωνοποίηση",
     "globals.buttons.close": "Κλείσιμο",
     "globals.buttons.continue": "Συνέχεια",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Διαγραφή",
     "globals.buttons.deleteAll": "Διαγραφή όλων",
     "globals.buttons.edit": "Επεξεργασία",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Σίγουρα;",
     "globals.messages.confirmDiscard": "Απόρριψη αλλαγών;",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "Το \"{name}\" δημιουργήθηκε",
     "globals.messages.deleted": "Το \"{name}\" διαγράφηκε",
     "globals.messages.deletedCount": "Το {name} ({num}) διαγράφηκε",

i18n/en.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Clone",
     "globals.buttons.close": "Close",
     "globals.buttons.continue": "Continue",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Delete",
     "globals.buttons.deleteAll": "Delete all",
     "globals.buttons.edit": "Edit",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Are you sure?",
     "globals.messages.confirmDiscard": "Discard changes?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" created",
     "globals.messages.deleted": "\"{name}\" deleted",
     "globals.messages.deletedCount": "{name} ({num}) deleted",

i18n/es.json

@@ -135,6 +135,7 @@
     "globals.buttons.clone": "Clonar",
     "globals.buttons.close": "Cerrar",
     "globals.buttons.continue": "Continuar",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Eliminar",
     "globals.buttons.deleteAll": "Eliminar todos",
     "globals.buttons.edit": "Editar",
@@ -165,6 +166,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "¿Está seguro/a?",
     "globals.messages.confirmDiscard": "¿Descartar cambios?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" creado",
     "globals.messages.deleted": "\"{name}\" eliminado",
     "globals.messages.deletedCount": "{name} ({num}) eliminado(s)",

i18n/fi.json

@@ -135,6 +135,7 @@
     "globals.buttons.clone": "Kopioi",
     "globals.buttons.close": "Sulje",
     "globals.buttons.continue": "Jatka",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Poista",
     "globals.buttons.deleteAll": "Poista kaikki",
     "globals.buttons.edit": "Muokkaa",
@@ -165,6 +166,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Oletko varma?",
     "globals.messages.confirmDiscard": "Haluatko hylätä muutokset?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" luotu",
     "globals.messages.deleted": "\"{name}\" poistettu",
     "globals.messages.deletedCount": "{name} ({num}) poistettu",

i18n/fr.json

@@ -135,6 +135,7 @@
     "globals.buttons.clone": "Cloner",
     "globals.buttons.close": "Fermer",
     "globals.buttons.continue": "Continuer",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Supprimer",
     "globals.buttons.deleteAll": "Tout effacer",
     "globals.buttons.edit": "Éditer",
@@ -165,6 +166,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Confirmer ?",
     "globals.messages.confirmDiscard": "Annuler les modifications ?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "Création de « {name} »",
     "globals.messages.deleted": "Suppression de « {name} »",
     "globals.messages.deletedCount": "{name} ({num}) effacé(s)",

i18n/he.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "שכפול",
     "globals.buttons.close": "סגור",
     "globals.buttons.continue": "המשך",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "מחיקה",
     "globals.buttons.deleteAll": "מחק הכל",
     "globals.buttons.edit": "עריכה",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "האם אתה בטוח?",
     "globals.messages.confirmDiscard": "לבטל את השינויים?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" נוצר",
     "globals.messages.deleted": "\"{name}\" נמחק",
     "globals.messages.deletedCount": "{name} ({num}) נמחקו",

i18n/hu.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Másolat",
     "globals.buttons.close": "Bezár",
     "globals.buttons.continue": "Tovább",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Törlés",
     "globals.buttons.deleteAll": "Összes törlése",
     "globals.buttons.edit": "Szerkesztés",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Biztos?",
     "globals.messages.confirmDiscard": "Módosítások elvetése?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" létrehozva",
     "globals.messages.deleted": "\"{name}\" törölve",
     "globals.messages.deletedCount": "{name} ({num}) törölve",

i18n/it.json

@@ -134,6 +134,7 @@
     "globals.buttons.clone": "Clona",
     "globals.buttons.close": "Chiudi",
     "globals.buttons.continue": "Continuare",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "Cancellare",
     "globals.buttons.deleteAll": "Cancellare tutto/e",
     "globals.buttons.edit": "Modifica",
@@ -164,6 +165,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "Sei sicuro?",
     "globals.messages.confirmDiscard": "Annullare le modifiche?",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" creato",
     "globals.messages.deleted": "\"{name}\" cancellato",
     "globals.messages.deletedCount": "{name} ({num}) cancellato",

i18n/jp.json

@@ -135,6 +135,7 @@
     "globals.buttons.clone": "クローン",
     "globals.buttons.close": "閉じる",
     "globals.buttons.continue": "続ける",
+    "globals.buttons.copy": "Copy",
     "globals.buttons.delete": "消去",
     "globals.buttons.deleteAll": "全て消去",
     "globals.buttons.edit": "編集",
@@ -165,6 +166,7 @@
     "globals.fields.uuid": "UUID",
     "globals.messages.confirm": "本当に良いですか?",
     "globals.messages.confirmDiscard": "変更を破棄しますか？",
+    "globals.messages.copied": "Copied",
     "globals.messages.created": "\"{name}\" が作成されました",
     "globals.messages.deleted": "\"{name}\" が削除されました",
     "globals.messages.deletedCount": "{name} ({num}) が削除されました。",