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

src/components/ChatHeader.vue

@@ -160,7 +160,7 @@ export default {
       const roomLink = this.publicRoomLink;
       if (roomLink) {
         items.push({
-          icon: '$vuetify.icons.ic_link', text: this.$t('room_info.copy_link'), handler: () => {
+          icon: '$vuetify.icons.ic_link', text: this.$t('room_info.copy_invite_link'), handler: () => {
             this.$copyText(this.publicRoomLink);
           }
         });

src/components/CopyLink.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-expand-transition>
+    <v-card class="ma-3" v-show="locationLink" flat>
+      <v-container>
+        <slot/>
+        <v-row cols="12" class="qr-container ma-3">
+          <v-col cols="auto" v-if="$slots.qrCode">
+            <slot name="qrCode"/>
+          </v-col>
+          <v-col align-self="center" class="public-link">
+            <div class="link">{{ locationLink }}</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
+              id="btn-copy-room-link"
+              :color="publicRoomLinkCopied ? '#DEE6FF' : 'black'"
+              depressed
+              @click.stop="copyRoomLink"
+              :class="{'filled-button' : true, 'link-copied-in-place' : publicRoomLinkCopied}"
+              >{{ $t(`room_info.${publicRoomLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card>
+  </v-expand-transition>
+</template>
+
+<script>
+export default {
+props: {
+  locationLink: {
+    type: String
+  },
+  i18nCopyLinkKey: {
+    type: String,
+    default: 'copy_link'
+  }
+},
+data() {
+  return {
+    publicRoomLinkCopied: false,
+  }
+},
+methods: {
+  copyRoomLink() {
+    if(this.publicRoomLinkCopied) return
+    const self = this;
+    this.$copyText(this.locationLink).then(
+      function (ignored) {
+        // Success!
+        self.publicRoomLinkCopied = true;
+        setInterval(() => {
+          // Hide again
+          self.publicRoomLinkCopied = false;
+        }, 3000);
+      },
+      function (e) {
+        console.log(e);
+      }
+    );
+  }
+}
+}
+</script>
+
+<style lang="scss">
+  .qr-container {
+    background-color: white;
+    border-radius: 8px;
+    margin-top: 20px !important;
+    .qr {
+      width: 60px;
+      height: 60px;
+      background-color: #e0e0e0;
+    }
+    .public-link {
+      background-color: #D6D5FC33;
+      border-radius: 11px;
+      .link {
+        font-family: "Inter", sans-serif;
+        font-size: 16px;
+        text-decoration: underline;
+        color: #3d6eff;
+        overflow-wrap: anywhere;
+      }
+    }
+
+  }
+
+  .link-copied-in-place .v-btn__content {
+    font-family: "Inter", sans-serif !important;
+    font-size: 12px !important;
+    text-transform: none !important;
+    color: #3d6eff;
+  }
+</style>

src/components/Profile.vue

@@ -49,7 +49,7 @@
         </v-col>
         <v-col class="flex-shrink-1 flex-grow-1">
           <div class="h1">{{ displayName }}</div>
-          <div class="text-center">{{ $matrix.currentUser.user_id }}</div>
+          <div class="text-center">{{ currentUserId }}</div>
           <!-- <div v-if="$matrix.currentUser.is_guest">
             {{ $t("profile.temporary_identity") }}
           </div> -->
@@ -65,6 +65,11 @@
       </v-row>
     </v-container>
 
+    <copy-link :locationLink="directMessageLink" >
+      <v-card-title class="h2">{{ $t("room_info.contact_link") }}</v-card-title>
+      <v-card-text>{{ $t("room_info.contact_link_desc") }}</v-card-text>
+    </copy-link>
+
     <v-container class="mt-2 pa-5">
       <ActionRow
         @click="showEditPasswordDialog = true"
@@ -201,6 +206,7 @@ import ActionRow from "./ActionRow.vue";
 import util from "../plugins/utils";
 import profileInfoMixin from "./profileInfoMixin";
 import LogoutRoomDialog from './LogoutRoomDialog.vue';
+import CopyLink from "./CopyLink.vue"
 
 export default {
   name: "Profile",
@@ -209,6 +215,7 @@ export default {
     ActionRow,
     SelectLanguageDialog,
     LogoutRoomDialog,
+    CopyLink
   },
   data() {
     return {
@@ -232,6 +239,12 @@ export default {
   },
 
   computed: {
+    currentUserId() {
+      return this.$matrix.currentUser.user_id
+    },
+    directMessageLink() {
+      return `${window.location.origin}/#/user/${this.currentUserId}`
+    },
     passwordsMatch() {
       return (
         !this.newPasswordHasError &&
@@ -239,7 +252,7 @@ export default {
         this.newPassword2 &&
         this.newPassword1 == this.newPassword2
       );
-    },
+    }
   },
 
   methods: {

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) {