81 lines
4.4 KiB
HTML
81 lines
4.4 KiB
HTML
<!-- Account-Verwaltung (Login, Registrierung, Sitzungsanzeige) -->
|
|
<div class="card mb-4 text-start">
|
|
<!-- Header-Bereich mit Kurzbeschreibung -->
|
|
<div class="mb-4">
|
|
<h2 class="fw-bold mb-1">Account</h2>
|
|
<p class="text-muted mb-0 fs-6">Verwalte deine Sitzung und Account-Details.</p>
|
|
</div>
|
|
|
|
<!-- Alert-Box für Fehlermeldungen und Erfolgsmeldungen (wird per js/login.js gesteuert) -->
|
|
<div id="auth-feedback" class="alert d-none" role="status" aria-live="polite"></div>
|
|
|
|
<!-- Aktuelle Sitzung: Zeigt den Login-Status und bietet Buttons für Logout und Account löschen -->
|
|
<div class="card bg-light mb-3" id="current-session-box">
|
|
<h3 class="mb-2">Aktuelle Sitzung</h3>
|
|
<p class="h5 mb-2" id="current-session-text">Nicht eingeloggt.</p>
|
|
<div class="d-flex gap-2">
|
|
<button id="logout-button" type="button" class="btn btn-outline-secondary btn-sm" disabled>Logout</button>
|
|
<button id="delete-account-button" type="button" class="btn btn-danger btn-sm" disabled>Account löschen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Formular-Bereich: Login und Registrierung nebeneinander (auf Desktop) -->
|
|
<div class="row g-3" id="auth-forms-row">
|
|
<!-- Linke Spalte: Login-Formular -->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100">
|
|
<h3 class="mb-3">Login</h3>
|
|
<form id="login-form">
|
|
<div class="h5 mb-3">
|
|
<label for="login-username" class="form-label">Username</label>
|
|
<input id="login-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
|
|
</div>
|
|
<div class="h5 mb-3">
|
|
<label for="login-password" class="form-label">Passwort</label>
|
|
<input id="login-password" class="form-control" type="password" required maxlength="100" autocomplete="current-password" />
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Einloggen</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rechte Spalte: Registrierungs-Formular -->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100">
|
|
<h3 class="mb-3">Neuen Account erstellen</h3>
|
|
<form id="register-form">
|
|
<div class="h5 mb-3">
|
|
<label for="register-username" class="form-label">Gewünschter Username</label>
|
|
<input id="register-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
|
|
</div>
|
|
<button type="submit" class="btn btn-success">Account anlegen</button>
|
|
</form>
|
|
<p class="text-muted mb-0 fs-6 mt-2">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Bootstrap Modal: Zeigt das einmalig generierte Passwort nach erfolgreicher Account-Erstellung an -->
|
|
<div class="modal fade" id="password-modal" tabindex="-1" aria-labelledby="password-modal-label" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="password-modal-label">Account erfolgreich erstellt!</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Anzeige der generierten Zugangsdaten -->
|
|
<div class="alert alert-info mb-3">
|
|
<strong>Username:</strong> <span id="modal-username"></span><br/>
|
|
<strong>Passwort:</strong> <span id="modal-password" style="font-family: monospace; background-color: #f0f0f0; padding: 4px 8px; border-radius: 4px;"></span>
|
|
</div>
|
|
<p class="text-muted small mb-0">Bitte speichere das Passwort. Du benötigst es zum Einloggen.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Weiter zur Startseite</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|