[change] Relative URL for Notification links

openwisp · Mar 8, 2024 · 66700a2 · 66700a2
1 parent b8af7eb
commit 66700a2
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/openwisp_notifications/static/openwisp-notifications/js/notifications.js b/openwisp_notifications/static/openwisp-notifications/js/notifications.js
@@ -197,6 +197,7 @@ function notificationWidget($) {
     function notificationListItem(elem) {
         let klass,
             datetime = dateTimeStampToDateTimeLocaleString(new Date(elem.timestamp));
+        const target_url = new URL(elem.target_url);
 
         if (!notificationReadStatus.has(elem.id)) {
             if (elem.unread) {
@@ -207,8 +208,22 @@ function notificationWidget($) {
         }
         klass = notificationReadStatus.get(elem.id);
 
+        function convertMessageWithRelativeURL(htmlString) {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(htmlString, "text/html");
+          const links = doc.querySelectorAll("a");
+          links.forEach((link) => {
+            const absoluteUrl = link.getAttribute("href");
+            if (absoluteUrl) {
+              const url = new URL(absoluteUrl);
+              link.setAttribute("href", url.pathname);
+            }
+          });
+          return doc.body.innerHTML;
+        }
+
         return `<div class="ow-notification-elem ${klass}" id=ow-${elem.id}
-                        data-location="${elem.target_url}" role="link" tabindex="0">
+                        data-location="${target_url.pathname}" role="link" tabindex="0">
                     <div class="ow-notification-inner">
                         <div class="ow-notification-meta">
                         <div class="ow-notification-level-wrapper">
@@ -217,7 +232,7 @@ function notificationWidget($) {
                         </div>
                         <div class="ow-notification-date">${datetime}</div>
                         </div>
-                    ${elem.message}
+                    ${convertMessageWithRelativeURL(elem.message)}
                     </div>
                 </div>`;
     }