feat: add user agent parser

dewanakl · Jan 15, 2025 · d6a92c0 · d6a92c0
1 parent 00c397f
commit d6a92c0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/js/app/component/card.js b/js/app/component/card.js
@@ -104,7 +104,7 @@ export const card = (() => {
         return `
         <div class="p-2 my-2 rounded-3 border">
             <p class="text-${text} mb-1 mx-0 mt-0 p-0" style="font-size: 0.7rem;" id="ip-${comment.uuid}"><i class="fa-solid fa-location-dot me-1"></i>${util.escapeHtml(comment.ip)} ${tracker.has(comment.ip) ? `<strong>${tracker.get(comment.ip)}</strong>` : `<span class="mb-1 placeholder col-2 rounded-3"></span>`}</p>
-            <p class="text-${text} m-0 p-0" style="font-size: 0.7rem;"><i class="fa-solid fa-mobile-screen-button me-1"></i>${util.escapeHtml(comment.user_agent)}</p>
+            <p class="text-${text} m-0 p-0" style="font-size: 0.7rem;"><i class="fa-solid fa-mobile-screen-button me-1"></i>${util.parseUserAgent(util.escapeHtml(comment.user_agent))}</p>
         </div>`;
     };
 

diff --git a/js/common/util.js b/js/common/util.js
@@ -120,6 +120,46 @@ export const util = (() => {
         return decoder.decode(decodedBytes);
     };
 
+    /**
+     * @param {string} userAgent 
+     * @returns {string}
+     */
+    const parseUserAgent = (userAgent) => {
+        const deviceTypes = [
+            { type: 'Mobile', regex: /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i },
+            { type: 'Tablet', regex: /iPad|Android(?!.*Mobile)/i },
+            { type: 'Desktop', regex: /Windows NT|Macintosh|Linux/i },
+        ];
+
+        const browsers = [
+            { name: 'Chrome', regex: /Chrome|CriOS/i },
+            { name: 'Safari', regex: /Safari/i },
+            { name: 'Edge', regex: /Edg|Edge/i },
+            { name: 'Firefox', regex: /Firefox|FxiOS/i },
+            { name: 'Opera', regex: /Opera|OPR/i },
+            { name: 'Internet Explorer', regex: /MSIE|Trident/i },
+        ];
+
+        const operatingSystems = [
+            { name: 'Windows', regex: /Windows NT ([\d.]+)/i },
+            { name: 'MacOS', regex: /Mac OS X ([\d_]+)/i },
+            { name: 'Android', regex: /Android ([\d.]+)/i },
+            { name: 'iOS', regex: /OS ([\d_]+) like Mac OS X/i },
+            { name: 'Linux', regex: /Linux/i },
+        ];
+
+        const deviceType = deviceTypes.find((device) => device.regex.test(userAgent))?.type || 'Unknown';
+        const browser = browsers.find((browser) => browser.regex.test(userAgent))?.name || 'Unknown';
+        const osMatch = operatingSystems.find((os) => os.regex.test(userAgent));
+
+        let osVersion = osMatch ? (userAgent.match(osMatch.regex)?.[1]?.replace(/_/g, '.') || '') : '';
+
+        const os = osMatch ? osMatch.name : 'Unknown';
+        osVersion = osVersion ? `${os} ${osVersion}` : os;
+
+        return `${browser} ${deviceType} ${osVersion}`;
+    };
+
     return {
         copy,
         timeOut,
@@ -128,5 +168,6 @@ export const util = (() => {
         base64Decode,
         disableButton,
         disableCheckbox,
+        parseUserAgent,
     };
 })();