213 lines
11 KiB
PHP
213 lines
11 KiB
PHP
<?php
|
||
// Fallback falls $authView nicht gesetzt ist
|
||
$authView = $authView ?? 'login';
|
||
|
||
// Optional: View über GET-Parameter überschreiben (?view=login|register)
|
||
if (isset($_GET['view']) && in_array($_GET['view'], ['login', 'register'], true)) {
|
||
$authView = $_GET['view'];
|
||
}
|
||
|
||
// Flash-Meldung holen (falls flash_get() existiert)
|
||
$flash = function_exists('flash_get') ? flash_get() : null;
|
||
|
||
// Wenn eine Flash-Message mit Kontext kommt, Tabs entsprechend umschalten
|
||
if ($flash && !empty($flash['context']) && in_array($flash['context'], ['login', 'register'], true)) {
|
||
$authView = $flash['context'];
|
||
}
|
||
?>
|
||
<section id="auth" class="section-band section-band--reverse border-t border-brand-border/60 py-16 sm:py-20">
|
||
<div class="px-4 sm:px-6 lg:px-8">
|
||
<div class="section-shell w-full max-w-2xl mx-auto">
|
||
<div class="mb-8 text-center space-y-3">
|
||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="auth_kicker">
|
||
Account & Login
|
||
</p>
|
||
<h1 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" data-i18n="auth_title">
|
||
Melde dich bei USBCheck an
|
||
</h1>
|
||
<p class="text-sm sm:text-base text-brand-muted max-w-2xl mx-auto" data-i18n="auth_intro">
|
||
Mit einem Account kannst du Tests speichern, Reports exportieren und den Pro-Modus auf mehreren Geräten nutzen. Die Registrierung ist kostenlos – du kannst später jederzeit auf Pro upgraden.
|
||
</p>
|
||
</div>
|
||
|
||
<?php if ($flash): ?>
|
||
<div class="mb-6 rounded-xl px-4 py-3 text-sm border
|
||
<?php if ($flash['type'] === 'error'): ?>
|
||
border-red-500/60 bg-red-500/10 text-red-300
|
||
<?php elseif ($flash['type'] === 'success'): ?>
|
||
border-emerald-500/60 bg-emerald-500/10 text-emerald-300
|
||
<?php else: ?>
|
||
border-brand-border bg-brand-bg/60 text-brand-muted
|
||
<?php endif; ?>
|
||
">
|
||
<?= htmlspecialchars($flash['message']) ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Tabs -->
|
||
<div class="mb-6 rounded-full border border-brand-border bg-brand-surface/80 p-1 flex text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted">
|
||
<button
|
||
type="button"
|
||
class="flex-1 px-3 py-2 rounded-full text-center transition-colors auth-tab <?= $authView === 'login' ? 'bg-brand-primary text-brand-bg' : 'hover:text-brand-primary'; ?>"
|
||
data-tab="login"
|
||
data-i18n="auth_tab_login">
|
||
Login
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="flex-1 px-3 py-2 rounded-full text-center transition-colors auth-tab <?= $authView === 'register' ? 'bg-brand-primary text-brand-bg' : 'hover:text-brand-primary'; ?>"
|
||
data-tab="register"
|
||
data-i18n="auth_tab_register">
|
||
Registrieren
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Panels -->
|
||
<div class="space-y-6">
|
||
<!-- Login Panel -->
|
||
<div
|
||
id="authPanelLogin"
|
||
class="card-frame card-frame--soft space-y-5 <?= $authView !== 'login' ? 'hidden' : ''; ?>">
|
||
<h2 class="font-heading text-lg font-semibold text-brand-text" data-i18n="auth_login_title">
|
||
Login
|
||
</h2>
|
||
<p class="text-sm text-brand-muted" data-i18n="auth_login_text">
|
||
Melde dich mit deiner E-Mail-Adresse und deinem Passwort an.
|
||
</p>
|
||
|
||
<form method="post" action="/auth/login" class="space-y-4" autocomplete="on">
|
||
<input type="hidden" name="lang" value="<?= htmlspecialchars($lang ?? 'de') ?>">
|
||
<input type="hidden" name="redirect" value="<?= htmlspecialchars($_GET['redirect'] ?? '/') ?>">
|
||
<input type="hidden" name="authView" value="login">
|
||
|
||
<div class="space-y-1">
|
||
<label for="login_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_email_label">
|
||
E-Mail-Adresse
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="login_email"
|
||
name="email"
|
||
required
|
||
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
|
||
placeholder="you@example.com"
|
||
autocomplete="username"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-1">
|
||
<label for="login_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_login_password_label">
|
||
Passwort
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="login_password"
|
||
name="password"
|
||
required
|
||
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
|
||
placeholder="••••••••"
|
||
autocomplete="current-password"
|
||
>
|
||
</div>
|
||
|
||
<p class="text-xs text-red-400 hidden" id="login_error">
|
||
<!-- später dynamisch -->
|
||
</p>
|
||
|
||
<button
|
||
type="submit"
|
||
class="w-full inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
|
||
data-i18n="auth_login_submit">
|
||
Einloggen
|
||
</button>
|
||
|
||
<div class="flex justify-between items-center text-xs text-brand-muted mt-1">
|
||
<a href="#" class="hover:text-brand-primary transition-colors" data-i18n="auth_login_forgot">
|
||
Passwort vergessen?
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Register Panel -->
|
||
<div
|
||
id="authPanelRegister"
|
||
class="card-frame space-y-5 <?= $authView !== 'register' ? 'hidden' : ''; ?>">
|
||
<h2 class="font-heading text-lg font-semibold text-brand-text" data-i18n="auth_register_title">
|
||
Kostenlos registrieren
|
||
</h2>
|
||
<p class="text-sm text-brand-muted" data-i18n="auth_register_text">
|
||
Erstelle einen kostenlosen Account, um Tests zu speichern, Berichte zu exportieren und den Pro-Modus später freizuschalten.
|
||
</p>
|
||
|
||
<form method="post" action="/auth/register" class="space-y-4" autocomplete="on">
|
||
<input type="hidden" name="lang" value="<?= htmlspecialchars($lang ?? 'de') ?>">
|
||
<input type="hidden" name="redirect" value="<?= htmlspecialchars($_GET['redirect'] ?? '/') ?>">
|
||
<input type="hidden" name="authView" value="register">
|
||
|
||
<div class="space-y-1">
|
||
<label for="reg_name" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_name_label">
|
||
Name
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="reg_name"
|
||
name="name"
|
||
required
|
||
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
|
||
placeholder="Dein Name"
|
||
autocomplete="name"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-1">
|
||
<label for="reg_email" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_email_label">
|
||
E-Mail-Adresse
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="reg_email"
|
||
name="email"
|
||
required
|
||
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
|
||
placeholder="you@example.com"
|
||
autocomplete="email"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-1">
|
||
<label for="reg_password" class="block text-xs font-semibold tracking-wide uppercase text-brand-muted" data-i18n="auth_register_password_label">
|
||
Passwort
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="reg_password"
|
||
name="password"
|
||
required
|
||
class="w-full rounded-lg border border-brand-border bg-brand-bg/60 px-3 py-2 text-sm text-brand-text placeholder:text-brand-muted/60 focus:outline-none focus:ring-2 focus:ring-brand-primary/60"
|
||
placeholder="Mindestens 8 Zeichen"
|
||
autocomplete="new-password"
|
||
>
|
||
</div>
|
||
|
||
<p class="text-xs text-red-400 hidden" id="register_error">
|
||
<!-- später dynamisch -->
|
||
</p>
|
||
|
||
<button
|
||
type="submit"
|
||
class="w-full inline-flex items-center justify-center rounded-full border border-brand-primary bg-brand-bg/80 px-4 py-2.5 text-sm font-semibold text-brand-primary hover:bg-brand-primary hover:text-brand-bg transition-colors"
|
||
data-i18n="auth_register_submit">
|
||
Account erstellen
|
||
</button>
|
||
|
||
<p class="text-[11px] text-brand-muted/80 mt-1" data-i18n="auth_register_hint">
|
||
Durch die Registrierung akzeptierst du die Datenschutzerklärung und das Impressum von USBCheck.
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|