596 lines
31 KiB
HTML
596 lines
31 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Benutzer bearbeiten - Mercedes-Benz MYP Platform{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<style>
|
|
/* Modern Toggle Switch */
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 52px;
|
|
height: 28px;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 28px;
|
|
border: 2px solid rgba(148, 163, 184, 0.2);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0, 0, 0, 0.1),
|
|
0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.toggle-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background: linear-gradient(135deg, #ffffff, #f8fafc);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.15),
|
|
0 1px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
input:checked + .toggle-slider {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(29, 78, 216, 0.2),
|
|
0 0 0 3px rgba(59, 130, 246, 0.1),
|
|
0 4px 12px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
input:checked + .toggle-slider:before {
|
|
transform: translateX(24px);
|
|
background: linear-gradient(135deg, #ffffff, #f1f5f9);
|
|
box-shadow:
|
|
0 3px 12px rgba(0, 0, 0, 0.2),
|
|
0 1px 6px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Premium Input Fields */
|
|
.premium-input {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
|
|
backdrop-filter: blur(8px);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
position: relative;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.premium-input:before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, #e2e8f0, #cbd5e1, #e2e8f0);
|
|
border-radius: inherit;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
-webkit-mask-composite: xor;
|
|
}
|
|
|
|
.premium-input:focus {
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
0 10px 25px rgba(59, 130, 246, 0.15),
|
|
0 4px 10px rgba(59, 130, 246, 0.1),
|
|
0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.premium-input:focus:before {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8, #3b82f6);
|
|
}
|
|
|
|
/* Dark mode styles */
|
|
.dark .premium-input {
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.dark .premium-input:before {
|
|
background: linear-gradient(135deg, #475569, #334155, #475569);
|
|
}
|
|
|
|
.dark .toggle-slider {
|
|
background: linear-gradient(135deg, #475569, #334155);
|
|
border-color: rgba(71, 85, 105, 0.3);
|
|
}
|
|
|
|
/* Permission Card Animations */
|
|
.permission-card {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.permission-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* Floating Labels */
|
|
.floating-label {
|
|
position: relative;
|
|
}
|
|
|
|
.floating-label input:focus + label,
|
|
.floating-label input:not(:placeholder-shown) + label {
|
|
transform: translateY(-24px) scale(0.875);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.floating-label label {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 14px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Button Hover Effects */
|
|
.btn-gradient {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-gradient:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-gradient:hover:before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Glass Effect Cards */
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.1),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
|
}
|
|
|
|
.dark .glass-card {
|
|
background: rgba(15, 23, 42, 0.85);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-slate-900 dark:via-blue-900 dark:to-indigo-900 relative overflow-hidden">
|
|
<!-- Animated Background Elements -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute -top-40 -right-32 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-indigo-600/20 rounded-full blur-3xl animate-pulse"></div>
|
|
<div class="absolute -bottom-40 -left-32 w-96 h-96 bg-gradient-to-tr from-purple-400/20 to-pink-600/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-blue-300/10 to-indigo-300/10 rounded-full blur-2xl animate-pulse delay-500"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Modern Header with Glass Effect -->
|
|
<div class="mb-12">
|
|
<div class="glass-card rounded-3xl p-8 mb-8">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-6">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-xl">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-4xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-gray-200 bg-clip-text text-transparent">
|
|
Benutzer bearbeiten
|
|
</h1>
|
|
<p class="text-lg text-slate-600 dark:text-slate-400 mt-2 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
{{ user.name or user.email }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a href="{{ url_for('admin_page', tab='users') }}"
|
|
class="group inline-flex items-center px-6 py-3 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm text-slate-700 dark:text-slate-300 rounded-2xl hover:bg-white dark:hover:bg-slate-700 transition-all duration-300 shadow-lg hover:shadow-xl border border-white/20 dark:border-slate-700/50">
|
|
<svg class="w-5 h-5 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
|
</svg>
|
|
<span class="font-medium">Zurück zur Verwaltung</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modern Form with Glass Effect -->
|
|
<div class="glass-card rounded-3xl p-10 shadow-2xl">
|
|
<form method="POST" action="{{ url_for('admin_update_user_form', user_id=user.id) }}" class="space-y-8" id="userEditForm">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<input type="hidden" name="_method" value="PUT"/>
|
|
|
|
<!-- Form Header -->
|
|
<div class="border-b border-slate-200 dark:border-slate-700 pb-8">
|
|
<h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-3 flex items-center">
|
|
<svg class="w-6 h-6 mr-3 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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>
|
|
Benutzerdaten bearbeiten
|
|
</h2>
|
|
<p class="text-slate-600 dark:text-slate-400 text-lg">
|
|
Bearbeiten Sie die Informationen und Berechtigungen für diesen Benutzer
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Personal Information Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Left Column: Basic Info -->
|
|
<div class="space-y-6">
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-6 border border-blue-200/50 dark:border-blue-800/50">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
Persönliche Informationen
|
|
</h3>
|
|
|
|
<!-- Username Field -->
|
|
<div class="mb-6">
|
|
<label for="username" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Benutzername
|
|
</label>
|
|
<div class="relative group">
|
|
<input type="text"
|
|
name="username"
|
|
id="username"
|
|
required
|
|
value="{{ user.username }}"
|
|
class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"
|
|
placeholder="max.mustermann">
|
|
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Full Name Field -->
|
|
<div class="mb-6">
|
|
<label for="name" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Vollständiger Name
|
|
</label>
|
|
<div class="relative group">
|
|
<input type="text"
|
|
name="name"
|
|
id="name"
|
|
value="{{ user.name }}"
|
|
class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"
|
|
placeholder="Max Mustermann">
|
|
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div>
|
|
<label for="password" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Neues Passwort
|
|
<span class="text-xs font-normal text-slate-500 dark:text-slate-400 ml-2">(optional)</span>
|
|
</label>
|
|
<div class="relative group">
|
|
<input type="password"
|
|
name="password"
|
|
id="password"
|
|
class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"
|
|
placeholder="Leer lassen, um beizubehalten">
|
|
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2 ml-1">
|
|
Lassen Sie das Feld leer, um das aktuelle Passwort beizubehalten
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Role & Status -->
|
|
<div class="space-y-6">
|
|
<div class="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-6 border border-green-200/50 dark:border-green-800/50">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Rolle & Status
|
|
</h3>
|
|
|
|
<!-- Role Selection -->
|
|
<div class="mb-6">
|
|
<label for="role" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Benutzerrolle
|
|
</label>
|
|
<div class="relative">
|
|
<select name="role"
|
|
id="role"
|
|
class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white focus:outline-none appearance-none cursor-pointer">
|
|
<option value="user" {% if not user.is_admin %}selected{% endif %}>
|
|
👤 Standard-Benutzer
|
|
</option>
|
|
<option value="admin" {% if user.is_admin %}selected{% endif %}>
|
|
👑 Administrator
|
|
</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Selection -->
|
|
<div>
|
|
<label for="is_active" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
|
|
Kontostatus
|
|
</label>
|
|
<div class="relative">
|
|
<select name="is_active"
|
|
id="is_active"
|
|
class="premium-input w-full px-5 py-4 rounded-xl text-slate-900 dark:text-white focus:outline-none appearance-none cursor-pointer">
|
|
<option value="true" {% if user.active %}selected{% endif %}>
|
|
✅ Aktiv
|
|
</option>
|
|
<option value="false" {% if not user.active %}selected{% endif %}>
|
|
❌ Deaktiviert
|
|
</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Permissions Section -->
|
|
<div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-8 border border-purple-200/50 dark:border-purple-800/50">
|
|
<div class="mb-8">
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3 flex items-center">
|
|
<svg class="w-6 h-6 mr-3 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
Erweiterte Berechtigungen
|
|
</h3>
|
|
<p class="text-slate-600 dark:text-slate-400">
|
|
Konfigurieren Sie die spezifischen Zugriffsrechte für diesen Benutzer
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Permission: Start Jobs -->
|
|
<div class="permission-card bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-white/50 dark:border-slate-700/50">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<div class="flex items-center mb-2">
|
|
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M19 10a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h4 class="font-semibold text-slate-900 dark:text-white">Jobs starten</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
|
Benutzer kann eigene Druckjobs ohne Admin-Genehmigung starten
|
|
</p>
|
|
</div>
|
|
<div class="ml-4">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox"
|
|
name="can_start_jobs"
|
|
{% if user.permissions and user.permissions.can_start_jobs %}checked{% endif %}>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permission: Needs Approval -->
|
|
<div class="permission-card bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-white/50 dark:border-slate-700/50">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<div class="flex items-center mb-2">
|
|
<svg class="w-5 h-5 text-orange-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h4 class="font-semibold text-slate-900 dark:text-white">Genehmigungspflicht</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
|
Jobs des Benutzers müssen von einem Admin genehmigt werden
|
|
</p>
|
|
</div>
|
|
<div class="ml-4">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox"
|
|
name="needs_approval"
|
|
{% if not user.permissions or user.permissions.needs_approval %}checked{% endif %}>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Permission: Can Approve -->
|
|
<div class="permission-card bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-white/50 dark:border-slate-700/50">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<div class="flex items-center mb-2">
|
|
<svg class="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
|
</svg>
|
|
<h4 class="font-semibold text-slate-900 dark:text-white">Jobs genehmigen</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
|
Benutzer kann Gastanfragen und fremde Jobs genehmigen
|
|
</p>
|
|
</div>
|
|
<div class="ml-4">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox"
|
|
name="can_approve_jobs"
|
|
{% if user.permissions and user.permissions.can_approve_jobs %}checked{% endif %}>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex items-center justify-between pt-8 border-t border-slate-200 dark:border-slate-700">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span>Änderungen werden sofort gespeichert</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ url_for('admin_page', tab='users') }}"
|
|
class="group inline-flex items-center px-8 py-4 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm text-slate-700 dark:text-slate-300 rounded-2xl hover:bg-white dark:hover:bg-slate-700 transition-all duration-300 shadow-lg hover:shadow-xl border border-white/20 dark:border-slate-700/50">
|
|
<svg class="w-5 h-5 mr-2 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
<span class="font-medium">Abbrechen</span>
|
|
</a>
|
|
|
|
<button type="submit"
|
|
class="btn-gradient group inline-flex items-center px-8 py-4 text-white rounded-2xl hover:shadow-2xl transition-all duration-300 shadow-xl font-semibold text-lg relative overflow-hidden">
|
|
<svg class="w-5 h-5 mr-3 transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<span>Änderungen speichern</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced JavaScript for better UX -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('userEditForm');
|
|
const submitButton = form.querySelector('button[type="submit"]');
|
|
|
|
// Add smooth loading state
|
|
form.addEventListener('submit', function(e) {
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = `
|
|
<svg class="w-5 h-5 mr-3 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>
|
|
<span>Speichere...</span>
|
|
`;
|
|
});
|
|
|
|
// Enhanced input focus effects
|
|
const inputs = form.querySelectorAll('.premium-input');
|
|
inputs.forEach(input => {
|
|
input.addEventListener('focus', function() {
|
|
this.parentElement.classList.add('focused');
|
|
});
|
|
|
|
input.addEventListener('blur', function() {
|
|
this.parentElement.classList.remove('focused');
|
|
});
|
|
});
|
|
|
|
// Smooth scroll on form errors
|
|
const errors = document.querySelectorAll('.error-message');
|
|
if (errors.length > 0) {
|
|
errors[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
|
|
// Toggle switch animations
|
|
const toggles = document.querySelectorAll('.toggle-switch input');
|
|
toggles.forEach(toggle => {
|
|
toggle.addEventListener('change', function() {
|
|
const slider = this.nextElementSibling;
|
|
if (this.checked) {
|
|
slider.style.transform = 'scale(1.1)';
|
|
setTimeout(() => {
|
|
slider.style.transform = 'scale(1)';
|
|
}, 150);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form validation feedback
|
|
const requiredInputs = form.querySelectorAll('input[required]');
|
|
requiredInputs.forEach(input => {
|
|
input.addEventListener('blur', function() {
|
|
if (this.value.trim() === '') {
|
|
this.classList.add('border-red-300');
|
|
this.classList.remove('border-green-300');
|
|
} else {
|
|
this.classList.add('border-green-300');
|
|
this.classList.remove('border-red-300');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-save notification (mock)
|
|
let saveTimeout;
|
|
inputs.forEach(input => {
|
|
input.addEventListener('input', function() {
|
|
clearTimeout(saveTimeout);
|
|
saveTimeout = setTimeout(() => {
|
|
// Could implement auto-save here
|
|
console.log('Changes detected - auto-save ready');
|
|
}, 2000);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |