From 4a17b520b64244a9c908df675ed8703f08a6b500 Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Sat, 22 Aug 2026 23:49:00 +0200
Subject: [PATCH] fix: Kurzbefehl-Anleitung dauerhaft sichtbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Anleitung – und damit die Konto-Nummern fuer account_id – erschien nur
direkt nach dem Anlegen einer Marke. Wer sie ausblendete oder die Seite neu
lud, kam nie wieder daran und stand vor dem Kurzbefehl ohne die Nummer, die
er eintragen sollte.

Einmalig ist nur der Klartext der Marke; die Anleitung steht jetzt immer da,
mit Platzhalter statt Klartext.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/pages/settings/Geraetemarken.jsx | 124 ++++++++++++-----------
 1 file changed, 65 insertions(+), 59 deletions(-)

diff --git a/web/src/pages/settings/Geraetemarken.jsx b/web/src/pages/settings/Geraetemarken.jsx
index 5fb61b6..e95db49 100644
--- a/web/src/pages/settings/Geraetemarken.jsx
+++ b/web/src/pages/settings/Geraetemarken.jsx
@@ -30,6 +30,9 @@ export default function Geraetemarken() {
   const [busy, setBusy] = useState(false);
 
   const basis = useMemo(() => window.location.origin, []);
+  // In der Anleitung steht der Klartext nur, solange die Marke frisch ist –
+  // danach ein Platzhalter, denn wir haben ihn selbst nicht mehr.
+  const markeText = frisch ? frisch.token : "<deine Marke>";
 
   async function laden() {
     try {
@@ -124,65 +127,6 @@ export default function Geraetemarken() {
               <Icon name="copy" size={14} /> {t("tokens.copy")}
             </button>
           </div>
-          <details style={{ marginTop: "var(--sp-3)" }} open>
-            <summary>{t("tokens.guideTitle")}</summary>
-            <p className="muted small">{t("tokens.guideNoDownload")}</p>
-            <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
-              <li>{t("tokens.step1")}</li>
-              <li>{t("tokens.step2")}</li>
-              <li>{t("tokens.step3")}</li>
-              <li>
-                {t("tokens.step4")}
-                <div className="input-with-button" style={{ marginTop: 4 }}>
-                  <input readOnly className="selectable" value={`${basis}/api/quick/booking`} />
-                  <button type="button" className="btn sm"
-                          onClick={() => kopieren(`${basis}/api/quick/booking`)}>
-                    <Icon name="copy" size={14} />
-                  </button>
-                </div>
-                <div className="input-with-button" style={{ marginTop: 4 }}>
-                  <input readOnly className="selectable"
-                         value={`X-Certain-Token: ${frisch.token}`} />
-                  <button type="button" className="btn sm"
-                          onClick={() => kopieren(`X-Certain-Token: ${frisch.token}`)}>
-                    <Icon name="copy" size={14} />
-                  </button>
-                </div>
-              </li>
-              <li>{t("tokens.step5")}</li>
-            </ol>
-            <p className="muted small">{t("tokens.guideHomeScreen")}</p>
-            <p className="muted small">{t("tokens.guideAutomation")}</p>
-          </details>
-
-          <details style={{ marginTop: "var(--sp-3)" }}>
-            <summary>{t("tokens.fileGuideTitle")}</summary>
-            <p className="muted small">{t("tokens.fileGuideIntro")}</p>
-            <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
-              <li>{t("tokens.fileStep1")}</li>
-              <li>{t("tokens.fileStep2")}</li>
-              <li>
-                {t("tokens.fileStep3")}
-                <div className="input-with-button" style={{ marginTop: 4 }}>
-                  <input readOnly className="selectable" value={`${basis}/api/quick/statement`} />
-                  <button type="button" className="btn sm"
-                          onClick={() => kopieren(`${basis}/api/quick/statement`)}>
-                    <Icon name="copy" size={14} />
-                  </button>
-                </div>
-              </li>
-              <li>{t("tokens.fileStep4")}</li>
-            </ol>
-            <p className="muted small" style={{ marginBottom: 4 }}>
-              <strong>{t("tokens.accountIds")}</strong>
-            </p>
-            <ul className="muted small selectable" style={{ paddingLeft: "1.2em", margin: 0 }}>
-              {konten.map((k) => (
-                <li key={k.id}>{k.name}: <strong>{k.id}</strong></li>
-              ))}
-            </ul>
-            <p className="muted small">{t("tokens.fileGuideNote")}</p>
-          </details>
           <button className="btn sm ghost" style={{ marginTop: "var(--sp-2)" }}
                   onClick={() => setFrisch(null)}>
             {t("tokens.hide")}
@@ -190,6 +134,68 @@ export default function Geraetemarken() {
         </div>
       )}
 
+      <div style={{ marginTop: "var(--sp-4)" }}>
+        <details>
+          <summary>{t("tokens.guideTitle")}</summary>
+          <p className="muted small">{t("tokens.guideNoDownload")}</p>
+          <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
+            <li>{t("tokens.step1")}</li>
+            <li>{t("tokens.step2")}</li>
+            <li>{t("tokens.step3")}</li>
+            <li>
+              {t("tokens.step4")}
+              <div className="input-with-button" style={{ marginTop: 4 }}>
+                <input readOnly className="selectable" value={`${basis}/api/quick/booking`} />
+                <button type="button" className="btn sm"
+                      onClick={() => kopieren(`${basis}/api/quick/booking`)}>
+                <Icon name="copy" size={14} />
+                </button>
+              </div>
+              <div className="input-with-button" style={{ marginTop: 4 }}>
+                <input readOnly className="selectable"
+                     value={`X-Certain-Token: ${markeText}`} />
+                <button type="button" className="btn sm"
+                      onClick={() => kopieren(`X-Certain-Token: ${markeText}`)}>
+                <Icon name="copy" size={14} />
+                </button>
+              </div>
+            </li>
+            <li>{t("tokens.step5")}</li>
+          </ol>
+          <p className="muted small">{t("tokens.guideHomeScreen")}</p>
+          <p className="muted small">{t("tokens.guideAutomation")}</p>
+        </details>
+
+        <details style={{ marginTop: "var(--sp-3)" }}>
+          <summary>{t("tokens.fileGuideTitle")}</summary>
+          <p className="muted small">{t("tokens.fileGuideIntro")}</p>
+          <ol className="muted small" style={{ paddingLeft: "1.2em" }}>
+            <li>{t("tokens.fileStep1")}</li>
+            <li>{t("tokens.fileStep2")}</li>
+            <li>
+              {t("tokens.fileStep3")}
+              <div className="input-with-button" style={{ marginTop: 4 }}>
+                <input readOnly className="selectable" value={`${basis}/api/quick/statement`} />
+                <button type="button" className="btn sm"
+                      onClick={() => kopieren(`${basis}/api/quick/statement`)}>
+                <Icon name="copy" size={14} />
+                </button>
+              </div>
+            </li>
+            <li>{t("tokens.fileStep4")}</li>
+          </ol>
+          <p className="muted small" style={{ marginBottom: 4 }}>
+            <strong>{t("tokens.accountIds")}</strong>
+          </p>
+          <ul className="muted small selectable" style={{ paddingLeft: "1.2em", margin: 0 }}>
+            {konten.map((k) => (
+              <li key={k.id}>{k.name}: <strong>{k.id}</strong></li>
+            ))}
+          </ul>
+          <p className="muted small">{t("tokens.fileGuideNote")}</p>
+        </details>
+      </div>
+
       {marken.length > 0 && (
         <div className="account-list" style={{ marginTop: "var(--sp-3)" }}>
           {marken.map((m) => (