1. Add copy Contact link to profile 2. move copyLink changes into component

src/components/RoomInfo.vue

@@ -78,45 +78,16 @@
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>
     </div>
-
-    <v-expand-transition>
-      <v-container fluid class="pa-0" v-show="publicRoomLink">
-        <v-row cols="12" class="qr-container ma-3">
-          <v-col cols="auto">
-            <canvas
-              @click.stop="showFullScreenQR = true"
-              ref="roomQr"
-              class="qr"
-              id="room-qr"
-            ></canvas>
-          </v-col>
-          <v-col align-self="center">
-            <div class="link">{{ publicRoomLink }}</div>
-          </v-col>
-        </v-row>
-        <v-row align="center" class="mt-0 pt-0">
-          <v-col align="center" class="mt-0 pt-0">
-            <v-btn
-              v-if="publicRoomLinkCopied"
-              id="btn-copy-room-link"
-              color="#DEE6FF"
-              depressed
-              class="filled-button link-copied-in-place"
-              >{{ $t("room_info.link_copied") }}</v-btn
-            >
-            <v-btn
-              v-else
-              id="btn-copy-room-link"
-              color="black"
-              depressed
-              class="filled-button"
-              @click.stop="copyRoomLink"
-              >{{ $t("room_info.copy_link") }}</v-btn
-            >
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-expand-transition>
+    <copy-link :locationLink="publicRoomLink" i18nCopyLinkKey="copy_invite_link">
+      <template slot="qrCode">
+        <canvas
+          @click.stop="showFullScreenQR = true"
+          ref="roomQr"
+          class="qr"
+          id="room-qr"
+        ></canvas>
+      </template>
+    </copy-link>
 
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
@@ -299,6 +270,7 @@ import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import DeviceList from "../components/DeviceList";
 import RoomExport from "../components/RoomExport";
 import RoomAvatarPicker from "../components/RoomAvatarPicker";
+import CopyLink from "../components/CopyLink.vue"
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
 import QRCodePopup from './QRCodePopup.vue';
@@ -313,7 +285,8 @@ export default {
     DeviceList,
     RoomExport,
     QRCodePopup,
-    RoomAvatarPicker
+    RoomAvatarPicker,
+    CopyLink
   },
   data() {
     return {
@@ -327,7 +300,6 @@ export default {
       expandedMembers: [],
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
-      publicRoomLinkCopied: false,
       joinRules: [
         {
           id: "public",
@@ -497,23 +469,6 @@ export default {
       this.$navigation.push({ name: "Profile" }, 1);
     },
 
-    copyRoomLink() {
-      const self = this;
-      this.$copyText(this.publicRoomLink).then(
-        function (ignored) {
-          // Success!
-          self.publicRoomLinkCopied = true;
-          setInterval(() => {
-            // Hide again
-            self.publicRoomLinkCopied = false;
-          }, 3000);
-        },
-        function (e) {
-          console.log(e);
-        }
-      );
-    },
-
     toggleMemberExpanded(member) {
       const index = this.expandedMembers.indexOf(member);
       if (index > -1) {