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

@ -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');