Add possibility to copy URL in share modal

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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>

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"
 }

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"
 }