299 lines
13 KiB
Twig
299 lines
13 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= $title ?></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
.navbar {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.auth-container {
|
|
min-height: calc(100vh - 200px);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.auth-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
|
|
}
|
|
.form-floating {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.password-strength {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
margin-top: 0.5rem;
|
|
transition: all 0.3s;
|
|
}
|
|
.strength-weak { background-color: #dc3545; }
|
|
.strength-medium { background-color: #ffc107; }
|
|
.strength-strong { background-color: #28a745; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="fas fa-shopping-cart me-2"></i>Webshop
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Startseite</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/products">Produkte</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/categories">Kategorien</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<a href="/login" class="btn btn-outline-light me-2">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Anmelden
|
|
</a>
|
|
<a href="/register" class="btn btn-light">
|
|
<i class="fas fa-user-plus me-2"></i>Registrieren
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container auth-container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-6">
|
|
<div class="auth-card p-4 p-md-5">
|
|
<div class="text-center mb-4">
|
|
<h2 class="h3 mb-2">
|
|
<i class="fas fa-user-plus text-primary me-2"></i>
|
|
Registrierung
|
|
</h2>
|
|
<p class="text-muted">
|
|
Erstellen Sie Ihr Konto und profitieren Sie von allen Vorteilen
|
|
</p>
|
|
</div>
|
|
|
|
<?php if (isset($errors) && !empty($errors)): ?>
|
|
<div class="alert alert-danger">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<strong>Fehler:</strong>
|
|
<ul class="mb-0 mt-2">
|
|
<?php foreach ($errors as $error): ?>
|
|
<li><?= htmlspecialchars($error) ?></li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<form method="POST" action="/register" id="registerForm">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="text"
|
|
class="form-control"
|
|
id="first_name"
|
|
name="first_name"
|
|
placeholder="Vorname"
|
|
value="<?= htmlspecialchars($old['first_name'] ?? '') ?>"
|
|
required>
|
|
<label for="first_name">
|
|
<i class="fas fa-user me-2"></i>Vorname
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-floating">
|
|
<input type="text"
|
|
class="form-control"
|
|
id="last_name"
|
|
name="last_name"
|
|
placeholder="Nachname"
|
|
value="<?= htmlspecialchars($old['last_name'] ?? '') ?>"
|
|
required>
|
|
<label for="last_name">
|
|
<i class="fas fa-user me-2"></i>Nachname
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-floating">
|
|
<input type="email"
|
|
class="form-control"
|
|
id="email"
|
|
name="email"
|
|
placeholder="E-Mail"
|
|
value="<?= htmlspecialchars($old['email'] ?? '') ?>"
|
|
required>
|
|
<label for="email">
|
|
<i class="fas fa-envelope me-2"></i>E-Mail-Adresse
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-floating">
|
|
<input type="tel"
|
|
class="form-control"
|
|
id="phone"
|
|
name="phone"
|
|
placeholder="Telefon"
|
|
value="<?= htmlspecialchars($old['phone'] ?? '') ?>">
|
|
<label for="phone">
|
|
<i class="fas fa-phone me-2"></i>Telefon (optional)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-floating">
|
|
<input type="password"
|
|
class="form-control"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Passwort"
|
|
required>
|
|
<label for="password">
|
|
<i class="fas fa-lock me-2"></i>Passwort
|
|
</label>
|
|
<div class="password-strength" id="passwordStrength"></div>
|
|
</div>
|
|
|
|
<div class="form-floating">
|
|
<input type="password"
|
|
class="form-control"
|
|
id="confirm_password"
|
|
name="confirm_password"
|
|
placeholder="Passwort bestätigen"
|
|
required>
|
|
<label for="confirm_password">
|
|
<i class="fas fa-lock me-2"></i>Passwort bestätigen
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="newsletter"
|
|
name="newsletter"
|
|
<?= isset($old['newsletter']) ? 'checked' : '' ?>>
|
|
<label class="form-check-label" for="newsletter">
|
|
<i class="fas fa-envelope-open me-2"></i>
|
|
Newsletter abonnieren (optional)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check mb-4">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="terms"
|
|
required>
|
|
<label class="form-check-label" for="terms">
|
|
Ich akzeptiere die <a href="/terms" target="_blank">AGB</a> und
|
|
<a href="/privacy" target="_blank">Datenschutzerklärung</a>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-user-plus me-2"></i>Konto erstellen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="text-center">
|
|
<p class="text-muted mb-2">Bereits ein Konto?</p>
|
|
<a href="/login" class="btn btn-outline-primary">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Jetzt anmelden
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Password strength indicator
|
|
document.getElementById('password').addEventListener('input', function() {
|
|
const password = this.value;
|
|
const strengthBar = document.getElementById('passwordStrength');
|
|
|
|
let strength = 0;
|
|
if (password.length >= 6) strength++;
|
|
if (password.match(/[a-z]/)) strength++;
|
|
if (password.match(/[A-Z]/)) strength++;
|
|
if (password.match(/[0-9]/)) strength++;
|
|
if (password.match(/[^a-zA-Z0-9]/)) strength++;
|
|
|
|
strengthBar.className = 'password-strength';
|
|
if (strength < 2) {
|
|
strengthBar.classList.add('strength-weak');
|
|
} else if (strength < 4) {
|
|
strengthBar.classList.add('strength-medium');
|
|
} else {
|
|
strengthBar.classList.add('strength-strong');
|
|
}
|
|
});
|
|
|
|
// Password confirmation check
|
|
document.getElementById('confirm_password').addEventListener('input', function() {
|
|
const password = document.getElementById('password').value;
|
|
const confirmPassword = this.value;
|
|
|
|
if (password !== confirmPassword) {
|
|
this.setCustomValidity('Passwörter stimmen nicht überein');
|
|
} else {
|
|
this.setCustomValidity('');
|
|
}
|
|
});
|
|
|
|
// Form validation
|
|
document.getElementById('registerForm').addEventListener('submit', function(e) {
|
|
const password = document.getElementById('password').value;
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
|
const terms = document.getElementById('terms').checked;
|
|
|
|
if (password !== confirmPassword) {
|
|
e.preventDefault();
|
|
alert('Passwörter stimmen nicht überein');
|
|
return;
|
|
}
|
|
|
|
if (!terms) {
|
|
e.preventDefault();
|
|
alert('Bitte akzeptieren Sie die AGB und Datenschutzerklärung');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Wird erstellt...';
|
|
submitBtn.disabled = true;
|
|
});
|
|
|
|
// Email validation
|
|
document.getElementById('email').addEventListener('blur', function() {
|
|
const email = this.value;
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
if (email && !emailRegex.test(email)) {
|
|
this.setCustomValidity('Bitte geben Sie eine gültige E-Mail-Adresse ein');
|
|
} else {
|
|
this.setCustomValidity('');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |