166 lines
8.0 KiB
PHP
166 lines
8.0 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mein Profil – Veranstaltungs-App</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9f9f9; color: #1a1a2e; }
|
||
main { max-width: 760px; margin: 40px auto; padding: 0 20px 80px; }
|
||
.page-title { font-size: 1.8em; font-weight: 800; margin-bottom: 28px; letter-spacing: -0.02em; }
|
||
|
||
/* Alert boxes */
|
||
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9em; font-weight: 500; }
|
||
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
|
||
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
|
||
|
||
/* Cards */
|
||
.card { background: white; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 24px; overflow: hidden; }
|
||
.card-header { padding: 18px 24px; border-bottom: 1px solid #f3f4f6; }
|
||
.card-header h2 { font-size: 1.05em; font-weight: 700; }
|
||
.card-header p { font-size: 0.85em; color: #6b7280; margin-top: 3px; }
|
||
.card-body { padding: 24px; }
|
||
|
||
/* Info-grid */
|
||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
@media(max-width:560px){ .info-grid { grid-template-columns: 1fr; } }
|
||
.info-item label { display: block; font-size: 0.78em; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
|
||
.info-item .value { font-size: 1em; font-weight: 500; }
|
||
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.78em; font-weight: 700; background: #eff6ff; color: #1d4ed8; }
|
||
.badge.admin { background: #fef3c7; color: #92400e; }
|
||
|
||
/* Forms */
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-group label { display: block; font-size: 0.875em; font-weight: 600; margin-bottom: 6px; }
|
||
.form-group input {
|
||
width: 100%; padding: 10px 12px; border: 1.5px solid #d1d5db;
|
||
border-radius: 8px; font-size: 0.95em; transition: border-color 0.2s;
|
||
background: white;
|
||
}
|
||
.form-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }
|
||
.form-group .hint { font-size: 0.78em; color: #9ca3af; margin-top: 4px; }
|
||
.error-msg { font-size: 0.8em; color: #dc2626; margin-top: 4px; }
|
||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
@media(max-width:560px){ .form-row { grid-template-columns: 1fr; } }
|
||
|
||
/* Buttons */
|
||
.btn-primary {
|
||
padding: 10px 22px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white; border: none; border-radius: 8px; font-size: 0.9em;
|
||
font-weight: 600; cursor: pointer; transition: opacity 0.2s; width: 100%;
|
||
}
|
||
.btn-primary:hover { opacity: 0.9; }
|
||
.divider { border: none; border-top: 1px solid #f3f4f6; margin: 20px 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
@include('partials.header')
|
||
<main>
|
||
<h1 class="page-title">Mein Profil</h1>
|
||
|
||
{{-- Success / Error messages --}}
|
||
@if(session('success_info'))
|
||
<div class="alert alert-success">✓ {{ session('success_info') }}</div>
|
||
@endif
|
||
@if(session('success_pw'))
|
||
<div class="alert alert-success">✓ {{ session('success_pw') }}</div>
|
||
@endif
|
||
|
||
{{-- ── Profil-Übersicht ── --}}
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>Profilübersicht</h2>
|
||
<p>Deine aktuellen Kontodaten auf einen Blick</p>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<label>Name</label>
|
||
<span class="value">{{ $user->name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>E‑Mail</label>
|
||
<span class="value">{{ $user->email }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Rolle</label>
|
||
<span class="badge {{ $user->role === 'admin' ? 'admin' : '' }}">
|
||
{{ $user->role === 'admin' ? 'Administrator' : ($user->role === 'organizer' ? 'Veranstalter' : 'Nutzer') }}
|
||
</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Mitglied seit</label>
|
||
<span class="value">{{ $user->created_at->format('d.m.Y') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── Name & E-Mail ändern ── --}}
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>Name & E‑Mail ändern</h2>
|
||
<p>Passe deinen Anzeigenamen und deine E‑Mail-Adresse an</p>
|
||
</div>
|
||
<div class="card-body">
|
||
@if($errors->has('name') || $errors->has('email'))
|
||
<div class="alert alert-error">Bitte korrigiere die markierten Felder.</div>
|
||
@endif
|
||
<form method="POST" action="{{ route('profile.update.info') }}">
|
||
@csrf @method('PUT')
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="name">Name</label>
|
||
<input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" required>
|
||
@error('name')<span class="error-msg">{{ $message }}</span>@enderror
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">E‑Mail</label>
|
||
<input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required>
|
||
@error('email')<span class="error-msg">{{ $message }}</span>@enderror
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Änderungen speichern</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── Passwort ändern ── --}}
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>Passwort ändern</h2>
|
||
<p>Wähle ein sicheres Passwort mit mindestens 8 Zeichen</p>
|
||
</div>
|
||
<div class="card-body">
|
||
@if($errors->has('current_password') || $errors->has('password'))
|
||
<div class="alert alert-error">Bitte korrigiere die markierten Felder.</div>
|
||
@endif
|
||
<form method="POST" action="{{ route('profile.update.password') }}">
|
||
@csrf @method('PUT')
|
||
<div class="form-group">
|
||
<label for="current_password">Aktuelles Passwort</label>
|
||
<input type="password" id="current_password" name="current_password" required autocomplete="current-password">
|
||
@error('current_password')<span class="error-msg">{{ $message }}</span>@enderror
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="password">Neues Passwort</label>
|
||
<input type="password" id="password" name="password" required autocomplete="new-password">
|
||
<span class="hint">Mindestens 8 Zeichen</span>
|
||
@error('password')<span class="error-msg">{{ $message }}</span>@enderror
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password_confirmation">Neues Passwort bestätigen</label>
|
||
<input type="password" id="password_confirmation" name="password_confirmation" required autocomplete="new-password">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Passwort ändern</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
@include('partials.footer')
|
||
</body>
|
||
</html>
|