From 3317e7aa6823ffc8ba7e8cef58cb293b9082b5fe Mon Sep 17 00:00:00 2001
From: Bradley Schofield <ionic@ionicisere.co.uk>
Date: Wed, 16 Sep 2020 15:27:32 +0100
Subject: [PATCH 1/3] Add fallback graphic for user.phtml

+ Fallback SVG
+ onError code to change src if image doesn't exist
---
 app/views/console/users/user.phtml |  2 +-
 public/images/unknown.svg          | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 public/images/unknown.svg

diff --git a/app/views/console/users/user.phtml b/app/views/console/users/user.phtml
index 7288d2f6a4..57dd0e7c85 100644
--- a/app/views/console/users/user.phtml
+++ b/app/views/console/users/user.phtml
@@ -179,7 +179,7 @@
                                         <button class="danger">Logout</button>
                                     </form>
 
-                                    <img data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class="avatar trans pull-start margin-end" />
+                                    <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class="avatar trans pull-start margin-end" />
 
                                     <span data-ls-bind="{{session.client.name}}"></span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-bind="{{session.model}}"></span> <span data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
 
diff --git a/public/images/unknown.svg b/public/images/unknown.svg
new file mode 100644
index 0000000000..001d61ad64
--- /dev/null
+++ b/public/images/unknown.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#26262F" stroke="none">
+<path d="M5000 10143 c-904 -20 -1805 -293 -2565 -776 -1163 -740 -1970 -1911
+-2240 -3252 -68 -337 -96 -634 -96 -1000 0 -483 55 -896 180 -1350 268 -971
+836 -1854 1609 -2501 868 -726 1911 -1129 3032 -1173 700 -27 1388 85 2020
+331 1324 514 2364 1554 2878 2878 197 508 309 1052 331 1610 42 1074 -243
+2099 -830 2983 -742 1118 -1887 1889 -3194 2152 -354 71 -756 106 -1125 98z
+m375 -673 c778 -48 1359 -279 1826 -728 377 -361 594 -768 676 -1267 25 -156
+25 -525 -1 -680 -36 -221 -88 -386 -182 -583 -175 -368 -480 -723 -1099 -1281
+-310 -279 -556 -524 -649 -647 -84 -111 -194 -331 -235 -474 -51 -175 -81
+-419 -97 -803 l-7 -157 -506 2 -506 3 1 300 c1 508 55 822 199 1160 175 408
+417 696 1105 1316 645 582 814 806 890 1181 39 188 26 461 -31 653 -122 415
+-477 811 -894 997 -252 113 -552 162 -849 138 -373 -29 -659 -142 -929 -368
+-301 -253 -521 -690 -621 -1237 -19 -103 -25 -120 -42 -122 -10 -2 -253 26
+-539 60 l-520 62 3 60 c3 73 43 289 83 447 98 390 273 757 497 1043 84 107
+305 322 417 405 120 90 277 185 402 245 446 213 1020 311 1608 275z m355
+-8130 l0 -600 -600 0 -600 0 0 600 0 600 600 0 600 0 0 -600z"/>
+</g>
+</svg>

From ac682684c1ef9ccae436b4b07296e494b727e613 Mon Sep 17 00:00:00 2001
From: Bradley Schofield <ionicisere@gmail.com>
Date: Wed, 16 Sep 2020 16:21:32 +0100
Subject: [PATCH 2/3] Improve Look and Add Unknown text aswell

+ Changed unknown.svg color from #26262F to #96b7eb
+ Added 'Unknown' text when the user agent cannot be identified in console
---
 app/views/console/users/user.phtml | 8 ++++----
 public/images/unknown.svg          | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/console/users/user.phtml b/app/views/console/users/user.phtml
index 57dd0e7c85..4d704f005f 100644
--- a/app/views/console/users/user.phtml
+++ b/app/views/console/users/user.phtml
@@ -181,10 +181,10 @@
 
                                     <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class="avatar trans pull-start margin-end" />
 
-                                    <span data-ls-bind="{{session.client.name}}"></span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-bind="{{session.model}}"></span> <span data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
+                                    <span data-ls-if="({{session.client.name}})" data-ls-bind="{{session.client.name}}"></span> <span data-ls-if="(!{{session.client.name}})">Unknown</span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-if="({{session.model}})" data-ls-bind="{{session.model}}"></span> <span data-ls-if="(!{{session.OS.name}})">Unknown</span> <span data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
 
                                     <div class="margin-top-small">
-                                        <img data-ls-attrs="src={{env.API}}/avatars/flags/{{session.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs margin-end-small inline" />
+                                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/flags/{{session.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs margin-end-small inline" />
                                         <small data-ls-bind="{{session.ip}}"></small> / <small data-ls-bind="{{session.geo.country}}"></small>
                                     </div>
                                 </li>
@@ -239,11 +239,11 @@
                                     <td data-title="Date: "><span data-ls-bind="{{log.time|date-time}}"></span></td>
                                     <td data-title="Event: "><span data-ls-bind="{{log.event}}"></span></td>
                                     <td data-title="Client: ">
-                                        <img data-ls-attrs="src={{env.API}}/avatars/browsers/{{log.client.short_name|lowercase}}?width=80&height=80&project={{env.PROJECT}},title={{log.client.name}},alt={{log.client.name}}" class="avatar xxs inline margin-end-small" />
+                                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{log.client.short_name|lowercase}}?width=80&height=80&project={{env.PROJECT}},title={{log.client.name}},alt={{log.client.name}}" class="avatar xxs inline margin-end-small" />
                                         <span data-ls-bind="{{log.client.name}} {{log.client.version}} on {{log.model}} {{log.OS.name}} {{log.OS.version}}"></span>
                                     </td>
                                     <td data-title="Location: ">
-                                        <img data-ls-attrs="src={{env.API}}/avatars/flags/{{log.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs inline margin-end-small" />
+                                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/flags/{{log.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs inline margin-end-small" />
                                         <span data-ls-bind="{{log.geo.country}}"></span>
                                     </td>
                                     <td data-title="IP: "><span data-ls-bind="{{log.ip}}"></span></td>
diff --git a/public/images/unknown.svg b/public/images/unknown.svg
index 001d61ad64..d0926cb301 100644
--- a/public/images/unknown.svg
+++ b/public/images/unknown.svg
@@ -5,7 +5,7 @@
  width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
  preserveAspectRatio="xMidYMid meet">
 <g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
-fill="#26262F" stroke="none">
+fill="#96b7eb" stroke="none">
 <path d="M5000 10143 c-904 -20 -1805 -293 -2565 -776 -1163 -740 -1970 -1911
 -2240 -3252 -68 -337 -96 -634 -96 -1000 0 -483 55 -896 180 -1350 268 -971
 836 -1854 1609 -2501 868 -726 1911 -1129 3032 -1173 700 -27 1388 85 2020

From d4533bd1c3e01be97f32f69e3267d41e98c0005c Mon Sep 17 00:00:00 2001
From: Bradley Schofield <ionic@ionicisere.co.uk>
Date: Wed, 16 Sep 2020 20:13:44 +0100
Subject: [PATCH 3/3] Implement fix on /console/account/devices

+ Implement fix on /console/account/devices
+ Fixed oversight where if data was applied on wrong span
---
 app/views/console/account/index.phtml | 10 +++++-----
 app/views/console/users/user.phtml    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/console/account/index.phtml b/app/views/console/account/index.phtml
index da40715f19..b90e2b4e11 100644
--- a/app/views/console/account/index.phtml
+++ b/app/views/console/account/index.phtml
@@ -236,16 +236,16 @@
                             </form>
                         </span>
 
-                        <img data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class="avatar trans pull-start margin-end" />
+                        <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class="avatar trans pull-start margin-end" />
 
-                        <span data-ls-bind="{{session.client.name}}"></span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-bind="{{session.model}}"></span> <span data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
+                        <span data-ls-if="({{session.client.name}})" data-ls-bind="{{session.client.name}}"></span> <span data-ls-if="(!{{session.client.name}})">Unknown</span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-bind="{{session.model}}"></span> <span data-ls-if="(!{{session.OS.name}})">Unknown</span> <span data-ls-if="({{session.OS.name}})" data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
                         &nbsp;
                         <span data-ls-if="true == {{session.current}}">
                             <span class="tag green">Current Session</span>
                         </span>
 
                         <div class="margin-top-small">
-                            <img data-ls-attrs="src={{env.API}}/avatars/flags/{{session.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs margin-end-small inline" />
+                            <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/flags/{{session.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs margin-end-small inline" />
                             <small data-ls-bind="{{session.ip}}"></small> / <small data-ls-bind="{{session.geo.country}}"></small>
                         </div>
                     </li>
@@ -294,11 +294,11 @@
                                 <td data-title="Date: "><span data-ls-bind="{{log.time|date-time}}"></span></td>
                                 <td data-title="Event: "><span data-ls-bind="{{log.event}}"></span></td>
                                 <td data-title="Client: ">
-                                    <img data-ls-attrs="src={{env.API}}/avatars/browsers/{{log.client.short_name|lowercase}}?width=80&height=80&project={{env.PROJECT}},title={{log.client.name}},alt={{log.client.name}}" class="avatar xxs inline margin-end-small" />
+                                    <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{log.client.short_name|lowercase}}?width=80&height=80&project={{env.PROJECT}},title={{log.client.name}},alt={{log.client.name}}" class="avatar xxs inline margin-end-small" />
                                     <span data-ls-bind="{{log.client.name}} {{log.client.version}} on {{log.model}} {{log.OS.name}} {{log.OS.version}}"></span>
                                 </td>
                                 <td data-title="Location: ">
-                                    <img data-ls-attrs="src={{env.API}}/avatars/flags/{{log.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs inline margin-end-small" />
+                                    <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/flags/{{log.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs inline margin-end-small" />
                                     <span data-ls-bind="{{log.geo.country}}"></span>
                                 </td>
                                 <td data-title="IP: "><span data-ls-bind="{{log.ip}}"></span></td>
diff --git a/app/views/console/users/user.phtml b/app/views/console/users/user.phtml
index 4d704f005f..3788a9e3aa 100644
--- a/app/views/console/users/user.phtml
+++ b/app/views/console/users/user.phtml
@@ -181,7 +181,7 @@
 
                                     <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class="avatar trans pull-start margin-end" />
 
-                                    <span data-ls-if="({{session.client.name}})" data-ls-bind="{{session.client.name}}"></span> <span data-ls-if="(!{{session.client.name}})">Unknown</span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-if="({{session.model}})" data-ls-bind="{{session.model}}"></span> <span data-ls-if="(!{{session.OS.name}})">Unknown</span> <span data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
+                                    <span data-ls-if="({{session.client.name}})" data-ls-bind="{{session.client.name}}"></span> <span data-ls-if="(!{{session.client.name}})">Unknown</span> <span data-ls-bind="{{session.client.version}}"></span> on <span data-ls-bind="{{session.model}}"></span> <span data-ls-if="(!{{session.OS.name}})">Unknown</span> <span data-ls-if="({{session.OS.name}})" data-ls-bind="{{session.OS.name}}"></span> <span data-ls-bind="{{session.OS.version}}"></span>
 
                                     <div class="margin-top-small">
                                         <img onerror="this.onerror=null;this.src='/images/unknown.svg'" data-ls-attrs="src={{env.API}}/avatars/flags/{{session.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class="avatar xxs margin-end-small inline" />