OSM-Verknüpfung: In-App-Hilfe „Konto erstellen" (umgebungsabhängig)

- /osm-auth/status liefert signup_url + sandbox-Flag (Sandbox-URL auf Staging,
  echte OSM in Prod).
- Settings-OSM-Karte: ausklappbare Hilfe "Noch kein OSM-Konto? Was ist das?"
  mit Erklärung, 3-Schritt-Anleitung, Sandbox-Testphasen-Hinweis und
  "Kostenloses OSM-Konto erstellen"-Link zur richtigen Instanz.
This commit is contained in:
rene 2026-06-03 22:04:42 +02:00
parent b4cafc0363
commit 684ffa3b46
7 changed files with 45 additions and 21 deletions

View file

@ -1 +1 @@
1158
1159

View file

@ -157,10 +157,16 @@ async def status(user=Depends(get_current_user)):
"SELECT osm_name, osm_uid, linked_at FROM user_osm WHERE user_id=?",
(user["id"],)
).fetchone()
if not row:
return {"linked": False}
return {"linked": True, "osm_name": row["osm_name"],
"osm_uid": row["osm_uid"], "linked_at": row["linked_at"]}
# Registrierungs-URL umgebungsabhängig: Sandbox auf Staging, echte OSM in Prod.
base = {
"linked": bool(row),
"signup_url": OSM_OAUTH_BASE + "/user/new",
"sandbox": "dev.openstreetmap" in OSM_OAUTH_BASE,
"configured": bool(CLIENT_ID),
}
if row:
base.update(osm_name=row["osm_name"], osm_uid=row["osm_uid"], linked_at=row["linked_at"])
return base
# ------------------------------------------------------------------

View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1158"></script>
<script src="/js/boot-early.js?v=1159"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1158">
<link rel="stylesheet" href="/css/layout.css?v=1158">
<link rel="stylesheet" href="/css/components.css?v=1158">
<link rel="stylesheet" href="/css/utilities.css?v=1158">
<link rel="stylesheet" href="/css/lists.css?v=1158">
<link rel="stylesheet" href="/css/design-system.css?v=1159">
<link rel="stylesheet" href="/css/layout.css?v=1159">
<link rel="stylesheet" href="/css/components.css?v=1159">
<link rel="stylesheet" href="/css/utilities.css?v=1159">
<link rel="stylesheet" href="/css/lists.css?v=1159">
</head>
<body>
@ -617,11 +617,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1158"></script>
<script src="/js/ui.js?v=1158"></script>
<script src="/js/app.js?v=1158"></script>
<script src="/js/worlds.js?v=1158"></script>
<script src="/js/offline-indicator.js?v=1158"></script>
<script src="/js/api.js?v=1159"></script>
<script src="/js/ui.js?v=1159"></script>
<script src="/js/app.js?v=1159"></script>
<script src="/js/worlds.js?v=1159"></script>
<script src="/js/offline-indicator.js?v=1159"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -631,7 +631,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1158"></script>
<script src="/js/boot.js?v=1159"></script>
</body>

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1158'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1159'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION;

View file

@ -977,7 +977,25 @@ window.Page_settings = (() => {
font-size:var(--text-sm);font-weight:600;cursor:pointer">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
OSM-Konto verknüpfen
</button>`;
</button>
<details style="margin-top:10px">
<summary style="cursor:pointer;font-size:12px;color:var(--c-primary)">Noch kein OSM-Konto? Was ist das?</summary>
<div class="text-sm-muted" style="margin-top:8px;font-size:12px;line-height:1.5">
<p style="margin:0 0 6px">OpenStreetMap ist die freie Weltkarte von Menschen gemacht, gehört allen, keine Werbung, kein Datenverkauf. Mit einem kostenlosen Konto trägst du hundefreundliche Orte ein, die jeder Hundehalter sieht.</p>
<p style="margin:0 0 4px"><strong>So geht's:</strong></p>
<ol style="margin:0 0 8px 16px;padding:0">
<li>Konto erstellen (Benutzername + E-Mail kein Klarname nötig)</li>
<li>Bestätigungs-E-Mail anklicken</li>
<li>Hier zurück OSM-Konto verknüpfen"</li>
</ol>
${st.sandbox ? `<p style="margin:0 0 8px;padding:6px 8px;background:rgba(245,158,11,.12);border-radius:6px">⚠️ <strong>Testphase:</strong> Dies ist eine Test-Karte. Deine Einträge verändern die echte OpenStreetMap noch nicht.</p>` : ''}
<a href="${st.signup_url || 'https://www.openstreetmap.org/user/new'}" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:6px;color:var(--c-primary);font-weight:600;text-decoration:none">
Kostenloses OSM-Konto erstellen
<svg class="ph-icon" aria-hidden="true" style="width:13px;height:13px"><use href="/icons/phosphor.svg#arrow-square-out"></use></svg>
</a>
</div>
</details>`;
el.querySelector('#settings-osm-link').addEventListener('click', async () => {
try {
const r = await API.get('/osm-auth/authorize');

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<script src="/js/landing-init.js?v=1158"></script>
<script src="/js/landing-init.js?v=1159"></script>
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">

View file

@ -4,7 +4,7 @@
============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1158';
const VER = '1159';
const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten