From 5929c7dab741f3058aad5898c4c70dcf5b8783bb Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 23 Jun 2020 17:19:41 +0200
Subject: [PATCH] Add possibility to copy URL in share modal

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/ShareEventModal.vue | 34 ++++++++++++++++++++-
 js/src/i18n/en_US.json                      |  3 +-
 js/src/i18n/fr_FR.json                      |  3 +-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/js/src/components/Event/ShareEventModal.vue b/js/src/components/Event/ShareEventModal.vue
index 2c8736ecb..d6d49734d 100644
--- a/js/src/components/Event/ShareEventModal.vue
+++ b/js/src/components/Event/ShareEventModal.vue
@@ -27,6 +27,26 @@
         <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
           {{ $t("All the places have already been taken") }}
         </small>
+        <b-field>
+          <b-input ref="eventURLInput" :value="event.url" expanded />
+          <p class="control">
+            <b-tooltip
+              :label="$t('URL copied to clipboard')"
+              :active="showCopiedTooltip"
+              always
+              type="is-success"
+              position="is-left"
+            >
+              <b-button
+                type="is-primary"
+                icon-right="content-paste"
+                native-type="button"
+                @click="copyURL"
+                @keyup.enter="copyURL"
+              />
+            </b-tooltip>
+          </p>
+        </b-field>
         <div>
           <!--                  <b-icon icon="mastodon" size="is-large" type="is-primary" />-->
 
@@ -55,7 +75,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue, Ref } from "vue-property-decorator";
 import { IEvent, EventVisibility, EventStatus } from "../../types/event.model";
 // @ts-ignore
 import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
@@ -68,10 +88,13 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 export default class ShareEventModal extends Vue {
   @Prop({ type: Object, required: true }) event!: IEvent;
   @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
+  @Ref("eventURLInput") readonly eventURLInput!: any;
 
   EventVisibility = EventVisibility;
   EventStatus = EventStatus;
 
+  showCopiedTooltip: boolean = false;
+
   get twitterShareUrl(): string {
     return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
       this.event.title
@@ -97,6 +120,15 @@ export default class ShareEventModal extends Vue {
       this.event.title
     )}&url=${encodeURIComponent(this.event.url)}`;
   }
+
+  copyURL() {
+    this.eventURLInput.$refs.input.select();
+    document.execCommand("copy");
+    this.showCopiedTooltip = true;
+    setTimeout(() => {
+      this.showCopiedTooltip = false;
+    }, 2000);
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 10a4595c3..516b81100 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -694,5 +694,6 @@
   "A place for your code of conduct, rules or guidelines. You can use HTML tags.": "A place for your code of conduct, rules or guidelines. You can use HTML tags.",
   "contact uninformed": "contact uninformed",
   "Can be an email or a link, or just plain text.": "Can be an email or a link, or just plain text.",
-  "No profiles found": "No profiles found"
+  "No profiles found": "No profiles found",
+  "URL copied to clipboard": "URL copied to clipboard"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 58bd45ee5..924d18a9b 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -694,5 +694,6 @@
   "A place to explain who you are and the things that set your instance apart. You can use HTML tags.": "Une section pour expliquer qui vous êtes et les aspects qui caractérisent votre instance. Vous pouvez utiliser des balises HTML.",
   "A place for your code of conduct, rules or guidelines. You can use HTML tags.": "Une section appropriée pour votre code de conduite, règles ou lignes directrices. Vous pouvez utiliser des balises HTML.",
   "contact uninformed": "contact non renseigné",
-  "Can be an email or a link, or just plain text.": "Peut être une adresse email ou bien un lien, ou alors du simple texte brut."
+  "Can be an email or a link, or just plain text.": "Peut être une adresse email ou bien un lien, ou alors du simple texte brut.",
+  "URL copied to clipboard": "URL copiée dans le presse-papiers"
 }