From 031e22b5f1f1c1fbfa72b42aed3026bd7c8053bf Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 18 Jun 2023 13:11:44 +0300
Subject: [PATCH] 1. Add copy Contact link to profile 2. move copyLink changes
 into component

---
 src/assets/css/chat.scss             | 26 +-------
 src/assets/translations/bo.json      |  2 +-
 src/assets/translations/de.json      |  2 +-
 src/assets/translations/en.json      |  7 +-
 src/assets/translations/es.json      |  2 +-
 src/assets/translations/fr.json      |  2 +-
 src/assets/translations/it.json      |  2 +-
 src/assets/translations/nb_NO.json   |  2 +-
 src/assets/translations/pt_BR.json   |  2 +-
 src/assets/translations/ro.json      |  2 +-
 src/assets/translations/ug.json      |  2 +-
 src/assets/translations/zh_Hans.json |  2 +-
 src/components/ChatHeader.vue        |  2 +-
 src/components/CopyLink.vue          | 99 ++++++++++++++++++++++++++++
 src/components/Profile.vue           | 17 ++++-
 src/components/RoomInfo.vue          | 71 ++++----------------
 16 files changed, 144 insertions(+), 98 deletions(-)
 create mode 100644 src/components/CopyLink.vue

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index d878270..c4897cc 100644
--- a/src/assets/css/chat.scss
+++ b/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;
diff --git a/src/assets/translations/bo.json b/src/assets/translations/bo.json
index f3cc3c7..c19df4c 100644
--- a/src/assets/translations/bo.json
+++ b/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": "ཚོད་ལྟའི་ཁྱད་ཆོས་ཁག",
diff --git a/src/assets/translations/de.json b/src/assets/translations/de.json
index 65b8f64..6009de4 100644
--- a/src/assets/translations/de.json
+++ b/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",
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 190277d..6bd7cf3 100644
--- a/src/assets/translations/en.json
+++ b/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",
diff --git a/src/assets/translations/es.json b/src/assets/translations/es.json
index 963582c..2971859 100644
--- a/src/assets/translations/es.json
+++ b/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": {
diff --git a/src/assets/translations/fr.json b/src/assets/translations/fr.json
index 317325f..bb08028 100644
--- a/src/assets/translations/fr.json
+++ b/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)",
diff --git a/src/assets/translations/it.json b/src/assets/translations/it.json
index 500d785..3c53d29 100644
--- a/src/assets/translations/it.json
+++ b/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",
diff --git a/src/assets/translations/nb_NO.json b/src/assets/translations/nb_NO.json
index 46e4c3f..63c5225 100644
--- a/src/assets/translations/nb_NO.json
+++ b/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"
     },
diff --git a/src/assets/translations/pt_BR.json b/src/assets/translations/pt_BR.json
index a4702e1..cddd3e2 100644
--- a/src/assets/translations/pt_BR.json
+++ b/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",
diff --git a/src/assets/translations/ro.json b/src/assets/translations/ro.json
index 081a30c..cfad603 100644
--- a/src/assets/translations/ro.json
+++ b/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",
diff --git a/src/assets/translations/ug.json b/src/assets/translations/ug.json
index af1b14a..f30fa5e 100644
--- a/src/assets/translations/ug.json
+++ b/src/assets/translations/ug.json
@@ -144,7 +144,7 @@
         "members": "ئەزالار",
         "purge": "ئۆينى ئۆچۈرۈڭ",
         "link_copied": "ئۇلىنىش كۆچۈرۈلدى!",
-        "copy_link": "تەكلىپ ئۇلانمىسىنى كۆچۈرۈڭ",
+        "copy_invite_link": "تەكلىپ ئۇلانمىسىنى كۆچۈرۈڭ",
         "join_public": "ئۇلىنىشى بارلار",
         "join_invite": "پەقەت كىشىلەر قوشۇلدى",
         "permissions": "ئىجازەتكە قوشۇلۇڭ",
diff --git a/src/assets/translations/zh_Hans.json b/src/assets/translations/zh_Hans.json
index 4c767d4..3a55911 100644
--- a/src/assets/translations/zh_Hans.json
+++ b/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": "语音模块",
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 4660caa..0f20da3 100644
--- a/src/components/ChatHeader.vue
+++ b/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);
           }
         });
diff --git a/src/components/CopyLink.vue b/src/components/CopyLink.vue
new file mode 100644
index 0000000..21ae819
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 2d68219..2929f15 100644
--- a/src/components/Profile.vue
+++ b/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: {
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 5f8f790..a2fd81e 100644
--- a/src/components/RoomInfo.vue
+++ b/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) {