85 lines
5.2 KiB
HTML
85 lines
5.2 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
<section class="authentication-section">
|
|
{% if reset_mode %}
|
|
<div class="content-card">
|
|
<h2 class="section-title"><i data-lucide="key-round"></i> Passwort zurücksetzen</h2>
|
|
<form action="{{ url_for('handle_password_reset') }}" method="POST" class="input-form">
|
|
<input type="hidden" name="token" value="{{ token }}">
|
|
<div class="form-group">
|
|
<label for="password_string" class="input-label">Neues Passwort</label>
|
|
<input type="password" id="password_string" name="password_string" class="text-input" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password_string_confirmation" class="input-label">Passwort bestätigen</label>
|
|
<input type="password" id="password_string_confirmation" name="password_string_confirmation" class="text-input" required>
|
|
</div>
|
|
<button type="submit" class="action-button primary-button"><i data-lucide="save"></i> Speichern</button>
|
|
</form>
|
|
</div>
|
|
{% elif register_mode %}
|
|
<div class="content-card">
|
|
<h2 class="section-title"><i data-lucide="user-plus"></i> Registrieren</h2>
|
|
<form action="{{ url_for('handle_registration') }}" method="POST" class="input-form">
|
|
<div class="form-group">
|
|
<label for="display_name" class="input-label">Name</label>
|
|
<input type="text" id="display_name" name="display_name" class="text-input" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password_string" class="input-label">Passwort</label>
|
|
<input type="password" id="password_string" name="password_string" class="text-input" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password_string_confirmation" class="input-label">Passwort bestätigen</label>
|
|
<input type="password" id="password_string_confirmation" name="password_string_confirmation" class="text-input" required>
|
|
</div>
|
|
<button type="submit" class="action-button primary-button"><i data-lucide="check-circle"></i> Konto erstellen</button>
|
|
</form>
|
|
</div>
|
|
<div class="content-card" style="text-align: center;">
|
|
<a href="{{ url_for('handle_login') }}" class="action-button secondary-button"><i data-lucide="arrow-left"></i> Zur Anmeldung</a>
|
|
</div>
|
|
{% elif registration_success %}
|
|
<div class="content-card notice-card success-card" style="text-align: center;">
|
|
<h2 class="section-title" style="justify-content: center;"><i data-lucide="party-popper"></i> Erfolgreich</h2>
|
|
<h2 style="color: var(--fallback-danger); color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));">Wichtig!</h2>
|
|
<p>Deine ID:</p>
|
|
<h1 class="monospace-identifier" style="font-size: calc(3rem * var(--dimension-multiplier)); letter-spacing: calc(0.25rem * var(--dimension-multiplier)); color: var(--fallback-primary); color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary)); margin: var(--spacing-medium) 0;">{{ new_identifier }}</h1>
|
|
<button type="button" id="copy-identifier-button" class="action-button secondary-button" data-identifier="{{ new_identifier }}"><i data-lucide="copy"></i> ID kopieren</button>
|
|
<p style="margin-top: var(--spacing-medium);">Gut aufbewahren!</p>
|
|
<div style="margin-top: var(--spacing-large);">
|
|
<a href="{{ url_for('handle_login', prefill_identifier=new_identifier) }}" class="action-button primary-button"><i data-lucide="log-in"></i> Anmelden</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="content-card">
|
|
<h2 class="section-title"><i data-lucide="lock"></i> Login</h2>
|
|
<form action="{{ url_for('handle_login') }}" method="POST" class="input-form">
|
|
<div class="form-group">
|
|
<label for="player_identifier" class="input-label">ID</label>
|
|
<input type="text" id="player_identifier" name="player_identifier" class="text-input" value="{{ request.args.get('prefill_identifier', '') }}" style="text-transform: uppercase;" maxlength="{{ identifier_length }}" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '').toUpperCase().slice(0, {{ identifier_length }});" pattern="[A-Za-z]{{ '{' }}{{ identifier_length }}{{ '}' }}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password_string" class="input-label">Passwort</label>
|
|
<input type="password" id="password_string" name="password_string" class="text-input" required>
|
|
</div>
|
|
<button type="submit" class="action-button primary-button"><i data-lucide="log-in"></i> Anmelden</button>
|
|
</form>
|
|
</div>
|
|
<div class="content-card" style="text-align: center; display: flex; flex-direction: column; gap: var(--spacing-medium);">
|
|
<a href="{{ url_for('handle_registration') }}" class="action-button secondary-button"><i data-lucide="user-plus"></i> Registrieren</a>
|
|
<button type="button" id="trigger-help-modal" class="action-button secondary-button"><i data-lucide="life-buoy"></i> Probleme beim Login?</button>
|
|
</div>
|
|
|
|
<div id="help-modal" class="modal-overlay">
|
|
<div class="modal-dialog">
|
|
<h2 class="modal-title"><i data-lucide="help-circle"></i> Hilfe</h2>
|
|
<p class="modal-description">Wende dich an die Spielleitung, falls du deine ID oder dein Passwort vergessen hast.</p>
|
|
<div class="modal-actions">
|
|
<button type="button" id="close-help-modal" class="action-button primary-button"><i data-lucide="check"></i> Okay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endblock %} |