{% extends "base.html" %}
{% block title %}Anmelden - {{ site_name }}{% endblock %}
{% block content %}
<div class="login-container">
<div id="step1" class="step">
<h2>ADSB Nearby</h2>
<p class="info">Mit Benutzername und Passwort anmelden.</p>
<div class="error" id="errorMsg1"></div>
<label for="username">Benutzername / E-Mail</label>
<input type="text" id="username" placeholder="benutzer@example.com" autocomplete="username" style="font-size:14px;">
<label for="password">Passwort</label>
<input type="password" id="password" placeholder="••••••••" autocomplete="current-password">
<button type="submit" id="loginBtn" onclick="doLogin()">Anmelden</button>
</div>
<div id="step2" class="step step-hidden">
<h2>2FA bestätigen</h2>
<p class="info">Gib den 6-stelligen Code aus deiner Authenticator-App ein<br>oder einen Backup-Code.</p>
<div class="error" id="errorMsg2"></div>
<label for="totpCode">TOTP-Code</label>
<input type="text" id="totpCode" class="code-input" placeholder="••••••" autocomplete="one-time-code" maxlength="6" inputmode="numeric" pattern="[0-9]*">
<button type="submit" onclick="do2FA()">Bestätigen</button>
<p class="backup-hint"><a onclick="switchToBackup()">Backup-Code eingeben</a></p>
</div>
<div id="step2b" class="step step-hidden">
<h2>2FA bestätigen</h2>
<p class="info">Gib einen Backup-Code ein.</p>
<div class="error" id="errorMsg2b"></div>
<label for="backupCode">Backup-Code</label>
<input type="text" id="backupCode" placeholder="Code aus 8 Hex-Zeichen" style="font-family:monospace;font-size:14px;" autocomplete="off">
<button type="submit" onclick="do2FA()">Bestätigen</button>
<p class="backup-hint"><a onclick="switchToTOTP()">TOTP-Code eingeben</a></p>
</div>
</div>
{% endblock %}
{% block scripts_extra %}
<script src="/static/js/app.js"></script>
{% endblock %}