feat: Add User By Name Web component

This change will allow to display the user full name with its avatar by using a simple Web Component tag 'user-by-name'.

Author: boubaker

webapp/src/main/webapp/js/ExtendedDomPurify.js

@@ -45,7 +45,7 @@
         SAFE_FOR_TEMPLATES: true,
         svg: true
       },
-      ADD_TAGS: ["iframe", "content-link"],
+      ADD_TAGS: ["iframe", "content-link", "user-by-name"],
       ADD_ATTR: ['is', 'target', 'allow', 'allowfullscreen', 'frameborder', 'scrolling', 'v-identity-popover'],
     });
     DOMPurify.addHook('afterSanitizeAttributes', function(node) {

webapp/src/main/webapp/vue-apps/common/initWebComponents.js

@@ -17,3 +17,4 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import './web-components/ContentLinkWebComponent.js';
+import './web-components/UserByNameWebComponent.js';

webapp/src/main/webapp/vue-apps/common/web-components/UserByNameWebComponent.js

@@ -0,0 +1,40 @@
+class UserByName extends HTMLElement {
+
+  constructor(params) {
+    super(params);
+  }
+
+  connectedCallback() {
+    const username = this.textContent?.replace?.(/^@/, '')?.trim?.();
+    if (username?.length) {
+      fetch(`/portal/rest/v1/social/identities/organization/${username}`, {
+        method: 'GET',
+        credentials: 'include',
+      }).then(resp => resp?.ok && resp.json()).then(identity => {
+        if (identity) {
+          const template = document.createElement('template');
+          let htmlContent = `<a href="/portal/profile/${username}" target="_blank" class="d-inline-flex position-relative">`;
+          htmlContent += '  <div class="v-avatar ma-0 absolute-vertical-center z-index-one" style="height: 1.5em;min-width: 1.5em;width: 1.5em;">';
+          htmlContent += `    <img src="${identity.profile.avatar}" class="object-fit-cover">`;
+          htmlContent += '  </div>';
+          htmlContent += `  <div class="overflow-hidden" style="margin-left: calc(1.6em + 4px);">${identity.profile.fullname}</div>`;
+          htmlContent += '</a>';
+          template.innerHTML = htmlContent;
+          const node = template.content.firstElementChild;
+          this.replaceWith(node);
+        } else {
+          throw new Error();
+        }
+      }).catch(e => {
+        console.debug(e); // eslint-disable-line no-console
+        const template = document.createElement('template');
+        template.innerHTML = `<div>${username}</div>`;
+        const node = template.content.firstElementChild;
+        this.replaceWith(node);
+      });
+    }
+  }
+
+}
+
+window.customElements.define('user-by-name', UserByName);