feat: add browser info to diagnostics

frontend/resources/vue/views/DiagnosticsView.vue

@@ -1,44 +1,58 @@
 <template>
-  <Section title = "Get support">
-    <p>If you are having problems with OliveTin and want to raise a support request, it would be very helpful to include a sosreport from this page.
+  <Section :title="t('diagnostics.get-support')">
+    <p>{{ t('diagnostics.get-support-description') }}
     </p>
     <ul>
       <li>
-        <a href="https://docs.olivetin.app/sosreport.html" target="_blank">sosreport Documentation</a>
-      </li>
-      <li>
-        <a href = "https://docs.olivetin.app/troubleshooting/wheretofindhelp.html" target="_blank">Where to find help</a>
+        <a href = "https://docs.olivetin.app/troubleshooting/wheretofindhelp.html" target="_blank">{{ t('diagnostics.where-to-find-help') }}</a>
       </li>
     </ul>
   </Section>
 
-  <Section title = "SSH">
+  <Section :title="t('diagnostics.ssh')">
     <dl>
-      <dt>Found Key</dt>
+      <dt>{{ t('diagnostics.found-key') }}</dt>
       <dd>{{ diagnostics.sshFoundKey || '?' }}</dd>
-      <dt>Found Config</dt>
+      <dt>{{ t('diagnostics.found-config') }}</dt>
       <dd>{{ diagnostics.sshFoundConfig || '?' }}</dd>
     </dl>
   </Section>
 
-  <Section title = "SOS Report">
-    <p>This section allows you to generate a detailed report of your configuration and environment. It is a good idea to include this when raising a support request.</p>
+  <Section :title="t('diagnostics.sos-report')">
+    <p>{{ t('diagnostics.sos-report-description') }}</p>
+    <p>
+      <a href="https://docs.olivetin.app/troubleshooting/sosreport.html" target="_blank">{{ t('diagnostics.sos-report-docs') }}</a>
+    </p>
 
     <div role="toolbar">
-      <button @click="generateSosReport" :disabled="loading" class = "good">Generate SOS Report</button>
+      <button @click="generateSosReport" :disabled="loading" class = "good">{{ t('diagnostics.generate-sos-report') }}</button>
     </div>
 
-    <textarea v-model="sosReport" readonly style="flex: 1; min-height: 200px; resize: vertical;"></textarea>
+    <textarea v-model="sosReport" readonly style="flex: 1; min-height: 200px; resize: vertical; width: 100%; box-sizing: border-box;"></textarea>
+  </Section>
+
+  <Section :title="t('diagnostics.browser-info')">
+    <p>{{ t('diagnostics.browser-info-description') }}</p>
+
+    <div role="toolbar">
+      <button @click="generateBrowserInfo" :disabled="loading" class = "good">{{ t('diagnostics.generate-browser-info') }}</button>
+    </div>
+
+    <textarea v-model="browserInfo" readonly style="flex: 1; min-height: 200px; resize: vertical; width: 100%; box-sizing: border-box;"></textarea>
   </Section>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import Section from 'picocrank/vue/components/Section.vue'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
 
 const diagnostics = ref({})
 const loading = ref(false)
-const sosReport = ref('Waiting to start...')
+const sosReport = ref('')
+const browserInfo = ref('')
 
 async function fetchDiagnostics() {
   loading.value = true
@@ -52,8 +66,8 @@ async function fetchDiagnostics() {
   } catch (err) {
     console.error('Failed to fetch diagnostics:', err);
     diagnostics.value = {
-      sshFoundKey: 'Unknown',
-      sshFoundConfig: 'Unknown'
+      sshFoundKey: t('diagnostics.unknown'),
+      sshFoundConfig: t('diagnostics.unknown')
     }
   }
   loading.value = false
@@ -72,6 +86,114 @@ async function generateSosReport() {
   sosReport.value = response.alert
 }
 
+async function generateBrowserInfo() {
+  loading.value = true
+  try {
+    let userAgentData = 'N/A'
+    if (navigator.userAgentData) {
+      try {
+        const uaData = await navigator.userAgentData.getHighEntropyValues([
+          'platform',
+          'platformVersion',
+          'architecture',
+          'model',
+          'uaFullVersion',
+          'bitness',
+          'fullVersionList'
+        ])
+        userAgentData = JSON.stringify(uaData, null, 2)
+      } catch (err) {
+        userAgentData = `${t('diagnostics.useragent-data-error')}: ${err.message}`
+      }
+    }
+
+    const info = {
+      userAgent: navigator.userAgent,
+      platform: navigator.platform,
+      language: navigator.language,
+      languages: navigator.languages?.join(', ') || 'N/A',
+      cookieEnabled: navigator.cookieEnabled,
+      onLine: navigator.onLine,
+      screenWidth: screen.width,
+      screenHeight: screen.height,
+      screenColorDepth: screen.colorDepth,
+      screenPixelDepth: screen.pixelDepth,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      devicePixelRatio: window.devicePixelRatio || 'N/A',
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      timezoneOffset: new Date().getTimezoneOffset(),
+      localStorageEnabled: (() => {
+        try {
+          localStorage.setItem('test', 'test')
+          localStorage.removeItem('test')
+          return true
+        } catch {
+          return false
+        }
+      })(),
+      sessionStorageEnabled: (() => {
+        try {
+          sessionStorage.setItem('test', 'test')
+          sessionStorage.removeItem('test')
+          return true
+        } catch {
+          return false
+        }
+      })(),
+      hardwareConcurrency: navigator.hardwareConcurrency || 'N/A',
+      maxTouchPoints: navigator.maxTouchPoints || 'N/A',
+      vendor: navigator.vendor || 'N/A',
+      appName: navigator.appName,
+      appVersion: navigator.appVersion,
+      product: navigator.product,
+      userAgentData: userAgentData
+    }
+
+    const olivetinVersion = window.initResponse?.currentVersion || t('diagnostics.unknown')
+    const currentLanguage = locale.value || t('diagnostics.unknown')
+
+    let output = '### BROWSER INFO START (copy all text to BROWSER INFO END)\n'
+    output += `# OliveTin Information\n`
+    output += `olivetinVersion: ${olivetinVersion}\n`
+    output += `currentLanguage: ${currentLanguage}\n`
+    output += `\n# Browser Information\n`
+    output += `userAgent: ${info.userAgent}\n`
+    output += `platform: ${info.platform}\n`
+    output += `language: ${info.language}\n`
+    output += `languages: ${info.languages}\n`
+    output += `vendor: ${info.vendor}\n`
+    output += `appName: ${info.appName}\n`
+    output += `appVersion: ${info.appVersion}\n`
+    output += `product: ${info.product}\n`
+    output += `\n# User Agent Data\n`
+    output += `userAgentData:\n${info.userAgentData}\n`
+    output += `\n# Display Information\n`
+    output += `screenWidth: ${info.screenWidth}\n`
+    output += `screenHeight: ${info.screenHeight}\n`
+    output += `screenColorDepth: ${info.screenColorDepth}\n`
+    output += `screenPixelDepth: ${info.screenPixelDepth}\n`
+    output += `viewportWidth: ${info.viewportWidth}\n`
+    output += `viewportHeight: ${info.viewportHeight}\n`
+    output += `devicePixelRatio: ${info.devicePixelRatio}\n`
+    output += `\n# Feature Support\n`
+    output += `cookieEnabled: ${info.cookieEnabled}\n`
+    output += `localStorageEnabled: ${info.localStorageEnabled}\n`
+    output += `sessionStorageEnabled: ${info.sessionStorageEnabled}\n`
+    output += `onLine: ${info.onLine}\n`
+    output += `hardwareConcurrency: ${info.hardwareConcurrency}\n`
+    output += `maxTouchPoints: ${info.maxTouchPoints}\n`
+    output += `\n# Location & Time\n`
+    output += `timezone: ${info.timezone}\n`
+    output += `timezoneOffset: ${info.timezoneOffset}\n`
+    output += `\n### BROWSER INFO END (copy all text from BROWSER INFO START)\n`
+
+    browserInfo.value = output
+  } finally {
+    loading.value = false
+  }
+}
+
 onMounted(() => {
   fetchDiagnostics()
 })

lang/combined_output.json

@@ -3,6 +3,21 @@
     "messages": {
         "de-DE": {
             "connected": "Verbunden",
+            "diagnostics.browser-info": "Browser-Informationen",
+            "diagnostics.browser-info-description": "Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Browser-Informationen zu erstellen. Dies kann bei der Fehlerbehebung von browser-spezifischen Problemen hilfreich sein.",
+            "diagnostics.found-config": "Konfiguration gefunden",
+            "diagnostics.found-key": "Schlüssel gefunden",
+            "diagnostics.generate-browser-info": "Browser-Informationen erstellen",
+            "diagnostics.generate-sos-report": "SOS-Bericht erstellen",
+            "diagnostics.get-support": "Unterstützung erhalten",
+            "diagnostics.get-support-description": "Wenn Sie Probleme mit OliveTin haben und eine Support-Anfrage stellen möchten, wäre es sehr hilfreich, einen sosreport von dieser Seite einzufügen.",
+            "diagnostics.sos-report": "SOS-Bericht",
+            "diagnostics.sos-report-description": "Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Konfiguration und Umgebung zu erstellen. Es ist eine gute Idee, dies bei einer Support-Anfrage einzufügen.",
+            "diagnostics.sos-report-docs": "sosreport Dokumentation",
+            "diagnostics.ssh": "SSH",
+            "diagnostics.unknown": "Unbekannt",
+            "diagnostics.useragent-data-error": "Fehler beim Abrufen von userAgentData",
+            "diagnostics.where-to-find-help": "Wo Sie Hilfe finden",
             "docs": "Dokumentation",
             "language-dialog.browser-languages": "Browser-Sprachen",
             "language-dialog.close": "Schließen",
@@ -32,6 +47,21 @@
         },
         "en": {
             "connected": "Connected",
+            "diagnostics.browser-info": "Browser Info",
+            "diagnostics.browser-info-description": "This section allows you to generate a detailed report of your browser information. This can be helpful when troubleshooting browser-specific issues.",
+            "diagnostics.found-config": "Found Config",
+            "diagnostics.found-key": "Found Key",
+            "diagnostics.generate-browser-info": "Generate Browser Info",
+            "diagnostics.generate-sos-report": "Generate SOS Report",
+            "diagnostics.get-support": "Get support",
+            "diagnostics.get-support-description": "If you are having problems with OliveTin and want to raise a support request, it would be very helpful to include a sosreport from this page.",
+            "diagnostics.sos-report": "SOS Report",
+            "diagnostics.sos-report-description": "This section allows you to generate a detailed report of your configuration and environment. It is a good idea to include this when raising a support request.",
+            "diagnostics.sos-report-docs": "sosreport Documentation",
+            "diagnostics.ssh": "SSH",
+            "diagnostics.unknown": "Unknown",
+            "diagnostics.useragent-data-error": "Error retrieving userAgentData",
+            "diagnostics.where-to-find-help": "Where to find help",
             "docs": "Documentation",
             "language-dialog.browser-languages": "Browser languages",
             "language-dialog.close": "Close",
@@ -61,6 +91,21 @@
         },
         "es-ES": {
             "connected": "Conectado",
+            "diagnostics.browser-info": "Información del navegador",
+            "diagnostics.browser-info-description": "Esta sección le permite generar un informe detallado de su información del navegador. Esto puede ser útil al solucionar problemas específicos del navegador.",
+            "diagnostics.found-config": "Configuración encontrada",
+            "diagnostics.found-key": "Clave encontrada",
+            "diagnostics.generate-browser-info": "Generar información del navegador",
+            "diagnostics.generate-sos-report": "Generar informe SOS",
+            "diagnostics.get-support": "Obtener soporte",
+            "diagnostics.get-support-description": "Si tiene problemas con OliveTin y desea presentar una solicitud de soporte, sería muy útil incluir un sosreport de esta página.",
+            "diagnostics.sos-report": "Informe SOS",
+            "diagnostics.sos-report-description": "Esta sección le permite generar un informe detallado de su configuración y entorno. Es una buena idea incluir esto al presentar una solicitud de soporte.",
+            "diagnostics.sos-report-docs": "Documentación de sosreport",
+            "diagnostics.ssh": "SSH",
+            "diagnostics.unknown": "Desconocido",
+            "diagnostics.useragent-data-error": "Error al recuperar userAgentData",
+            "diagnostics.where-to-find-help": "Dónde encontrar ayuda",
             "docs": "Documentación",
             "language-dialog.browser-languages": "Idiomas del navegador",
             "language-dialog.close": "Cerrar",
@@ -90,6 +135,21 @@
         },
         "it-IT": {
             "connected": "Connesso",
+            "diagnostics.browser-info": "Informazioni del browser",
+            "diagnostics.browser-info-description": "Questa sezione ti consente di generare un rapporto dettagliato delle informazioni del tuo browser. Questo può essere utile durante la risoluzione dei problemi specifici del browser.",
+            "diagnostics.found-config": "Configurazione trovata",
+            "diagnostics.found-key": "Chiave trovata",
+            "diagnostics.generate-browser-info": "Genera informazioni del browser",
+            "diagnostics.generate-sos-report": "Genera rapporto SOS",
+            "diagnostics.get-support": "Ottenere supporto",
+            "diagnostics.get-support-description": "Se hai problemi con OliveTin e vuoi presentare una richiesta di supporto, sarebbe molto utile includere un sosreport da questa pagina.",
+            "diagnostics.sos-report": "Rapporto SOS",
+            "diagnostics.sos-report-description": "Questa sezione ti consente di generare un rapporto dettagliato della tua configurazione e ambiente. È una buona idea includere questo quando si presenta una richiesta di supporto.",
+            "diagnostics.sos-report-docs": "Documentazione sosreport",
+            "diagnostics.ssh": "SSH",
+            "diagnostics.unknown": "Sconosciuto",
+            "diagnostics.useragent-data-error": "Errore nel recupero di userAgentData",
+            "diagnostics.where-to-find-help": "Dove trovare aiuto",
             "docs": "Documentazione",
             "language-dialog.browser-languages": "Lingue del browser",
             "language-dialog.close": "Chiudi",
@@ -119,6 +179,21 @@
         },
         "zh-Hans-CN": {
             "connected": "已连接",
+            "diagnostics.browser-info": "浏览器信息",
+            "diagnostics.browser-info-description": "此部分允许您生成浏览器信息的详细报告。这在排查浏览器特定问题时很有帮助。",
+            "diagnostics.found-config": "找到配置",
+            "diagnostics.found-key": "找到密钥",
+            "diagnostics.generate-browser-info": "生成浏览器信息",
+            "diagnostics.generate-sos-report": "生成 SOS 报告",
+            "diagnostics.get-support": "获取支持",
+            "diagnostics.get-support-description": "如果您在使用 OliveTin 时遇到问题并希望提交支持请求，从本页面包含 sosreport 将非常有帮助。",
+            "diagnostics.sos-report": "SOS 报告",
+            "diagnostics.sos-report-description": "此部分允许您生成配置和环境的详细报告。在提交支持请求时包含此信息是个好主意。",
+            "diagnostics.sos-report-docs": "sosreport 文档",
+            "diagnostics.ssh": "SSH",
+            "diagnostics.unknown": "未知",
+            "diagnostics.useragent-data-error": "检索 userAgentData 时出错",
+            "diagnostics.where-to-find-help": "在哪里找到帮助",
             "docs": "文档",
             "language-dialog.browser-languages": "浏览器语言",
             "language-dialog.close": "关闭",

lang/de-DE.yaml

@@ -21,6 +21,21 @@ translations:
   logs.exit-code: Ausführungscode
   logs.completed: Abgeschlossen
   logs.clear-filter: Suchfilter löschen
+  diagnostics.get-support: Unterstützung erhalten
+  diagnostics.get-support-description: Wenn Sie Probleme mit OliveTin haben und eine Support-Anfrage stellen möchten, wäre es sehr hilfreich, einen sosreport von dieser Seite einzufügen.
+  diagnostics.where-to-find-help: Wo Sie Hilfe finden
+  diagnostics.ssh: SSH
+  diagnostics.found-key: Schlüssel gefunden
+  diagnostics.found-config: Konfiguration gefunden
+  diagnostics.sos-report: SOS-Bericht
+  diagnostics.sos-report-description: Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Konfiguration und Umgebung zu erstellen. Es ist eine gute Idee, dies bei einer Support-Anfrage einzufügen.
+  diagnostics.sos-report-docs: sosreport Dokumentation
+  diagnostics.generate-sos-report: SOS-Bericht erstellen
+  diagnostics.browser-info: Browser-Informationen
+  diagnostics.browser-info-description: Dieser Abschnitt ermöglicht es Ihnen, einen detaillierten Bericht über Ihre Browser-Informationen zu erstellen. Dies kann bei der Fehlerbehebung von browser-spezifischen Problemen hilfreich sein.
+  diagnostics.generate-browser-info: Browser-Informationen erstellen
+  diagnostics.unknown: Unbekannt
+  diagnostics.useragent-data-error: Fehler beim Abrufen von userAgentData
   return-to-index: Zurück zur Startseite
   search-filter: Filter aktuelle Seite
   language-dialog.title: Sprache auswählen

lang/en.yaml

@@ -21,6 +21,21 @@ translations:
   logs.exit-code: Exit code
   logs.completed: Completed
   logs.clear-filter: Clear search filter
+  diagnostics.get-support: Get support
+  diagnostics.get-support-description: If you are having problems with OliveTin and want to raise a support request, it would be very helpful to include a sosreport from this page.
+  diagnostics.where-to-find-help: Where to find help
+  diagnostics.ssh: SSH
+  diagnostics.found-key: Found Key
+  diagnostics.found-config: Found Config
+  diagnostics.sos-report: SOS Report
+  diagnostics.sos-report-description: This section allows you to generate a detailed report of your configuration and environment. It is a good idea to include this when raising a support request.
+  diagnostics.sos-report-docs: sosreport Documentation
+  diagnostics.generate-sos-report: Generate SOS Report
+  diagnostics.browser-info: Browser Info
+  diagnostics.browser-info-description: This section allows you to generate a detailed report of your browser information. This can be helpful when troubleshooting browser-specific issues.
+  diagnostics.generate-browser-info: Generate Browser Info
+  diagnostics.unknown: Unknown
+  diagnostics.useragent-data-error: Error retrieving userAgentData
   return-to-index: Return to index
   search-filter: Filter current page
   language-dialog.title: Select Language

lang/es-ES.yaml

@@ -21,6 +21,21 @@ translations:
   logs.exit-code: Código de salida
   logs.completed: Completado
   logs.clear-filter: Limpiar filtro de búsqueda
+  diagnostics.get-support: Obtener soporte
+  diagnostics.get-support-description: Si tiene problemas con OliveTin y desea presentar una solicitud de soporte, sería muy útil incluir un sosreport de esta página.
+  diagnostics.where-to-find-help: Dónde encontrar ayuda
+  diagnostics.ssh: SSH
+  diagnostics.found-key: Clave encontrada
+  diagnostics.found-config: Configuración encontrada
+  diagnostics.sos-report: Informe SOS
+  diagnostics.sos-report-description: Esta sección le permite generar un informe detallado de su configuración y entorno. Es una buena idea incluir esto al presentar una solicitud de soporte.
+  diagnostics.sos-report-docs: Documentación de sosreport
+  diagnostics.generate-sos-report: Generar informe SOS
+  diagnostics.browser-info: Información del navegador
+  diagnostics.browser-info-description: Esta sección le permite generar un informe detallado de su información del navegador. Esto puede ser útil al solucionar problemas específicos del navegador.
+  diagnostics.generate-browser-info: Generar información del navegador
+  diagnostics.unknown: Desconocido
+  diagnostics.useragent-data-error: Error al recuperar userAgentData
   return-to-index: Volver a la página principal
   search-filter: Filtrar página actual
   language-dialog.title: Seleccionar idioma

lang/it-IT.yaml

@@ -21,6 +21,21 @@ translations:
   logs.exit-code: Codice di uscita
   logs.completed: Completato
   logs.clear-filter: Cancella filtro di ricerca
+  diagnostics.get-support: Ottenere supporto
+  diagnostics.get-support-description: Se hai problemi con OliveTin e vuoi presentare una richiesta di supporto, sarebbe molto utile includere un sosreport da questa pagina.
+  diagnostics.where-to-find-help: Dove trovare aiuto
+  diagnostics.ssh: SSH
+  diagnostics.found-key: Chiave trovata
+  diagnostics.found-config: Configurazione trovata
+  diagnostics.sos-report: Rapporto SOS
+  diagnostics.sos-report-description: Questa sezione ti consente di generare un rapporto dettagliato della tua configurazione e ambiente. È una buona idea includere questo quando si presenta una richiesta di supporto.
+  diagnostics.sos-report-docs: Documentazione sosreport
+  diagnostics.generate-sos-report: Genera rapporto SOS
+  diagnostics.browser-info: Informazioni del browser
+  diagnostics.browser-info-description: Questa sezione ti consente di generare un rapporto dettagliato delle informazioni del tuo browser. Questo può essere utile durante la risoluzione dei problemi specifici del browser.
+  diagnostics.generate-browser-info: Genera informazioni del browser
+  diagnostics.unknown: Sconosciuto
+  diagnostics.useragent-data-error: Errore nel recupero di userAgentData
   return-to-index: Torna alla pagina principale
   search-filter: Filtra la pagina corrente
   language-dialog.title: Seleziona lingua

lang/zh-Hans-CN.yaml

@@ -26,4 +26,19 @@ translations:
   logs.blocked: 阻塞
   logs.exit-code: 退出代码
   logs.completed: 完成
-  logs.clear-filter: 清除搜索筛选器
+  logs.clear-filter: 清除搜索筛选器
+  diagnostics.get-support: 获取支持
+  diagnostics.get-support-description: 如果您在使用 OliveTin 时遇到问题并希望提交支持请求，从本页面包含 sosreport 将非常有帮助。
+  diagnostics.where-to-find-help: 在哪里找到帮助
+  diagnostics.ssh: SSH
+  diagnostics.found-key: 找到密钥
+  diagnostics.found-config: 找到配置
+  diagnostics.sos-report: SOS 报告
+  diagnostics.sos-report-description: 此部分允许您生成配置和环境的详细报告。在提交支持请求时包含此信息是个好主意。
+  diagnostics.sos-report-docs: sosreport 文档
+  diagnostics.generate-sos-report: 生成 SOS 报告
+  diagnostics.browser-info: 浏览器信息
+  diagnostics.browser-info-description: 此部分允许您生成浏览器信息的详细报告。这在排查浏览器特定问题时很有帮助。
+  diagnostics.generate-browser-info: 生成浏览器信息
+  diagnostics.unknown: 未知
+  diagnostics.useragent-data-error: 检索 userAgentData 时出错