Telegram-based login: step 1 username → step 2 code → admin form (name + LLC) via webhook
This commit is contained in:
Kato
+195
-11
@@ -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 @@
|
||||
<div class="login-panel">
|
||||
<h3 class="hide-de">Login / Registrierung</h3>
|
||||
<h3 class="hide-en">Login / Registration</h3>
|
||||
<form>
|
||||
<form id="login-form">
|
||||
<div id="login-step-1">
|
||||
<div class="form-group">
|
||||
<label for="email" class="hide-de">E-Mail</label>
|
||||
<label for="email" class="hide-en">Email</label>
|
||||
<input type="email" id="email" required placeholder="name@example.com" />
|
||||
<label for="telegram-user" class="hide-de">Telegram Nutzername</label>
|
||||
<label for="telegram-user" class="hide-en">Telegram Username</label>
|
||||
<input type="text" id="telegram-user" required placeholder="@username" />
|
||||
</div>
|
||||
<button type="button" class="btn-primary hide-de" onclick="sendTelegramUser()">Nutzer verifizieren</button>
|
||||
<button type="button" class="btn-primary hide-en" onclick="sendTelegramUser()">Verify user</button>
|
||||
<p class="hide-de" style="font-size: .85rem; color: #6b7280; margin-top: 12px;">
|
||||
Wir senden einen Code an Ihren Telegram-Account.
|
||||
</p>
|
||||
<p class="hide-en" style="font-size: .85rem; color: #6b7280; margin-top: 12px;">
|
||||
We'll send a code to your Telegram account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="login-step-2" class="hidden">
|
||||
<div class="form-group">
|
||||
<label for="verification-code" class="hide-de">Verifizierungscode</label>
|
||||
<label for="verification-code" class="hide-en">Verification code</label>
|
||||
<input type="text" id="verification-code" required placeholder="123456" />
|
||||
</div>
|
||||
<button type="button" class="btn-primary hide-de" onclick="verifyCode()">Code verifizieren</button>
|
||||
<button type="button" class="btn-primary hide-en" onclick="verifyCode()">Verify code</button>
|
||||
</div>
|
||||
|
||||
<div id="login-admin-form" class="hidden">
|
||||
<div class="form-group">
|
||||
<label for="full-name" class="hide-de">Vollständiger Name</label>
|
||||
<label for="full-name" class="hide-en">Full name</label>
|
||||
<input type="text" id="full-name" required placeholder="Max Mustermann" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password" class="hide-de">Passwort</label>
|
||||
<label for="password" class="hide-en">Password</label>
|
||||
<input type="password" id="password" required placeholder="••••••••" />
|
||||
<label for="llc-name" class="hide-de">Name der LLC / SRL</label>
|
||||
<label for="llc-name" class="hide-en">LLC / SRL name</label>
|
||||
<input type="text" id="llc-name" required placeholder="Paraguay LLC" />
|
||||
</div>
|
||||
<button type="button" class="btn-primary hide-de" onclick="submitAdminData()">Registrieren</button>
|
||||
<button type="button" class="btn-primary hide-en" onclick="submitAdminData()">Register</button>
|
||||
</div>
|
||||
|
||||
<div id="success-message" class="hidden">
|
||||
<div class="success-msg hide-de">
|
||||
Erfolgreich angemeldet! Sie werden weitergeleitet.
|
||||
</div>
|
||||
<div class="success-msg hide-en">
|
||||
Successfully logged in! You will be redirected.
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary hide-de">Anmelden</button>
|
||||
<button type="submit" class="btn-primary hide-en">Login</button>
|
||||
<button type="button" class="btn-outline hide-de">Noch nicht registriert? Registrieren</button>
|
||||
<button type="button" class="btn-outline hide-en">Not registered yet? Register</button>
|
||||
</form>
|
||||
|
||||
<button type="button" class="btn-secondary hide-de" onclick="toggleAdminForm()" style="margin-top: 12px;">
|
||||
Als Admin registrieren (Name + LLC)
|
||||
</button>
|
||||
<button type="button" class="btn-secondary hide-en" onclick="toggleAdminForm()" style="margin-top: 12px;">
|
||||
Register as admin (name + LLC)
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user