frontend/tokens: add hint that devices need to run the latest firmware.

This hopefully makes users check their firmware version before calling for help.

Author: ffreddow

frontend/src/locales/de.ts

@@ -138,6 +138,7 @@ export const de ={
         "copy": "Kopieren",
         "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"
+        "multi_use_description": "Dieses Token kann mehrfach verwendet werden, bis es manuell gelöscht wird",
+        "layout_changed": "Das Layout des Tokens wurde geändert. Bitte stelle sicher, dass dein Gerät auf dem neuesten Stand ist."
     }
 };

frontend/src/locales/en.ts

@@ -141,6 +141,7 @@ export const en = {
         copy: "Copy",
         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"
+        multi_use_description: "This token can be used multiple times until manually deleted",
+        layout_changed: "The layout of the token has changed. Please ensure that your device runs the latest firmware."
     }
 };

frontend/src/pages/tokens.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
-import { Button, Card, Container, Form, Spinner, InputGroup } from 'react-bootstrap';
+import { Button, Card, Container, Form, Spinner, InputGroup, Alert } from 'react-bootstrap';
 import { fetchClient, get_decrypted_secret, pub_key } from '../utils';
 import { showAlert } from '../components/Alert';
 import { Base64 } from 'js-base64';
@@ -176,6 +176,9 @@ export function Tokens() {
 
     return (
         <Container>
+            <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>