user_profile: Add "copy link to profile" button in user_profile_modal.

This commit adds a "copy link to profile" button in user_profile_modal.
Clicking on this button copies the user's profile link and displays a
"Copied!" tooltip.

web/src/user_profile.js

@@ -1,3 +1,4 @@
+import ClipboardJS from "clipboard";
 import {parseISO} from "date-fns";
 import $ from "jquery";
 
@@ -16,6 +17,7 @@ import * as browser_history from "./browser_history";
 import * as buddy_data from "./buddy_data";
 import * as channel from "./channel";
 import * as components from "./components";
+import {show_copied_confirmation} from "./copied_tooltip";
 import {csrf_token} from "./csrf";
 import * as custom_profile_fields_ui from "./custom_profile_fields_ui";
 import * as dialog_widget from "./dialog_widget";
@@ -961,4 +963,15 @@ export function initialize() {
             $input.css("margin-right", "0");
         }
     });
+
+    new ClipboardJS(".copy_link_to_user_profile", {
+        text(trigger) {
+            const user_id = $(trigger).attr("data-user-id");
+            const user_profile_link = window.location.origin + "/#user/" + user_id;
+
+            return user_profile_link;
+        },
+    }).on("success", (e) => {
+        show_copied_confirmation(e.trigger);
+    });
 }

web/styles/dark_theme.css

@@ -60,7 +60,8 @@
 
     /************************* MODAL DARK THEME *******************/
     .user_profile_manage_own_edit_button,
-    .user_profile_manage_others_edit_button {
+    .user_profile_manage_others_edit_button,
+    .user_profile_manage_own_copy_link_button {
         color: hsl(200deg 100% 50%);
         cursor: pointer;
 

web/styles/modal.css

@@ -70,7 +70,8 @@
     }
 
     .user_profile_manage_own_edit_button,
-    .user_profile_manage_others_edit_button {
+    .user_profile_manage_others_edit_button,
+    .user_profile_manage_own_copy_link_button {
         color: hsl(200deg 100% 50%);
         cursor: pointer;
 

web/styles/popovers.css

@@ -574,6 +574,18 @@ ul {
         font-size: 18px;
     }
 
+    .user_profile_manage_own_copy_link_button {
+        width: 20px;
+        height: 15px;
+        text-align: center;
+        font-size: 15px;
+    }
+
+    #user_profile_manage_own_copy_link {
+        height: 25px;
+        margin-right: 8px;
+    }
+
     #user_profile_manage_own_edit_link {
         height: 25px;
     }

web/templates/user_profile_modal.hbs

@@ -18,6 +18,9 @@
                         <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                     {{/if}}
                     <span class="user_profile_name">{{> user_full_name name=full_name}}</span>
+                    <a id="user_profile_manage_own_copy_link" class="copy_link_to_user_profile" tabindex="0" data-user-id="{{user_id}}">
+                        <i class="fa fa-link tippy-zulip-tooltip user_profile_manage_own_copy_link_button" data-tippy-content="{{t 'Copy link to profile' }}" aria-hidden="true"></i>
+                    </a>
                     {{#if is_me}}
                         <a id="user_profile_manage_own_edit_link" href="/#settings/profile">
                             <i class="fa fa-edit tippy-zulip-tooltip user_profile_manage_own_edit_button" data-tippy-content="{{t 'Edit profile' }}" aria-hidden="true"></i>