feat: aggiornamento info di accesso con icone

Author: loviuz

gulpfile.js

@@ -421,6 +421,14 @@ function pdfjs() {
     return merge(web, build);
 }
 
+function uaparser() {
+    return gulp.src([
+        config.nodeDirectory + '/ua-parser-js/dist/icons/mono/**/*',
+        '!' + config.nodeDirectory + '/ua-parser-js/dist/icons/mono/LICENSE.md',
+    ])
+        .pipe(gulp.dest(config.production + '/img/icons/'));
+}
+
 // Elaborazione e minificazione delle informazioni sull'internazionalizzazione
 function i18n() {
     return gulp.src([
@@ -596,7 +604,7 @@ function clean() {
 }
 
 // Operazioni di default per la generazione degli assets
-const bower = gulp.series(clean, gulp.parallel(JS, CSS, images, fonts, ckeditor, colorpicker, i18n, pdfjs, hotkeys, chartjs, password_strength, csrf, leaflet, wacom));
+const bower = gulp.series(clean, gulp.parallel(JS, CSS, images, fonts, ckeditor, colorpicker, i18n, pdfjs, uaparser, hotkeys, chartjs, password_strength, csrf, leaflet, wacom));
 
 // Debug su CSS e JS
 exports.srcJS = srcJS;

log.php

@@ -98,6 +98,7 @@
 <script>
 $(document).ready(function() {
     var parser = new UAParser();
+    var icons_path = globals.rootdir + '/assets/dist/img/icons';
 
     $('tr').each(function(){
         user_agent_cell = $(this).find('.user-agent');
@@ -107,7 +108,52 @@
             parser.setUA(user_agent);
             device = parser.getResult();
 
-            user_agent_cell.html('<strong>' + (device.browser.name || '') + '</strong> ' + (device.browser.version || '') + ' | <strong>' + (device.os.name || '') + '</strong> ' + (device.os.version || ''));
+            var device_info = [];
+
+            // Browser
+            if (device.browser.name) {
+                device_info['browser'] = {};
+                device_info['browser']['text'] = '<strong>' + device.browser.name + '</strong> ' + (device.browser.version || '');
+                device_info['browser']['icon'] = icons_path + '/browser/' + device.browser.name.toLowerCase().replace(' ', '-');
+            }
+
+            // OS
+            if (device.os.name) {
+                device_info['os'] = {};
+                device_info['os']['text'] = '<strong>' + device.os.name + '</strong> ' + (device.os.version || '');
+                device_info['os']['icon'] = icons_path + '/os/' + device.os.name.toLowerCase();
+            }
+
+            // Device
+            if (device.device.name) {
+                device_info['device'] = {};
+                device_info['device']['text'] = '<strong>' + device.device.vendor + '</strong> ' + (device.device.model || '');
+                device_info['device']['icon'] = icons_path + '/device/' + device.device.name.toLowerCase();
+            }
+
+            // Preparazione user-agent riscritto
+            if (device_info.browser || device_info.os) {
+                user_agent_cell.html('');
+            }
+
+            // Sostituzione user-agent con formato più amichevole
+            for (var key in device_info) {
+                var icon = device_info[key]['icon'];
+                var text = device_info[key]['text'];
+
+                if (icon) {
+                    var img = new Image();
+                    img.src = icon + '.svg';
+
+                    const imgElement = document.createElement('img');
+                    imgElement.src = img.src;
+                    imgElement.width = 14;
+                    imgElement.height = 14;
+                    user_agent_cell.append(imgElement).append(' ');
+                }
+
+                user_agent_cell.append(text + ' | ');
+            }
         }
     })
 })

package.json

@@ -49,7 +49,7 @@
         "sweetalert2": "^6.11.4",
         "toastr": "^2.1.4",
         "tooltipster": "^4.2.5",
-        "ua-parser-js": "^1.0.37"
+        "ua-parser-js": "^2.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.11.1",