Files
HoneyOS/web/honeybar/demo.html
T
marcandClaude Opus 5 283f9a1850 feat: Backend mit OIDC-Anmeldung, Apps und Einstellungen im Server
Aus der statischen Seite wird ein Go-Binary mit eingebetteter Oberfläche.
Grund: Apps über .env zu pflegen wurde unübersichtlich, und kosmetische
Einstellungen sollen auf jedem Gerät gleich sein.

- Anmeldung über den eigenen OIDC-Anbieter (PocketID), mit PKCE. Ohne
  Anmeldung gibt es nichts zu sehen – auch keine App-Liste.
- Sitzung als signiertes Cookie ohne Gegenstück im Server; Schreibzugriffe
  zusätzlich über ein lesbares CSRF-Cookie abgesichert
- Apps werden in der Oberfläche angelegt und bearbeitet, nicht mehr in der
  .env. Der Server prüft jeden Eintrag und meldet zurück, was er behält.
- Einstellungen liegen je Nutzer im Server; localStorage ist nur noch der
  Vorschuss, damit die Röhre beim Laden nicht in der falschen Farbe blitzt
- die Leiste holt die App-Liste aus /api/apps – freigegeben sind allein die
  Ursprünge, die selbst als App eingetragen sind
- Tests fahren einen echten OIDC-Anbieter hoch und gehen den Anmeldeweg
  einmal ganz durch

Ohne HONEYOS_OIDC_ISSUER läuft alles offen – für die Entwicklung, mit
deutlicher Warnung beim Start.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-24 15:20:55 +02:00

42 lines
1.5 KiB
HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HoneyBar — Vorschau in einer fremden App</title>
<style>
/* Bewusst NICHT im HoneyOS-Stil: hier wird geprüft, dass die Leiste
eine ganz andere App nicht anfasst und von ihr nicht angefasst wird. */
body {
margin: 0;
background: #0d1117;
color: #e6edf3;
font: 15px/1.6 system-ui, sans-serif;
}
header.fake {
padding: 14px 20px;
background: #161b22;
border-bottom: 1px solid #30363d;
font-weight: 600;
}
main { padding: 24px 20px; max-width: 620px; }
code { background: #161b22; padding: 2px 5px; border-radius: 4px; font-size: 13px; }
/* So rechnet eine App mit Vollhöhe die Leiste heraus: */
.full { height: calc(100vh - var(--honeybar-h, 0px)); }
</style>
</head>
<body>
<header class="fake">Irgendeine App (dunkles Theme, eigene Schrift)</header>
<main>
<p>Die Leiste oben kommt aus <code>honeybar.js</code> und gehört nicht zu dieser Seite.</p>
<p>
Sie liegt in einem Shadow DOM: nichts von hier färbt auf sie ab, nichts von ihr auf
diese Seite. <code>data-app="inknote"</code> markiert, wo man gerade ist.
</p>
<p>Eine App, die mit <code>100vh</code> rechnet, nimmt <code>--honeybar-h</code> ab.</p>
</main>
<script src="./honeybar.js" data-app="inknote" data-home="/"></script>
</body>
</html>