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

src/assets/css/chat.scss

@@ -956,30 +956,6 @@ body {
     font-size: 16 * $chat-text-size !important;
   }
 
-  .qr-container {
-    background-color: white;
-    border-radius: 8px;
-    margin-top: 20px !important;
-    .qr {
-      width: 60px;
-      height: 60px;
-      background-color: #e0e0e0;
-    }
-    .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;
-  }
-
   .filled-button {
     @media #{map-get($display-breakpoints, 'sm-and-up')} {
       min-width: 180px !important;
@@ -1080,7 +1056,7 @@ body {
 }
 
 .profile {
-  background-color: white;
+  background-color: #e8e8e8;
   height: 100%;
   .chat-header {
     background-color: transparent;

src/assets/translations/bo.json

@@ -29,7 +29,7 @@
         "join_invite": "ཁ་སྣོན་བྱས་པའི་གྲོགས་ཁོ་ན།",
         "permissions": "ནང་འཛུལ་གྱི་ཆོག་མཆན་ཁག",
         "created_by": "{user} བཟོས།",
-        "copy_link": "གདན་ཞུ་འབྲེལ་ཐག་པར་བཤུས་རྒྱོབས།",
+        "copy_invite_link": "གདན་ཞུ་འབྲེལ་ཐག་པར་བཤུས་རྒྱོབས།",
         "scan_code": "བཤེར་རིས་བཤེར་ཏེ་ཁ་བརྡ་ཁང་དུ་འཛུལ།",
         "user_admin": "དོ་དམ་པ།",
         "experimental_features": "ཚོད་ལྟའི་ཁྱད་ཆོས་ཁག",

src/assets/translations/de.json

@@ -187,7 +187,7 @@
         "permissions": "Beitrittsberechtigungen",
         "join_invite": "Nur hinzugefügte Personen",
         "join_public": "Jeder mit einem Link",
-        "copy_link": "Link zur Einladung kopieren",
+        "copy_invite_link": "Link zur Einladung kopieren",
         "link_copied": "Link kopiert!",
         "purge": "Raum löschen",
         "members": "Mitglieder",

src/assets/translations/en.json

@@ -263,7 +263,8 @@
     "permissions": "Join Permissions",
     "join_invite": "Only People Added",
     "join_public": "Anyone with a link",
-    "copy_link": "Copy invite link",
+    "copy_invite_link": "Copy invite link",
+    "copy_link": "Copy link",
     "link_copied": "Link copied!",
     "purge": "Delete room",
     "members": "Members",
@@ -284,7 +285,9 @@
     "read_only_room": "Read only room",
     "read_only_room_info": "Only admins and moderators are allowed to send to the room",
     "make_public": "Make Public",
-    "make_public_warning": "warning: Full message history will be visible to new participants"
+    "make_public_warning": "warning: Full message history will be visible to new participants",
+    "contact_link": "My Contact Link",
+    "contact_link_desc": "Share your contact link. When opened, a direct message will be started with you."
   },
   "room_info_sheet": {
     "this_room": "This room",

src/assets/translations/es.json

@@ -26,7 +26,7 @@
         "leave_room": "Salir",
         "view_profile": "Vista",
         "identity_temporary": "Tu identidad {displayName} es temporal. Puedes cambiar tu nombre o establecer una contraseña para conservarla.",
-        "copy_link": "Copiar el enlace de invitación",
+        "copy_invite_link": "Copiar el enlace de invitación",
         "scan_code": "Escanear para unirse a la sala"
     },
     "purge_room": {

src/assets/translations/fr.json

@@ -184,7 +184,7 @@
         "permissions": "Autorisations d’adhésion",
         "join_invite": "Seules les personnes ajoutées",
         "join_public": "Quiconque avec un lien",
-        "copy_link": "Copier le lien d’invitation",
+        "copy_invite_link": "Copier le lien d’invitation",
         "link_copied": "Lien copié !",
         "purge": "Supprimer le salon",
         "user_you": "{user} (vous)",

src/assets/translations/it.json

@@ -194,7 +194,7 @@
         "leave_room": "Lascia",
         "scan_code": "Scansiona per entrare nella stanza",
         "version_info": "Realizzato da Guardian Project. Versione: {version}",
-        "copy_link": "Copia il collegamento di invito"
+        "copy_invite_link": "Copia il collegamento di invito"
     },
     "voice_recorder": {
         "failed_to_record": "Impossibile registrare l’audio",

src/assets/translations/nb_NO.json

@@ -60,7 +60,7 @@
         "members": "Medlemmer",
         "purge": "Slett rom",
         "link_copied": "Lenke kopiert.",
-        "copy_link": "Kopier invitasjonslenke",
+        "copy_invite_link": "Kopier invitasjonslenke",
         "created_by": "Opprettet av {user}",
         "title": "Romdetaljer"
     },

src/assets/translations/pt_BR.json

@@ -252,7 +252,7 @@
         "permissions": "Permissões de ingresso",
         "join_invite": "Somente pessoas adicionadas",
         "join_public": "Qualquer pessoa com um link",
-        "copy_link": "Copie o link do convite",
+        "copy_invite_link": "Copie o link do convite",
         "link_copied": "Link copiado!",
         "purge": "Excluir a sala",
         "members": "Membros",

src/assets/translations/ro.json

@@ -53,7 +53,7 @@
         "members": "Membri",
         "purge": "Ștergeți camera",
         "link_copied": "Link copiat!",
-        "copy_link": "Copiați link-ul de invitație",
+        "copy_invite_link": "Copiați link-ul de invitație",
         "join_public": "Oricine are un link",
         "join_invite": "Numai persoane adăugate",
         "permissions": "Permisiuni de aderare",

src/assets/translations/ug.json

@@ -144,7 +144,7 @@
         "members": "ئەزالار",
         "purge": "ئۆينى ئۆچۈرۈڭ",
         "link_copied": "ئۇلىنىش كۆچۈرۈلدى!",
-        "copy_link": "تەكلىپ ئۇلانمىسىنى كۆچۈرۈڭ",
+        "copy_invite_link": "تەكلىپ ئۇلانمىسىنى كۆچۈرۈڭ",
         "join_public": "ئۇلىنىشى بارلار",
         "join_invite": "پەقەت كىشىلەر قوشۇلدى",
         "permissions": "ئىجازەتكە قوشۇلۇڭ",

src/assets/translations/zh_Hans.json

@@ -29,7 +29,7 @@
         "join_invite": "仅添加人员",
         "permissions": "加入权限",
         "created_by": "由 {user} 创建",
-        "copy_link": "复制邀请链接",
+        "copy_invite_link": "复制邀请链接",
         "scan_code": "扫一扫加入聊天室",
         "user_admin": "管理员",
         "voice_mode": "语音模块",

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>
-
+    <copy-link :locationLink="publicRoomLink" i18nCopyLinkKey="copy_invite_link">
-    <v-expand-transition>
+      <template slot="qrCode">
-      <v-container fluid class="pa-0" v-show="publicRoomLink">
+        <canvas
-        <v-row cols="12" class="qr-container ma-3">
+          @click.stop="showFullScreenQR = true"
-          <v-col cols="auto">
+          ref="roomQr"
-            <canvas
+          class="qr"
-              @click.stop="showFullScreenQR = true"
+          id="room-qr"
-              ref="roomQr"
+        ></canvas>
-              class="qr"
+      </template>
-              id="room-qr"
+    </copy-link>
-            ></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>
 
     <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) {