fix: Add link to websocket disconnection

frontend/resources/vue/components/ConnectionBanner.vue

@@ -1,7 +1,9 @@
 <template>
     <span id="connection-banner" v-if="!connectionState.connected" class="inline-notification critical user-info-connection">
         <span class="connection-banner-sr-only" role="status">{{ staticAnnouncement }}</span>
-        <span aria-hidden="true">{{ bannerText }}</span>
+        <span aria-hidden="true">
+            <a :href="websocketDocsUrl" target="_blank" rel="noopener noreferrer" class="connection-banner-link">{{ linkText }}</a>{{ bannerSuffix }}
+        </span>
     </span>
 </template>
 
@@ -12,6 +14,10 @@ import { connectionState } from '../stores/connectionState.js'
 
 const { t } = useI18n()
 
+const websocketDocsUrl = 'https://docs.olivetin.app/troubleshooting/err-websocket-connection.html'
+
+const linkText = computed(() => t('disconnected-banner-link-text'))
+
 function formatShortRelative(ms) {
   if (ms < 0) return '0s'
   const secs = Math.floor(ms / 1000)
@@ -49,16 +55,16 @@ onUnmounted(() => {
 
 const staticAnnouncement = computed(() => t('disconnected-banner-announcement'))
 
-const bannerText = computed(() => {
+const bannerSuffix = computed(() => {
   const at = connectionState.disconnectedAt
   const next = connectionState.nextReconnectAt
   const n = now.value
   const disconnectedSince = formatShortTime(at)
   if (next != null && next > n) {
     const reconnectIn = formatShortRelative(next - n)
-    return t('disconnected-banner', { disconnectedSince, reconnectIn })
+    return t('disconnected-banner-suffix', { disconnectedSince, reconnectIn })
   }
-  return t('disconnected-banner-reconnecting', { disconnectedSince })
+  return t('disconnected-banner-suffix-reconnecting', { disconnectedSince })
 })
 </script>
 
@@ -70,6 +76,10 @@ const bannerText = computed(() => {
     border: 0;
     margin: 0;
 }
+.connection-banner-link {
+    color: inherit;
+    text-decoration: underline;
+}
 .connection-banner-sr-only {
     position: absolute;
     width: 1px;

lang/combined_output.json

@@ -21,9 +21,10 @@
             "diagnostics.useragent-data-error": "Fehler beim Abrufen von userAgentData",
             "diagnostics.where-to-find-help": "Wo Sie Hilfe finden",
             "disconnected": "Getrennt",
-            "disconnected-banner": "Events-Websocket getrennt seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}.",
             "disconnected-banner-announcement": "Events-Websocket getrennt.",
-            "disconnected-banner-reconnecting": "Events-Websocket getrennt seit {disconnectedSince}. Verbindungsversuch…",
+            "disconnected-banner-link-text": "Events-Websocket getrennt",
+            "disconnected-banner-suffix": " seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}.",
+            "disconnected-banner-suffix-reconnecting": " seit {disconnectedSince}. Verbindungsversuch…",
             "docs": "Dokumentation",
             "language-dialog.browser-languages": "Browser-Sprachen",
             "language-dialog.close": "Schließen",
@@ -79,9 +80,10 @@
             "diagnostics.useragent-data-error": "Error retrieving userAgentData",
             "diagnostics.where-to-find-help": "Where to find help",
             "disconnected": "Disconnected",
-            "disconnected-banner": "Events websocket disconnected since {disconnectedSince}. Trying reconnect in {reconnectIn}.",
             "disconnected-banner-announcement": "Events websocket disconnected.",
-            "disconnected-banner-reconnecting": "Events websocket disconnected since {disconnectedSince}. Trying reconnect…",
+            "disconnected-banner-link-text": "Events websocket disconnected",
+            "disconnected-banner-suffix": " since {disconnectedSince}. Trying reconnect in {reconnectIn}.",
+            "disconnected-banner-suffix-reconnecting": " since {disconnectedSince}. Trying reconnect…",
             "docs": "Documentation",
             "language-dialog.browser-languages": "Browser languages",
             "language-dialog.close": "Close",
@@ -137,9 +139,10 @@
             "diagnostics.useragent-data-error": "Error al recuperar userAgentData",
             "diagnostics.where-to-find-help": "Dónde encontrar ayuda",
             "disconnected": "Desconectado",
-            "disconnected-banner": "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión en {reconnectIn}.",
             "disconnected-banner-announcement": "Websocket de eventos desconectado.",
-            "disconnected-banner-reconnecting": "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión…",
+            "disconnected-banner-link-text": "Websocket de eventos desconectado",
+            "disconnected-banner-suffix": " desde {disconnectedSince}. Reintentando conexión en {reconnectIn}.",
+            "disconnected-banner-suffix-reconnecting": " desde {disconnectedSince}. Reintentando conexión…",
             "docs": "Documentación",
             "language-dialog.browser-languages": "Idiomas del navegador",
             "language-dialog.close": "Cerrar",
@@ -195,9 +198,10 @@
             "diagnostics.useragent-data-error": "Errore nel recupero di userAgentData",
             "diagnostics.where-to-find-help": "Dove trovare aiuto",
             "disconnected": "Disconnesso",
-            "disconnected-banner": "Websocket eventi disconnesso dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}.",
             "disconnected-banner-announcement": "Websocket eventi disconnesso.",
-            "disconnected-banner-reconnecting": "Websocket eventi disconnesso dalle {disconnectedSince}. Tentativo di connessione…",
+            "disconnected-banner-link-text": "Websocket eventi disconnesso",
+            "disconnected-banner-suffix": " dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}.",
+            "disconnected-banner-suffix-reconnecting": " dalle {disconnectedSince}. Tentativo di connessione…",
             "docs": "Documentazione",
             "language-dialog.browser-languages": "Lingue del browser",
             "language-dialog.close": "Chiudi",
@@ -253,9 +257,10 @@
             "diagnostics.useragent-data-error": "检索 userAgentData 时出错",
             "diagnostics.where-to-find-help": "在哪里找到帮助",
             "disconnected": "已断开连接",
-            "disconnected-banner": "事件 WebSocket 自 {disconnectedSince} 已断开。{reconnectIn} 后尝试重连。",
             "disconnected-banner-announcement": "事件 WebSocket 已断开。",
-            "disconnected-banner-reconnecting": "事件 WebSocket 自 {disconnectedSince} 已断开。正在尝试重连…",
+            "disconnected-banner-link-text": "事件 WebSocket 已断开",
+            "disconnected-banner-suffix": "自 {disconnectedSince}。{reconnectIn} 后尝试重连。",
+            "disconnected-banner-suffix-reconnecting": "自 {disconnectedSince}。正在尝试重连…",
             "docs": "文档",
             "language-dialog.browser-languages": "浏览器语言",
             "language-dialog.close": "关闭",

lang/de-DE.yaml

@@ -8,9 +8,10 @@ translations:
   connected: Verbunden
   disconnected: Getrennt
   reconnecting: Verbinde erneut…
-  disconnected-banner: "Events-Websocket getrennt seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}."
-  disconnected-banner-reconnecting: "Events-Websocket getrennt seit {disconnectedSince}. Verbindungsversuch…"
   disconnected-banner-announcement: Events-Websocket getrennt.
+  disconnected-banner-link-text: "Events-Websocket getrennt"
+  disconnected-banner-suffix: " seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}."
+  disconnected-banner-suffix-reconnecting: " seit {disconnectedSince}. Verbindungsversuch…"
   login-button: Login
   raise-issue: Ein Problem melden auf GitHub
   docs: Dokumentation

lang/en.yaml

@@ -10,9 +10,10 @@ translations:
   connected: Connected
   disconnected: Disconnected
   reconnecting: Reconnecting…
-  disconnected-banner: "Events websocket disconnected since {disconnectedSince}. Trying reconnect in {reconnectIn}."
-  disconnected-banner-reconnecting: "Events websocket disconnected since {disconnectedSince}. Trying reconnect…"
   disconnected-banner-announcement: Events websocket disconnected.
+  disconnected-banner-link-text: "Events websocket disconnected"
+  disconnected-banner-suffix: " since {disconnectedSince}. Trying reconnect in {reconnectIn}."
+  disconnected-banner-suffix-reconnecting: " since {disconnectedSince}. Trying reconnect…"
   login-button: Login
   logs.title: Logs
   logs.page-description: This is a list of logs from actions that have been executed. You can filter the list by action title.

lang/es-ES.yaml

@@ -8,9 +8,10 @@ translations:
   connected: Conectado
   disconnected: Desconectado
   reconnecting: Reconectando…
-  disconnected-banner: "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión en {reconnectIn}."
-  disconnected-banner-reconnecting: "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión…"
   disconnected-banner-announcement: Websocket de eventos desconectado.
+  disconnected-banner-link-text: "Websocket de eventos desconectado"
+  disconnected-banner-suffix: " desde {disconnectedSince}. Reintentando conexión en {reconnectIn}."
+  disconnected-banner-suffix-reconnecting: " desde {disconnectedSince}. Reintentando conexión…"
   login-button: Iniciar sesión
   raise-issue: Reportar un problema en GitHub
   docs: Documentación

lang/it-IT.yaml

@@ -9,9 +9,10 @@ translations:
   connected: Connesso
   disconnected: Disconnesso
   reconnecting: Riconnessione…
-  disconnected-banner: "Websocket eventi disconnesso dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}."
-  disconnected-banner-reconnecting: "Websocket eventi disconnesso dalle {disconnectedSince}. Tentativo di connessione…"
   disconnected-banner-announcement: Websocket eventi disconnesso.
+  disconnected-banner-link-text: "Websocket eventi disconnesso"
+  disconnected-banner-suffix: " dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}."
+  disconnected-banner-suffix-reconnecting: " dalle {disconnectedSince}. Tentativo di connessione…"
   login-button: Login
   raise-issue: Segnala un problema su GitHub
   logs.title: Registri

lang/zh-Hans-CN.yaml

@@ -8,9 +8,10 @@ translations:
   connected: 已连接
   disconnected: 已断开连接
   reconnecting: 正在重新连接…
-  disconnected-banner: "事件 WebSocket 自 {disconnectedSince} 已断开。{reconnectIn} 后尝试重连。"
-  disconnected-banner-reconnecting: "事件 WebSocket 自 {disconnectedSince} 已断开。正在尝试重连…"
   disconnected-banner-announcement: 事件 WebSocket 已断开。
+  disconnected-banner-link-text: "事件 WebSocket 已断开"
+  disconnected-banner-suffix: "自 {disconnectedSince}。{reconnectIn} 后尝试重连。"
+  disconnected-banner-suffix-reconnecting: "自 {disconnectedSince}。正在尝试重连…"
   login-button: 登录
   raise-issue: 在 GitHub 上报告问题
   docs: 文档