From 40f945ccb510d06e5f7e4648494172358bddaa22 Mon Sep 17 00:00:00 2001 From: Kato Date: Wed, 2 Sep 2026 14:19:25 +0000 Subject: [PATCH] =?UTF-8?q?Telegram-based=20login:=20step=201=20username?= =?UTF-8?q?=20=E2=86=92=20step=202=20code=20=E2=86=92=20admin=20form=20(na?= =?UTF-8?q?me=20+=20LLC)=20via=20webhook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 210 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 197 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 42fd7bc..ee8a074 100644 --- a/index.html +++ b/index.html @@ -192,6 +192,29 @@ margin-top: 12px; } .btn-outline:hover { background: var(--black); color: var(--white); } + .btn-secondary { + width: 100%; + padding: 10px; + background: var(--gray1); + border: 1px solid var(--gray2); + border-radius: 8px; + font-size: .9rem; + font-weight: 600; + cursor: pointer; + margin-top: 12px; + } + .btn-secondary:hover { background: #e5e7eb; } + + .hidden { display: none; } + .success-msg { + padding: 12px; + background: #d1fae5; + border: 1px solid #34d399; + border-radius: 8px; + color: #065f46; + margin-bottom: 16px; + text-align: center; + } /* Footer */ .footer { @@ -286,22 +309,64 @@

Login / Registrierung

Login / Registration

-
-
- - - + +
+
+ + + +
+ + +

+ Wir senden einen Code an Ihren Telegram-Account. +

+

+ We'll send a code to your Telegram account. +

-
- - - + + + + + + - - - - + + +
@@ -325,6 +390,125 @@ btn.classList.add('active'); }); }); + + const API_URL = 'https://n8n.odoo4projects.com/webhook-test/paraguay/login'; + + // Schritt 1: Telegram Nutzer senden + async function sendTelegramUser() { + const user = document.getElementById('telegram-user').value.trim(); + if (!user) { + alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); + return; + } + + document.querySelector('.btn-primary[type="button"]').disabled = true; + document.querySelector('.btn-primary[type="button"]').textContent = 'Verifizierung läuft...'; + + try { + const response = await fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: user }) + }); + + if (response.ok) { + document.getElementById('login-step-1').classList.add('hidden'); + document.getElementById('login-step-2').classList.remove('hidden'); + alert('Code wurde an Ihren Telegram-Account gesendet.'); + } else { + alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.'); + document.querySelector('.btn-primary[type="button"]').disabled = false; + document.querySelector('.btn-primary[type="button"]').textContent = document.body.dataset.lang === 'de' ? 'Nutzer verifizieren' : 'Verify user'; + } + } catch (error) { + console.error(error); + alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.'); + document.querySelector('.btn-primary[type="button"]').disabled = false; + document.querySelector('.btn-primary[type="button"]').textContent = document.body.dataset.lang === 'de' ? 'Nutzer verifizieren' : 'Verify user'; + } + } + + // Schritt 2: Code verifizieren + async function verifyCode() { + const code = document.getElementById('verification-code').value.trim(); + if (!code) { + alert('Bitte geben Sie den Verifizierungscode ein.'); + return; + } + + document.querySelectorAll('#login-step-2 .btn-primary').forEach(b => b.disabled = true); + + try { + const response = await fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: document.getElementById('telegram-user').value, code: code }) + }); + + if (response.ok) { + document.getElementById('login-step-2').classList.add('hidden'); + document.getElementById('login-admin-form').classList.remove('hidden'); + } else { + alert('Ungültiger Code. Bitte versuchen Sie es erneut.'); + document.querySelectorAll('#login-step-2 .btn-primary').forEach(b => b.disabled = false); + } + } catch (error) { + console.error(error); + alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.'); + document.querySelectorAll('#login-step-2 .btn-primary').forEach(b => b.disabled = false); + } + } + + // Admin-Formular anzeigen + function toggleAdminForm() { + const form = document.getElementById('login-form'); + if (form.style.maxHeight) { + form.style.maxHeight = ''; + } else { + form.style.maxHeight = form.scrollHeight + 'px'; + } + } + + // Admin-Daten senden (Name + LLC) + async function submitAdminData() { + const name = document.getElementById('full-name').value.trim(); + const llc = document.getElementById('llc-name').value.trim(); + + if (!name || !llc) { + alert('Bitte geben Sie Name und LLC-Namen ein.'); + return; + } + + document.querySelectorAll('#login-admin-form .btn-primary').forEach(b => b.disabled = true); + + try { + const response = await fetch(API_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + username: document.getElementById('telegram-user').value, + name: name, + llc: llc + }) + }); + + if (response.ok) { + document.getElementById('login-admin-form').classList.add('hidden'); + document.getElementById('success-message').classList.remove('hidden'); + // Optional: Redirect nach kurzer Verzögerung + setTimeout(() => { + window.location.href = 'https://paraguay.odoo4projects.com'; + }, 1500); + } else { + alert('Fehler bei der Registrierung.'); + document.querySelectorAll('#login-admin-form .btn-primary').forEach(b => b.disabled = false); + } + } catch (error) { + console.error(error); + alert('Fehler bei der Verbindung.'); + document.querySelectorAll('#login-admin-form .btn-primary').forEach(b => b.disabled = false); + } + } \ No newline at end of file