add desktop/mobile/tablet badges to events log

app/views/icons/_device_desktop.html.erb

@@ -0,0 +1,8 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z" />
+  <path d="M7 20h10" /><path d="M9 16v4" />
+  <path d="M15 16v4" /></svg>
+  <path d="M9 16v4" />
+  <path d="M15 16v4" />
+</svg>

app/views/icons/_device_mobile.html.erb

@@ -0,0 +1,6 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" />
+  <path d="M11 4h2" />
+  <path d="M12 17v.01" />
+</svg>

app/views/icons/_device_tablet.html.erb

@@ -0,0 +1,5 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z" />
+  <path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
+</svg>

app/views/submission_events/index.html.erb

@@ -21,6 +21,7 @@
         </p>
       </li>
       <% @submission.submission_events.order(:event_timestamp).each do |event| %>
+        <% device = DetectBrowserDevice.call(event.data['ua']) %>
         <% submitter = @submission.submitters.find { |e| e.id == event.submitter_id } %>
         <% bg_class = event_colors[submitters_uuids.index(submitter.uuid) % event_colors.length] %>
         <% submitter_name = event.event_type.include?('sms') || event.event_type.include?('phone') ? (event.data['phone'] || submitter.phone) : (submitter.name || submitter.email || submitter.phone) %>
@@ -28,9 +29,14 @@
           <span class="absolute flex items-center justify-center w-7 h-7 rounded-full -start-3.5 ring-8 ring-base-100 text-base-content <%= bg_class %>">
             <%= svg_icon(SubmissionEventsController::SUBMISSION_EVENT_ICONS.fetch(event.event_type, 'circle_dot'), class: 'w-4 h-4') %>
           </span>
-          <p class="text-sm leading-none text-base-content/60 pt-1.5">
+          <div class="flex items-center space-x-1 pt-1.5">
+            <span class="text-sm leading-none text-base-content/60">
               <%= l(event.event_timestamp.in_time_zone(current_account.timezone), format: :long, locale: current_account.locale) %>
-          </p>
+            </span>
+            <span class="tooltip tooltip-top" data-tip="<%= t(device) %>">
+              <%= svg_icon("device_#{device}", class: 'w-3.5 h-3.5') %>
+            </span>
+          </div>
           <p class="text-base-content/80 mt-1">
             <% if event.event_type == 'complete_verification' %>
               <%= t('submission_event_names.complete_verification_by_html', provider: event.data['method'], submitter_name:) %>

config/locales/i18n.yml

@@ -837,6 +837,9 @@ en: &en
   connect_google_drive: Connect Google Drive
   google_drive_has_been_connected: Google Drive has been connected
   unable_to_identify_reset_your_password_to_sign_in: Unable to identify. Reset your password to sign in.
+  desktop: Desktop
+  mobile: Mobile
+  tablet: Tablet
   submission_sources:
     api: API
     bulk: Bulk Send
@@ -1758,6 +1761,9 @@ es: &es
   connect_google_drive: Conectar Google Drive
   google_drive_has_been_connected: Google Drive se ha conectado
   unable_to_identify_reset_your_password_to_sign_in: No se pudo identificar. Restablece tu contraseña para iniciar sesión.
+  desktop: Escritorio
+  mobile: Móvil
+  tablet: Tableta
   submission_sources:
     api: API
     bulk: Envío masivo
@@ -2680,6 +2686,9 @@ it: &it
   connect_google_drive: Connetti Google Drive
   google_drive_has_been_connected: Google Drive è stato connesso
   unable_to_identify_reset_your_password_to_sign_in: Impossibile identificare. Reimposta la password per accedere.
+  desktop: Desktop
+  mobile: Mobile
+  tablet: Tablet
   submission_sources:
     api: API
     bulk: Invio massivo
@@ -3599,6 +3608,9 @@ fr: &fr
   connect_google_drive: Connecter Google Drive
   google_drive_has_been_connected: Google Drive a été connecté
   unable_to_identify_reset_your_password_to_sign_in: Impossible d’identifier. Réinitialisez votre mot de passe pour vous connecter.
+  desktop: Bureau
+  mobile: Mobile
+  tablet: Tablette
   submission_sources:
     api: API
     bulk: Envoi en masse
@@ -4522,6 +4534,9 @@ pt: &pt
   connect_google_drive: Conectar Google Drive
   google_drive_has_been_connected: O Google Drive foi conectado
   unable_to_identify_reset_your_password_to_sign_in: Não foi possível identificar. Redefina sua senha para fazer login.
+  desktop: Computador
+  mobile: Celular
+  tablet: Tablet
   submission_sources:
     api: API
     bulk: Envio em massa
@@ -5445,6 +5460,9 @@ de: &de
   connect_google_drive: Google Drive verbinden
   google_drive_has_been_connected: Google Drive wurde verbunden
   unable_to_identify_reset_your_password_to_sign_in: Identifizierung nicht möglich. Setzen Sie Ihr Passwort zurück, um sich anzumelden.
+  desktop: Desktop
+  mobile: Mobil
+  tablet: Tablet
   submission_sources:
     api: API
     bulk: Massenversand
@@ -6729,6 +6747,9 @@ nl: &nl
   connect_google_drive: Verbind Google Drive
   google_drive_has_been_connected: Google Drive is verbonden
   unable_to_identify_reset_your_password_to_sign_in: Kan niet worden geïdentificeerd. Stel je wachtwoord opnieuw in om in te loggen.
+  desktop: Desktop
+  mobile: Mobiel
+  tablet: Tablet
   submission_sources:
     api: API
     bulk: Bulkverzending

lib/detect_browser_device.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module DetectBrowserDevice
+  module_function
+
+  # rubocop:disable Metrics/LineLength
+  MOBILE_USER_AGENT_REGEXP = /iPhone|iPod|Android.*Mobile|Opera Mini|Opera Mobi|webOS|IEMobile|Windows Phone|BlackBerry|BB10|Mobile/i
+  TABLET_USER_AGENT_REGEXP = /iPad|Android(?!.*Mobile)|Tablet|Kindle|PlayBook|Silk/i
+  # rubocop:enable Metrics/LineLength
+
+  def call(user_agent)
+    return :mobile if mobile?(user_agent)
+    return :tablet if tablet?(user_agent)
+
+    :desktop
+  end
+
+  def mobile?(user_agent)
+    user_agent.to_s =~ MOBILE_USER_AGENT_REGEXP
+  end
+
+  def tablet?(user_agent)
+    user_agent.to_s =~ TABLET_USER_AGENT_REGEXP
+  end
+end