frontend: Move the firmware version hint of the authorization tokens into the token card itself

fix #229

Author: ffreddow

frontend/src/locales/branding/seb_de.ts

@@ -1 +1,2 @@
 export const description = "Diese Seite bietet einen Fernzugriff den Smart Energy Broker. Weitere Informationen findest du <0>hier</0>";
+export const firmware_needed = "Für die Verwendung dieses Tokens ist mindestens Firmware-Version 1.2.6 erforderlich.";

frontend/src/locales/branding/seb_en.ts

@@ -1 +1,2 @@
 export const description = "This page provides remote access for your Smart Energy Broker. You can find more information <0>here</0>";
+export const firmware_needed = "At least firmware version 1.2.6 is required to use this token.";

frontend/src/locales/branding/warp_de.ts

@@ -1 +1,2 @@
 export const description = "Diese Seite bietet einen Fernzugriff für Tinkerforge WARP-Geräte. Weitere Informationen findest du <0>hier</0>";
+export const firmware_needed = "Für die Verwendung dieses Tokens ist mindestens Firmware-Version 2.1.7 oder 1.2.6 (WEM2) erforderlich.";

frontend/src/locales/branding/warp_en.ts

@@ -1 +1,2 @@
 export const description = "This page provides remote access for Tinkerforge WARP devices. You can find more information <0>here</0>";
+export const firmware_needed = "At least firmware version 2.1.7 or 1.2.6 (WEM2) is required to use this token.";

frontend/src/locales/de.ts

@@ -1,4 +1,4 @@
-import { description } from "translations-de";
+import { description, firmware_needed } from "translations-de";
 
 export const de ={
     "app_name": "Fernzugriff",
@@ -195,7 +195,7 @@ export const de ={
         "delete": "Löschen",
         "single_use_description": "Dieses Token kann nur einmal verwendet werden und läuft nach der ersten Verwendung automatisch ab",
         "multi_use_description": "Dieses Token kann mehrfach verwendet werden, bis es manuell gelöscht wird",
-        "layout_changed": "Das Format des Tokens wurde geändert. Bitte stelle sicher, dass dein Gerät auf dem neuesten Stand ist."
+        firmware_needed
     },
     "wg_client": {
         "not_initialized": "Der WireGuard-Client ist nicht initialisiert. Bitte lade die Seite neu."

frontend/src/locales/en.ts

@@ -1,4 +1,4 @@
-import { description } from "translations-en";
+import { description, firmware_needed } from "translations-en";
 
 export const en = {
     "app_name": "Remote Access",
@@ -195,7 +195,7 @@ export const en = {
         "delete": "Delete",
         "single_use_description": "This token can only be used once and will automatically expire after first use",
         "multi_use_description": "This token can be used multiple times until manually deleted",
-        "layout_changed": "The format of the token has changed. Please ensure that your device runs the latest firmware."
+        firmware_needed
     },
     "wg_client": {
         "not_initialized": "The WireGuard client is not initialized. Please reload the page."

frontend/src/pages/Tokens.tsx

@@ -200,9 +200,6 @@ export function Tokens() {
                 <h5 className="mb-1">{t("tokens.info_heading")}</h5>
                 <p className="mb-0">{t("tokens.info_body")}</p>
             </Alert>
-            <Alert variant="danger" className="mt-3">
-                {t("tokens.layout_changed")}
-            </Alert>
             <Card className="my-4">
                 <Card.Header className="pb-2">
                     <h5 className="mb-0">{t("tokens.create_token")}</h5>
@@ -284,6 +281,9 @@ export function Tokens() {
                                         style={isUsed ? { fontFamily: 'monospace' } : {}}
                                     />
                                 </InputGroup>
+                                <Alert variant="info" className="mb-2 py-2">
+                                    <small>{t("tokens.firmware_needed")}</small>
+                                </Alert>
                                 <div className="d-flex flex-wrap gap-2">
                                     <Button
                                         variant="secondary"

frontend/src/types/translations.d.ts

@@ -1,7 +1,9 @@
 declare module "translations-de" {
     export const description: string;
+    export const firmware_needed: string;
 }
 
 declare module "translations-en" {
     export const description: string;
+    export const firmware_needed: string;
 }