From df9a5dd2f0210650291f8bc3640c0e953672d6c1 Mon Sep 17 00:00:00 2001 From: Remi <73385395+itsrubberduck@users.noreply.github.com> Date: Wed, 24 Sep 2025 00:23:22 +0200 Subject: [PATCH] Simplify bridge onboarding pages --- app/pages/bridge/connect.vue | 523 +++++++++++++++++++---------------- app/pages/bridge/index.vue | 197 +++++++++---- 2 files changed, 414 insertions(+), 306 deletions(-) diff --git a/app/pages/bridge/connect.vue b/app/pages/bridge/connect.vue index e758561..81548fc 100644 --- a/app/pages/bridge/connect.vue +++ b/app/pages/bridge/connect.vue @@ -3,251 +3,283 @@
-
-
-
-

OpenSquawk Bridge

-

Bridge mit deinem Account verknüpfen

-

- Dieser Bildschirm verbindet den lokal erzeugten Bridge-Token mit deinem OpenSquawk Account. Nach erfolgreicher - Verknüpfung kannst du in die Bridge App zurückkehren – die Anwendung erkennt dich dann automatisch. -

-
- -
- - - Zur Bridge Übersicht - -
- -
+
+ -

Token fehlt

-

- Bitte öffne diesen Bildschirm direkt über die Bridge App. Nur so kann der Token automatisch übergeben werden. -

-

Bridge-Link neu starten

-
+ + Back to opensquawk.de + + + Bridge landing + +
-
-
-
-
-

Schritt 1 · Anmelden

- Login +
+

OpenSquawk Bridge

+

Connect your Bridge token

+

+ Sign in, confirm the token from the desktop Bridge app, and then jump straight back into the simulator. +

+
+ +
+

Token missing

+

Open this page from the Bridge app so the token can be passed through automatically.

+

Waiting for desktop link

+
+ +
+
+
+
+
+ + + + + + + +

Step 1 · Sign in

-

- Melde dich mit deinen OpenSquawk Zugangsdaten an. Ohne Anmeldung kann der Token nicht verknüpft werden. + Login +

+

Use your OpenSquawk credentials to unlock the token linking step.

+ +
+

Signed in

+

+ You are currently logged in as + {{ authDisplayName }}.

+
+ +
+
+ + +
+
+
+ + + Forgot? + +
+ +
+ + + +

{{ loginError }}

+
+
+ +
+
+
+ + + + + + + + +

Step 2 · Link the token

+
+ Active +
+

Confirm the token that the desktop Bridge generated for you.

+ +
+ {{ token }} + +
+ +
+ + +

Sign in first to enable the link button.

+

{{ connectError }}

-

Bereits angemeldet

-

- Du bist aktuell als - {{ authDisplayName }} - angemeldet. -

+

Linked successfully!

+

You can close this tab and return to the Bridge app.

- -
-
- - -
-
-
- - - Passwort vergessen? - -
- -
- - - -

{{ loginError }}

-
-
- -
-
-

Schritt 2 · Bridge verknüpfen

- - Token aktiv - -
-

- Der unten stehende Token stammt direkt aus deiner Bridge App. Verknüpfe ihn mit einem Klick mit deinem Account. -

- -
- - {{ token }} - - -
- -
- - -

- Bitte melde dich zuerst an, um die Verknüpfung durchführen zu können. -

-

{{ connectError }}

- -
-

Verbindung hergestellt!

-

- Du kannst dieses Fenster jetzt schließen und zur Bridge App zurückkehren. Statusupdates werden automatisch - synchronisiert. -

-
-
-
-
- - +
+
+ +
@@ -273,7 +305,7 @@ interface BridgeStatusPayload { lastStatusAt: string | null } -useHead({ title: 'Bridge verbinden · OpenSquawk' }) +useHead({ title: 'Link Bridge · OpenSquawk' }) const route = useRoute() const auth = useAuthStore() @@ -312,10 +344,10 @@ const authDisplayName = computed(() => { const connectionLabel = computed(() => { if (!connectionStatus.value?.connected) { - return 'Wartet auf Verbindung' + return 'Waiting for the desktop app' } const name = connectionStatus.value.user?.name || connectionStatus.value.user?.email - return name ? `Verbunden als ${name}` : 'Verbunden' + return name ? `Linked as ${name}` : 'Linked' }) const connectionSubLabel = computed(() => { @@ -338,7 +370,7 @@ function formatTimestamp(value: string | null) { if (Number.isNaN(parsed.getTime())) { return '—' } - return new Intl.DateTimeFormat('de-DE', { + return new Intl.DateTimeFormat('en-GB', { dateStyle: 'short', timeStyle: 'medium', }).format(parsed) @@ -348,7 +380,7 @@ async function submitLogin() { loginError.value = '' connectError.value = '' if (!loginForm.email || !loginForm.password) { - loginError.value = 'Bitte E-Mail und Passwort eingeben.' + loginError.value = 'Please enter your email and password.' return } @@ -362,7 +394,7 @@ async function submitLogin() { err?.data?.statusMessage || err?.response?._data?.statusMessage || err?.message || - 'Login fehlgeschlagen.' + 'Login failed.' } finally { loginLoading.value = false } @@ -390,7 +422,7 @@ async function connectBridge() { err?.data?.statusMessage || err?.response?._data?.statusMessage || err?.message || - 'Verknüpfung fehlgeschlagen.' + 'Could not link the token.' } finally { connectLoading.value = false } @@ -424,7 +456,7 @@ async function fetchStatus(force = false) { err?.data?.statusMessage || err?.response?._data?.statusMessage || err?.message || - 'Status konnte nicht geladen werden.' + 'We could not refresh the status.' } finally { statusRequestActive.value = false statusLoading.value = false @@ -441,7 +473,7 @@ async function copyToken() { copiedToken.value = false }, 2000) } catch { - // Ignorieren – Kopie ist optional + // Ignore copy errors – clipboard access is optional } } @@ -500,4 +532,3 @@ code { word-break: break-all; } - diff --git a/app/pages/bridge/index.vue b/app/pages/bridge/index.vue index ff254bb..348e35d 100644 --- a/app/pages/bridge/index.vue +++ b/app/pages/bridge/index.vue @@ -3,23 +3,36 @@
-
-
-

OpenSquawk Bridge

-

Deine Verbindung zwischen Simulator und OpenSquawk

-

- Die OpenSquawk Bridge streamt Ereignisse aus deinem Simulator direkt zu unserem Netzwerk. Installiere die passende - Version für deine Plattform, starte die App und verknüpfe sie in wenigen Klicks mit deinem Account. +

+
+ + + Back to opensquawk.de + + + Already have a token? + +
+ +
+ Bridge +

Download the OpenSquawk Bridge

+

+ Pick the build for your simulator and let the desktop Bridge handle the rest. Tokens, login, and live status are all baked in.

-
+
-

Download-Zentrale

-

- Wähle die Version deiner Bridge. Neue Simulatoren werden automatisch nachgereicht, sobald Builds verfügbar sind. -

+

Downloads

+

Short and sweet. Click, install, fly.

-
- - {{ item.badge }} +
+ + + + + + + + + + + + + + + -

{{ item.title }}

-

{{ item.description }}

+ +
+ + {{ item.badge }} + +

{{ item.title }}

+

{{ item.description }}

+
@@ -47,7 +103,7 @@ class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[#16BBD7] px-4 py-3 text-sm font-semibold text-[#0B1020] transition hover:bg-[#13a7c4] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#72d9ea]" > - Download starten + Download
@@ -126,32 +183,53 @@ @@ -161,4 +239,3 @@ code { font-family: 'JetBrains Mono', 'Fira Code', monospace; } -