803 lines
39 KiB
HTML
803 lines
39 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Profil - MYP Platform{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-slate-900 dark:text-white">Mein Profil</h1>
|
|
<p class="mt-2 text-slate-500 dark:text-slate-400">Verwalten Sie Ihre Kontoinformationen und Einstellungen</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Profile Information -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-slate-700/50 mb-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-slate-900 dark:text-white">Persönliche Informationen</h2>
|
|
<button onclick="toggleEditMode()" id="edit-button"
|
|
class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-4 py-2 rounded-lg transition-all duration-200">
|
|
<svg class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Bearbeiten
|
|
</button>
|
|
</div>
|
|
|
|
<form id="profile-form" onsubmit="handleProfileUpdate(event)">
|
|
<!-- Avatar Section -->
|
|
<div class="flex items-center space-x-6 mb-8 pb-6 border-b border-gray-200 dark:border-slate-600">
|
|
<div class="relative">
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg">
|
|
<span id="avatar-text">{{ (current_user.first_name[0] if current_user.first_name else current_user.email[0]) | upper }}</span>
|
|
<img id="avatar-image" src="{{ current_user.avatar_url if current_user.avatar_url else '' }}"
|
|
alt="Profilbild" class="w-24 h-24 rounded-full object-cover {{ 'hidden' if not current_user.avatar_url else '' }}">
|
|
</div>
|
|
<button type="button" onclick="triggerAvatarUpload()"
|
|
class="absolute bottom-0 right-0 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-2 shadow-lg transition-all duration-200">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-1">
|
|
{{ current_user.first_name + ' ' + current_user.last_name if current_user.first_name and current_user.last_name else current_user.email.split('@')[0] }}
|
|
</h3>
|
|
<p class="text-slate-500 dark:text-slate-400">{{ current_user.email }}</p>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mt-1">
|
|
{{ 'Administrator' if current_user.is_admin else 'Benutzer' }} •
|
|
{{ current_user.department or 'Keine Abteilung' }}
|
|
</p>
|
|
</div>
|
|
|
|
<input type="file" id="avatar-upload" name="avatar" accept="image/*" class="hidden" onchange="handleAvatarUpload(event)">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="first-name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Vorname
|
|
</label>
|
|
<input type="text" id="first-name" name="first_name" value="{{ current_user.first_name or '' }}" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-slate-800 disabled:cursor-not-allowed">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="last-name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Nachname
|
|
</label>
|
|
<input type="text" id="last-name" name="last_name" value="{{ current_user.last_name or '' }}" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-slate-800 disabled:cursor-not-allowed">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
E-Mail-Adresse
|
|
</label>
|
|
<input type="email" id="email" name="email" value="{{ current_user.email }}" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-slate-800 disabled:cursor-not-allowed">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Telefonnummer
|
|
</label>
|
|
<input type="tel" id="phone" name="phone" value="{{ current_user.phone or '' }}" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-slate-800 disabled:cursor-not-allowed">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="department" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Abteilung
|
|
</label>
|
|
<input type="text" id="department" name="department" value="{{ current_user.department or '' }}" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white disabled:bg-gray-100 dark:disabled:bg-slate-800 disabled:cursor-not-allowed">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="role" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Rolle
|
|
</label>
|
|
<input type="text" id="role" value="{{ 'Administrator' if current_user.is_admin else 'Benutzer' }}" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-gray-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 cursor-not-allowed">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-actions" class="hidden mt-6 flex space-x-4">
|
|
<button type="submit"
|
|
class="bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-500 text-white px-6 py-2 rounded-lg transition-all duration-200">
|
|
Änderungen speichern
|
|
</button>
|
|
<button type="button" onclick="cancelEdit()"
|
|
class="bg-gray-200 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-white px-6 py-2 rounded-lg transition-all duration-200">
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Password Change -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-slate-700/50">
|
|
<h2 class="text-xl font-bold text-slate-900 dark:text-white mb-6">Passwort ändern</h2>
|
|
|
|
<form id="password-form" onsubmit="handlePasswordChange(event)" class="space-y-4">
|
|
<div>
|
|
<label for="current-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Aktuelles Passwort
|
|
</label>
|
|
<input type="password" id="current-password" name="current_password" required
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="new-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Neues Passwort
|
|
</label>
|
|
<input type="password" id="new-password" name="new_password" required minlength="8"
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
|
|
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Mindestens 8 Zeichen</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirm-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
|
Passwort bestätigen
|
|
</label>
|
|
<input type="password" id="confirm-password" name="confirm_password" required
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-6 py-2 rounded-lg transition-all duration-200">
|
|
Passwort ändern
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="space-y-6">
|
|
<!-- Profile Stats -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-slate-700/50">
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Statistiken</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-slate-600 dark:text-slate-400">Gesamte Aufträge</span>
|
|
<span id="total-jobs" class="text-lg font-bold text-slate-900 dark:text-white">-</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-slate-600 dark:text-slate-400">Abgeschlossene Aufträge</span>
|
|
<span id="completed-jobs" class="text-lg font-bold text-green-600 dark:text-green-400">-</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-slate-600 dark:text-slate-400">Aktive Aufträge</span>
|
|
<span id="active-jobs" class="text-lg font-bold text-blue-600 dark:text-blue-400">-</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-slate-600 dark:text-slate-400">Fehlgeschlagene Aufträge</span>
|
|
<span id="failed-jobs" class="text-lg font-bold text-red-600 dark:text-red-400">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Info -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-slate-700/50">
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Kontoinformationen</h3>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div>
|
|
<span class="text-slate-600 dark:text-slate-400">Mitglied seit:</span>
|
|
<div class="font-medium text-slate-900 dark:text-white">{{ current_user.created_at | format_datetime('%d.%m.%Y') if current_user.created_at else 'Unbekannt' }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-slate-600 dark:text-slate-400">Letzte Anmeldung:</span>
|
|
<div class="font-medium text-slate-900 dark:text-white">{{ current_user.last_login | format_datetime if current_user.last_login else 'Nie' }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-slate-600 dark:text-slate-400">Konto-Status:</span>
|
|
<div class="font-medium">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-600 dark:bg-green-700 text-white">
|
|
Aktiv
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-slate-700/50">
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Schnellaktionen</h3>
|
|
|
|
<div class="space-y-3">
|
|
<a href="/new-job"
|
|
class="block w-full bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-500 text-white text-center py-2 px-4 rounded-lg transition-all duration-200">
|
|
Neuer Auftrag
|
|
</a>
|
|
|
|
<a href="/my/jobs"
|
|
class="block w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white text-center py-2 px-4 rounded-lg transition-all duration-200">
|
|
Meine Aufträge
|
|
</a>
|
|
|
|
<button onclick="downloadUserData()"
|
|
class="block w-full bg-gray-200 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-white text-center py-2 px-4 rounded-lg transition-all duration-200">
|
|
Daten exportieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let isEditMode = false;
|
|
let originalFormData = {};
|
|
let avatarFile = null;
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadUserStats();
|
|
storeOriginalFormData();
|
|
setupPasswordStrengthMeter();
|
|
setupFormValidation();
|
|
});
|
|
|
|
// Store original form data
|
|
function storeOriginalFormData() {
|
|
const form = document.getElementById('profile-form');
|
|
const formData = new FormData(form);
|
|
originalFormData = {};
|
|
|
|
for (let [key, value] of formData.entries()) {
|
|
if (key !== 'avatar') { // Don't store file data
|
|
originalFormData[key] = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Avatar Upload Functions
|
|
function triggerAvatarUpload() {
|
|
document.getElementById('avatar-upload').click();
|
|
}
|
|
|
|
async function handleAvatarUpload(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
// Validate file
|
|
if (!file.type.startsWith('image/')) {
|
|
showFlashMessage('Bitte wählen Sie eine gültige Bilddatei aus', 'error');
|
|
return;
|
|
}
|
|
|
|
if (file.size > 5 * 1024 * 1024) { // 5MB limit
|
|
showFlashMessage('Die Datei ist zu groß. Maximale Größe: 5MB', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Show loading state
|
|
const uploadButton = event.target.parentElement.querySelector('button');
|
|
const originalButtonContent = uploadButton.innerHTML;
|
|
uploadButton.innerHTML = `
|
|
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
`;
|
|
uploadButton.disabled = true;
|
|
|
|
// Preview image
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const avatarImage = document.getElementById('avatar-image');
|
|
const avatarText = document.getElementById('avatar-text');
|
|
|
|
avatarImage.src = e.target.result;
|
|
avatarImage.classList.remove('hidden');
|
|
avatarText.style.display = 'none';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
|
|
// Upload avatar
|
|
const formData = new FormData();
|
|
formData.append('avatar', file);
|
|
|
|
const response = await fetch('/api/user/avatar', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRFToken': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
showFlashMessage('Profilbild erfolgreich aktualisiert', 'success');
|
|
avatarFile = file;
|
|
} else {
|
|
throw new Error(result.message || 'Upload fehlgeschlagen');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Avatar upload error:', error);
|
|
showFlashMessage('Fehler beim Hochladen des Profilbilds: ' + error.message, 'error');
|
|
|
|
// Reset preview on error
|
|
const avatarImage = document.getElementById('avatar-image');
|
|
const avatarText = document.getElementById('avatar-text');
|
|
avatarImage.classList.add('hidden');
|
|
avatarText.style.display = 'flex';
|
|
|
|
} finally {
|
|
// Restore button
|
|
const uploadButton = event.target.parentElement.querySelector('button');
|
|
uploadButton.innerHTML = originalButtonContent;
|
|
uploadButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Password Strength Meter
|
|
function setupPasswordStrengthMeter() {
|
|
const newPasswordInput = document.getElementById('new-password');
|
|
|
|
// Create password strength indicator
|
|
const strengthMeter = document.createElement('div');
|
|
strengthMeter.id = 'password-strength-meter';
|
|
strengthMeter.className = 'mt-2';
|
|
|
|
const strengthBar = document.createElement('div');
|
|
strengthBar.className = 'w-full bg-gray-200 dark:bg-slate-600 rounded-full h-2';
|
|
|
|
const strengthIndicator = document.createElement('div');
|
|
strengthIndicator.id = 'strength-indicator';
|
|
strengthIndicator.className = 'h-2 rounded-full transition-all duration-300';
|
|
|
|
const strengthText = document.createElement('div');
|
|
strengthText.id = 'strength-text';
|
|
strengthText.className = 'text-xs mt-1';
|
|
|
|
strengthBar.appendChild(strengthIndicator);
|
|
strengthMeter.appendChild(strengthBar);
|
|
strengthMeter.appendChild(strengthText);
|
|
|
|
newPasswordInput.parentElement.appendChild(strengthMeter);
|
|
|
|
newPasswordInput.addEventListener('input', function() {
|
|
const password = this.value;
|
|
const strength = calculatePasswordStrength(password);
|
|
updatePasswordStrengthMeter(strength);
|
|
});
|
|
}
|
|
|
|
function calculatePasswordStrength(password) {
|
|
let score = 0;
|
|
const checks = {
|
|
length: password.length >= 8,
|
|
lowercase: /[a-z]/.test(password),
|
|
uppercase: /[A-Z]/.test(password),
|
|
numbers: /\d/.test(password),
|
|
special: /[!@#$%^&*(),.?":{}|<>]/.test(password)
|
|
};
|
|
|
|
score = Object.values(checks).filter(Boolean).length;
|
|
|
|
let strength = 'weak';
|
|
if (score >= 4) strength = 'strong';
|
|
else if (score >= 3) strength = 'medium';
|
|
|
|
return { score, strength, checks };
|
|
}
|
|
|
|
function updatePasswordStrengthMeter(strengthData) {
|
|
const indicator = document.getElementById('strength-indicator');
|
|
const text = document.getElementById('strength-text');
|
|
|
|
const { strength, score } = strengthData;
|
|
const percentage = (score / 5) * 100;
|
|
|
|
// Update bar
|
|
indicator.style.width = `${percentage}%`;
|
|
|
|
// Update colors and text
|
|
switch (strength) {
|
|
case 'weak':
|
|
indicator.className = 'h-2 rounded-full transition-all duration-300 bg-red-500';
|
|
text.textContent = 'Schwach';
|
|
text.className = 'text-xs mt-1 text-red-500';
|
|
break;
|
|
case 'medium':
|
|
indicator.className = 'h-2 rounded-full transition-all duration-300 bg-yellow-500';
|
|
text.textContent = 'Mittel';
|
|
text.className = 'text-xs mt-1 text-yellow-500';
|
|
break;
|
|
case 'strong':
|
|
indicator.className = 'h-2 rounded-full transition-all duration-300 bg-green-500';
|
|
text.textContent = 'Stark';
|
|
text.className = 'text-xs mt-1 text-green-500';
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Enhanced Form Validation
|
|
function setupFormValidation() {
|
|
// Real-time email validation
|
|
const emailInput = document.getElementById('email');
|
|
emailInput.addEventListener('blur', validateEmail);
|
|
|
|
// Phone number formatting
|
|
const phoneInput = document.getElementById('phone');
|
|
phoneInput.addEventListener('input', formatPhoneNumber);
|
|
|
|
// Name validation
|
|
['first-name', 'last-name'].forEach(id => {
|
|
const input = document.getElementById(id);
|
|
input.addEventListener('input', function() {
|
|
validateName(this);
|
|
});
|
|
});
|
|
}
|
|
|
|
function validateEmail(event) {
|
|
const email = event.target.value;
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
if (email && !emailRegex.test(email)) {
|
|
event.target.setCustomValidity('Bitte geben Sie eine gültige E-Mail-Adresse ein');
|
|
event.target.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
} else {
|
|
event.target.setCustomValidity('');
|
|
event.target.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
}
|
|
}
|
|
|
|
function formatPhoneNumber(event) {
|
|
let value = event.target.value.replace(/\D/g, '');
|
|
|
|
if (value.length >= 10) {
|
|
value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})/, '+49 $2 $3 $4');
|
|
}
|
|
|
|
event.target.value = value;
|
|
}
|
|
|
|
function validateName(input) {
|
|
const nameRegex = /^[a-zA-ZäöüÄÖÜß\s-]+$/;
|
|
const value = input.value.trim();
|
|
|
|
if (value && !nameRegex.test(value)) {
|
|
input.setCustomValidity('Namen dürfen nur Buchstaben, Leerzeichen und Bindestriche enthalten');
|
|
input.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
} else {
|
|
input.setCustomValidity('');
|
|
input.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
}
|
|
}
|
|
|
|
// Toggle edit mode with enhanced UX
|
|
function toggleEditMode() {
|
|
isEditMode = !isEditMode;
|
|
const inputs = document.querySelectorAll('#profile-form input:not(#role)');
|
|
const editButton = document.getElementById('edit-button');
|
|
const formActions = document.getElementById('form-actions');
|
|
|
|
inputs.forEach(input => {
|
|
input.disabled = !isEditMode;
|
|
if (isEditMode) {
|
|
input.classList.add('focus:ring-2', 'focus:ring-blue-600', 'focus:border-blue-600');
|
|
} else {
|
|
input.classList.remove('focus:ring-2', 'focus:ring-blue-600', 'focus:border-blue-600');
|
|
}
|
|
});
|
|
|
|
if (isEditMode) {
|
|
editButton.innerHTML = `
|
|
<svg class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
Abbrechen
|
|
`;
|
|
editButton.className = 'bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-500 text-white px-4 py-2 rounded-lg transition-all duration-200';
|
|
editButton.onclick = cancelEdit;
|
|
formActions.classList.remove('hidden');
|
|
} else {
|
|
editButton.innerHTML = `
|
|
<svg class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Bearbeiten
|
|
`;
|
|
editButton.className = 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-4 py-2 rounded-lg transition-all duration-200';
|
|
editButton.onclick = toggleEditMode;
|
|
formActions.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Cancel edit with confirmation
|
|
function cancelEdit() {
|
|
// Check if there are unsaved changes
|
|
const hasChanges = checkForUnsavedChanges();
|
|
|
|
if (hasChanges) {
|
|
if (!confirm('Sie haben ungespeicherte Änderungen. Möchten Sie wirklich abbrechen?')) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Restore original values
|
|
Object.keys(originalFormData).forEach(key => {
|
|
const input = document.querySelector(`[name="${key}"]`);
|
|
if (input) {
|
|
input.value = originalFormData[key];
|
|
}
|
|
});
|
|
|
|
// Reset avatar if changed
|
|
if (avatarFile) {
|
|
const avatarImage = document.getElementById('avatar-image');
|
|
const avatarText = document.getElementById('avatar-text');
|
|
avatarImage.classList.add('hidden');
|
|
avatarText.style.display = 'flex';
|
|
avatarFile = null;
|
|
}
|
|
|
|
toggleEditMode();
|
|
}
|
|
|
|
function checkForUnsavedChanges() {
|
|
return Object.keys(originalFormData).some(key => {
|
|
const input = document.querySelector(`[name="${key}"]`);
|
|
return input && input.value !== originalFormData[key];
|
|
}) || avatarFile !== null;
|
|
}
|
|
|
|
// Enhanced profile update with loading state
|
|
async function handleProfileUpdate(event) {
|
|
event.preventDefault();
|
|
|
|
const submitButton = event.target.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton.innerHTML;
|
|
|
|
// Show loading state
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = `
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Speichern...
|
|
`;
|
|
|
|
const formData = new FormData(event.target);
|
|
const profileData = {};
|
|
|
|
for (let [key, value] of formData.entries()) {
|
|
if (key !== 'avatar') {
|
|
profileData[key] = value;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const response = await apiCall('/api/user/profile', {
|
|
method: 'PUT',
|
|
body: JSON.stringify(profileData)
|
|
});
|
|
|
|
if (response.success) {
|
|
showFlashMessage('Profil erfolgreich aktualisiert', 'success');
|
|
storeOriginalFormData();
|
|
toggleEditMode();
|
|
|
|
// Update avatar text if name changed
|
|
const newInitial = (profileData.first_name?.[0] || profileData.email?.[0] || 'U').toUpperCase();
|
|
document.getElementById('avatar-text').textContent = newInitial;
|
|
|
|
} else {
|
|
throw new Error(response.message || 'Unbekannter Fehler');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error updating profile:', error);
|
|
showFlashMessage('Fehler beim Aktualisieren des Profils: ' + error.message, 'error');
|
|
} finally {
|
|
// Restore button
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonText;
|
|
}
|
|
}
|
|
|
|
// Enhanced password change with better validation
|
|
async function handlePasswordChange(event) {
|
|
event.preventDefault();
|
|
|
|
const submitButton = event.target.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton.innerHTML;
|
|
|
|
const formData = new FormData(event.target);
|
|
const newPassword = formData.get('new_password');
|
|
const confirmPassword = formData.get('confirm_password');
|
|
|
|
// Enhanced password validation
|
|
const strength = calculatePasswordStrength(newPassword);
|
|
if (strength.score < 3) {
|
|
showFlashMessage('Das Passwort ist zu schwach. Verwenden Sie eine Kombination aus Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen.', 'error');
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
showFlashMessage('Die Passwörter stimmen nicht überein', 'error');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = `
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Ändern...
|
|
`;
|
|
|
|
const passwordData = {
|
|
current_password: formData.get('current_password'),
|
|
new_password: newPassword
|
|
};
|
|
|
|
try {
|
|
const response = await apiCall('/api/user/password', {
|
|
method: 'PUT',
|
|
body: JSON.stringify(passwordData)
|
|
});
|
|
|
|
if (response.success) {
|
|
showFlashMessage('Passwort erfolgreich geändert', 'success');
|
|
document.getElementById('password-form').reset();
|
|
|
|
// Reset password strength meter
|
|
const strengthIndicator = document.getElementById('strength-indicator');
|
|
const strengthText = document.getElementById('strength-text');
|
|
if (strengthIndicator) {
|
|
strengthIndicator.style.width = '0%';
|
|
strengthText.textContent = '';
|
|
}
|
|
|
|
} else {
|
|
throw new Error(response.message || 'Unbekannter Fehler');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error changing password:', error);
|
|
showFlashMessage('Fehler beim Ändern des Passworts: ' + error.message, 'error');
|
|
} finally {
|
|
// Restore button
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonText;
|
|
}
|
|
}
|
|
|
|
// Load user statistics with enhanced error handling
|
|
async function loadUserStats() {
|
|
try {
|
|
const response = await apiCall('/api/user/stats');
|
|
|
|
if (response.success) {
|
|
const stats = response.stats;
|
|
|
|
// Animate counter updates
|
|
animateCounter('total-jobs', stats.total_jobs || 0);
|
|
animateCounter('completed-jobs', stats.completed_jobs || 0);
|
|
animateCounter('active-jobs', stats.active_jobs || 0);
|
|
animateCounter('failed-jobs', stats.failed_jobs || 0);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error loading user stats:', error);
|
|
// Keep default values (-) if loading fails
|
|
}
|
|
}
|
|
|
|
function animateCounter(elementId, targetValue) {
|
|
const element = document.getElementById(elementId);
|
|
const startValue = parseInt(element.textContent) || 0;
|
|
const duration = 1500;
|
|
const increment = (targetValue - startValue) / (duration / 16);
|
|
let currentValue = startValue;
|
|
|
|
const timer = setInterval(() => {
|
|
currentValue += increment;
|
|
if (increment > 0 ? currentValue >= targetValue : currentValue <= targetValue) {
|
|
element.textContent = targetValue;
|
|
clearInterval(timer);
|
|
} else {
|
|
element.textContent = Math.floor(currentValue);
|
|
}
|
|
}, 16);
|
|
}
|
|
|
|
// Enhanced data export with progress tracking
|
|
async function downloadUserData() {
|
|
try {
|
|
// Show loading state
|
|
const button = event.target;
|
|
const originalButtonText = button.innerHTML;
|
|
button.disabled = true;
|
|
button.innerHTML = `
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 inline" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Exportiere...
|
|
`;
|
|
|
|
const response = await fetch('/api/user/export', {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRFToken': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.style.display = 'none';
|
|
a.href = url;
|
|
a.download = `meine_daten_${new Date().toISOString().split('T')[0]}.json`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
|
|
showFlashMessage('Daten erfolgreich exportiert', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('Error downloading user data:', error);
|
|
showFlashMessage('Fehler beim Exportieren der Daten: ' + error.message, 'error');
|
|
} finally {
|
|
// Restore button
|
|
button.disabled = false;
|
|
button.innerHTML = originalButtonText;
|
|
}
|
|
}
|
|
|
|
// Enhanced password confirmation validation
|
|
document.getElementById('confirm-password').addEventListener('input', function() {
|
|
const newPassword = document.getElementById('new-password').value;
|
|
const confirmPassword = this.value;
|
|
|
|
if (confirmPassword && newPassword !== confirmPassword) {
|
|
this.setCustomValidity('Die Passwörter stimmen nicht überein');
|
|
this.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
} else {
|
|
this.setCustomValidity('');
|
|
this.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
}
|
|
});
|
|
|
|
// Warn user about unsaved changes before leaving
|
|
window.addEventListener('beforeunload', function(e) {
|
|
if (isEditMode && checkForUnsavedChanges()) {
|
|
e.preventDefault();
|
|
e.returnValue = '';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |