73 lines
3.6 KiB
HTML
73 lines
3.6 KiB
HTML
<!-- Login Seite -->
|
|
<div class="card">
|
|
<h2 class="mb-3">Account</h2>
|
|
|
|
<div id="auth-feedback" class="alert d-none" role="status" aria-live="polite"></div>
|
|
|
|
<!-- Logout und Account löschen -->
|
|
<div class="card bg-light mb-3" id="current-session-box">
|
|
<h3 class="h5 mb-2">Aktuelle Sitzung</h3>
|
|
<p class="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>
|
|
|
|
<!-- Login und Account erstellen -->
|
|
<div class="row g-3" id="auth-forms-row">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100">
|
|
<h3 class="h5 mb-3">Login</h3>
|
|
<form id="login-form">
|
|
<div class="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="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>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100">
|
|
<h3 class="h5 mb-3">Neuen Account erstellen</h3>
|
|
<form id="register-form">
|
|
<div class="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="small mt-3 mb-0 text-muted">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal für Account-Erstellung -->
|
|
<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">
|
|
<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> |