{% for error in form.password.errors %}
{% endfor %}
@@ -101,29 +360,43 @@
-
-
{% endblock %}
\ No newline at end of file
diff --git a/backend/app/templates/new_job.html b/backend/app/templates/new_job.html
index b17007785..33f4db1cc 100644
--- a/backend/app/templates/new_job.html
+++ b/backend/app/templates/new_job.html
@@ -2,6 +2,232 @@
{% block title %}Neuer Druckauftrag - MYP Platform{% endblock %}
+{% block extra_css %}
+
+{% endblock %}
+
{% block content %}
@@ -177,17 +403,26 @@
{% endblock %}
\ No newline at end of file
diff --git a/backend/app/templates/settings.html b/backend/app/templates/settings.html
index cabf731fe..85632814e 100644
--- a/backend/app/templates/settings.html
+++ b/backend/app/templates/settings.html
@@ -400,7 +400,24 @@
// Sammle alle Einstellungen und speichere sie
async function saveAllSettings() {
+ const saveButton = document.getElementById('save-security-settings');
+ const originalButtonText = saveButton.innerHTML;
+
try {
+ // Show loading state
+ saveButton.disabled = true;
+ saveButton.innerHTML = `
+
+ Speichern...
+ `;
+
+ // Add loading state to settings cards
+ const settingsCards = document.querySelectorAll('.glass-card');
+ settingsCards.forEach(card => card.classList.add('settings-loading'));
+
// Erscheinungsbild-Einstellungen
const theme = localStorage.getItem(STORAGE_KEY) === 'true' ? 'dark' :
localStorage.getItem(STORAGE_KEY) === 'false' ? 'light' : 'system';
@@ -418,6 +435,11 @@
const twoFactor = document.getElementById('two-factor').checked;
const autoLogout = document.getElementById('auto-logout').value;
+ // Validate settings
+ if (!validateSettings({ theme, contrast, autoLogout })) {
+ throw new Error('Ungültige Einstellungen erkannt');
+ }
+
// Einstellungsobjekt erstellen
const settings = {
theme: theme,
@@ -433,11 +455,19 @@
activity_logs: activityLogs,
two_factor: twoFactor,
auto_logout: autoLogout
- }
+ },
+ timestamp: new Date().toISOString()
};
+ // Apply reduced motion immediately if changed
+ if (reducedMotion) {
+ document.documentElement.style.setProperty('--tw-transition-duration', '0s');
+ } else {
+ document.documentElement.style.removeProperty('--tw-transition-duration');
+ }
+
// Einstellungen an den Server senden
- const response = await fetch('/user/update-settings', {
+ const response = await fetch('/api/user/settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -449,123 +479,484 @@
const result = await response.json();
if (result.success) {
+ // Success animation
+ settingsCards.forEach(card => {
+ card.classList.add('settings-saved');
+ setTimeout(() => card.classList.remove('settings-saved'), 600);
+ });
+
showFlashMessage('Alle Einstellungen wurden erfolgreich gespeichert', 'success');
+
+ // Cache settings locally for faster access
+ localStorage.setItem('myp-settings-cache', JSON.stringify(settings));
+
} else {
throw new Error(result.error || 'Unbekannter Fehler');
}
+
} catch (error) {
console.error('Fehler beim Speichern der Einstellungen:', error);
showFlashMessage('Fehler beim Speichern der Einstellungen: ' + error.message, 'error');
+ } finally {
+ // Restore button and remove loading states
+ saveButton.disabled = false;
+ saveButton.innerHTML = originalButtonText;
+
+ const settingsCards = document.querySelectorAll('.glass-card');
+ settingsCards.forEach(card => card.classList.remove('settings-loading'));
}
}
- // Einstellungen beim Laden der Seite abrufen
+ // Validate settings before saving
+ function validateSettings(settings) {
+ const validThemes = ['light', 'dark', 'system'];
+ const validContrast = ['normal', 'high'];
+ const validLogoutValues = ['never', '30', '60', '120', '480'];
+
+ return validThemes.includes(settings.theme) &&
+ validContrast.includes(settings.contrast) &&
+ validLogoutValues.includes(settings.autoLogout);
+ }
+
+ // Enhanced settings loading with caching
async function loadUserSettings() {
try {
+ // Try to load from cache first for better performance
+ const cachedSettings = localStorage.getItem('myp-settings-cache');
+ if (cachedSettings) {
+ try {
+ const cached = JSON.parse(cachedSettings);
+ // Use cached settings if they're less than 5 minutes old
+ if (new Date() - new Date(cached.timestamp) < 5 * 60 * 1000) {
+ applySettings(cached);
+ return;
+ }
+ } catch (e) {
+ localStorage.removeItem('myp-settings-cache');
+ }
+ }
+
const response = await fetch('/api/user/settings');
const result = await response.json();
if (result.success) {
const settings = result.settings;
+ applySettings(settings);
- // Theme-Einstellungen anwenden
- if (settings.theme === 'dark') {
- localStorage.setItem(STORAGE_KEY, 'true');
- document.documentElement.classList.add('dark');
- setActiveThemeButton(darkThemeBtn);
- } else if (settings.theme === 'light') {
- localStorage.setItem(STORAGE_KEY, 'false');
- document.documentElement.classList.remove('dark');
- setActiveThemeButton(lightThemeBtn);
- } else {
- localStorage.removeItem(STORAGE_KEY);
- setActiveThemeButton(systemThemeBtn);
- }
-
- // Weitere Einstellungen anwenden
- document.getElementById('reduced-motion').checked = settings.reduced_motion;
- document.getElementById('notify-new-jobs').checked = settings.notifications.new_jobs;
- document.getElementById('notify-job-updates').checked = settings.notifications.job_updates;
- document.getElementById('notify-system').checked = settings.notifications.system;
- document.getElementById('notify-email').checked = settings.notifications.email;
- document.getElementById('activity-logs').checked = settings.privacy.activity_logs;
- document.getElementById('two-factor').checked = settings.privacy.two_factor;
- document.getElementById('auto-logout').value = settings.privacy.auto_logout;
-
- // Kontrast-Einstellungen
- if (settings.contrast === 'high') {
- localStorage.setItem('myp-contrast', 'high');
- document.documentElement.classList.add('high-contrast');
- setActiveContrastButton(highContrastBtn);
- } else {
- localStorage.setItem('myp-contrast', 'normal');
- document.documentElement.classList.remove('high-contrast');
- setActiveContrastButton(normalContrastBtn);
- }
+ // Cache the loaded settings
+ settings.timestamp = new Date().toISOString();
+ localStorage.setItem('myp-settings-cache', JSON.stringify(settings));
}
+
} catch (error) {
console.error('Fehler beim Laden der Einstellungen:', error);
+ // Use fallback defaults if loading fails
+ applyDefaultSettings();
}
}
- // Einstellungen beim Laden der Seite abrufen
- loadUserSettings();
+ function applySettings(settings) {
+ // Theme-Einstellungen anwenden
+ if (settings.theme === 'dark') {
+ localStorage.setItem(STORAGE_KEY, 'true');
+ document.documentElement.classList.add('dark');
+ setActiveThemeButton(darkThemeBtn);
+ } else if (settings.theme === 'light') {
+ localStorage.setItem(STORAGE_KEY, 'false');
+ document.documentElement.classList.remove('dark');
+ setActiveThemeButton(lightThemeBtn);
+ } else {
+ localStorage.removeItem(STORAGE_KEY);
+ setActiveThemeButton(systemThemeBtn);
+ }
+
+ // Apply reduced motion setting
+ if (settings.reduced_motion) {
+ document.documentElement.style.setProperty('--tw-transition-duration', '0s');
+ document.getElementById('reduced-motion').checked = true;
+ } else {
+ document.documentElement.style.removeProperty('--tw-transition-duration');
+ document.getElementById('reduced-motion').checked = false;
+ }
+
+ // Weitere Einstellungen anwenden
+ document.getElementById('notify-new-jobs').checked = settings.notifications?.new_jobs ?? true;
+ document.getElementById('notify-job-updates').checked = settings.notifications?.job_updates ?? true;
+ document.getElementById('notify-system').checked = settings.notifications?.system ?? true;
+ document.getElementById('notify-email').checked = settings.notifications?.email ?? false;
+ document.getElementById('activity-logs').checked = settings.privacy?.activity_logs ?? true;
+ document.getElementById('two-factor').checked = settings.privacy?.two_factor ?? false;
+ document.getElementById('auto-logout').value = settings.privacy?.auto_logout ?? '60';
+
+ // Kontrast-Einstellungen
+ if (settings.contrast === 'high') {
+ localStorage.setItem('myp-contrast', 'high');
+ document.documentElement.classList.add('high-contrast');
+ setActiveContrastButton(highContrastBtn);
+ } else {
+ localStorage.setItem('myp-contrast', 'normal');
+ document.documentElement.classList.remove('high-contrast');
+ setActiveContrastButton(normalContrastBtn);
+ }
+ }
+
+ function applyDefaultSettings() {
+ // Apply safe defaults if loading fails
+ setActiveThemeButton(systemThemeBtn);
+ setActiveContrastButton(normalContrastBtn);
+
+ document.getElementById('reduced-motion').checked = false;
+ document.getElementById('notify-new-jobs').checked = true;
+ document.getElementById('notify-job-updates').checked = true;
+ document.getElementById('notify-system').checked = true;
+ document.getElementById('notify-email').checked = false;
+ document.getElementById('activity-logs').checked = true;
+ document.getElementById('two-factor').checked = false;
+ document.getElementById('auto-logout').value = '60';
+ }
+
+ // Auto-logout implementation
+ let logoutTimer = null;
+
+ function setupAutoLogout() {
+ const autoLogoutSelect = document.getElementById('auto-logout');
+
+ function resetLogoutTimer() {
+ if (logoutTimer) {
+ clearTimeout(logoutTimer);
+ }
+
+ const minutes = parseInt(autoLogoutSelect.value);
+ if (minutes && minutes !== 'never') {
+ logoutTimer = setTimeout(() => {
+ if (confirm('Sie werden aufgrund von Inaktivität abgemeldet. Möchten Sie angemeldet bleiben?')) {
+ resetLogoutTimer();
+ } else {
+ window.location.href = '/logout';
+ }
+ }, minutes * 60 * 1000);
+ }
+ }
+
+ // Reset timer on any user activity
+ ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'].forEach(event => {
+ document.addEventListener(event, resetLogoutTimer, { passive: true });
+ });
+
+ // Initial setup
+ resetLogoutTimer();
+
+ // Update timer when setting changes
+ autoLogoutSelect.addEventListener('change', resetLogoutTimer);
+ }
+
+ // Enhanced toggle switches with keyboard support
+ function enhanceToggleSwitches() {
+ document.querySelectorAll('.toggle-checkbox').forEach(checkbox => {
+ // Add keyboard support
+ checkbox.addEventListener('keydown', function(e) {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ this.click();
+ }
+ });
+
+ // Enhanced change handler with debouncing
+ let changeTimeout;
+ checkbox.addEventListener('change', function() {
+ clearTimeout(changeTimeout);
+ changeTimeout = setTimeout(() => {
+ const settingName = this.name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+ const status = this.checked ? 'aktiviert' : 'deaktiviert';
+
+ // Visual feedback
+ const label = this.nextElementSibling;
+ if (label) {
+ label.style.transform = 'scale(1.05)';
+ setTimeout(() => {
+ label.style.transform = '';
+ }, 150);
+ }
+
+ // Auto-save individual settings
+ saveIndividualSetting(this.name, this.checked);
+
+ showFlashMessage(`${settingName} wurde ${status}`, 'info');
+ }, 300); // Debounce to prevent spam
+ });
+ });
+ }
+
+ // Save individual settings for immediate feedback
+ async function saveIndividualSetting(settingName, value) {
+ try {
+ const response = await fetch('/api/user/setting', {
+ method: 'PATCH',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
+ },
+ body: JSON.stringify({ [settingName]: value })
+ });
+
+ if (!response.ok) {
+ throw new Error('Fehler beim Speichern der Einstellung');
+ }
+
+ // Update cache
+ const cached = localStorage.getItem('myp-settings-cache');
+ if (cached) {
+ try {
+ const settings = JSON.parse(cached);
+ // Update the specific setting in cache
+ const keys = settingName.split('.');
+ let current = settings;
+ for (let i = 0; i < keys.length - 1; i++) {
+ if (!current[keys[i]]) current[keys[i]] = {};
+ current = current[keys[i]];
+ }
+ current[keys[keys.length - 1]] = value;
+ settings.timestamp = new Date().toISOString();
+ localStorage.setItem('myp-settings-cache', JSON.stringify(settings));
+ } catch (e) {
+ localStorage.removeItem('myp-settings-cache');
+ }
+ }
+
+ } catch (error) {
+ console.error('Fehler beim Speichern der Einzeleinstellung:', error);
+ }
+ }
+
+ // Performance optimization: Intersection Observer for animations
+ function setupIntersectionObserver() {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('in-view');
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('.glass-card').forEach(card => {
+ observer.observe(card);
+ });
+ }
+
+ // Initialize all enhanced features
+ function initializeEnhancedFeatures() {
+ setupAutoLogout();
+ enhanceToggleSwitches();
+ setupIntersectionObserver();
+ setupNavigationLinks();
+ }
+
+ // Setup navigation links
+ function setupNavigationLinks() {
+ const navItems = document.querySelectorAll('.nav-item');
+ navItems.forEach(item => {
+ item.addEventListener('click', function(e) {
+ // If it's a real link to another page, don't preventDefault
+ if (this.getAttribute('href').startsWith('#')) {
+ e.preventDefault();
+
+ // Update active state
+ navItems.forEach(navItem => {
+ navItem.classList.remove('bg-blue-50', 'dark:bg-blue-900/20', 'text-blue-700', 'dark:text-blue-300');
+ navItem.classList.add('text-slate-900', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-slate-800');
+ });
+
+ this.classList.add('bg-blue-50', 'dark:bg-blue-900/20', 'text-blue-700', 'dark:text-blue-300');
+ this.classList.remove('text-slate-900', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-slate-800');
+
+ // Scroll to section with offset for header
+ const targetId = this.getAttribute('href').substring(1);
+ const targetElement = document.querySelector(`[id="${targetId}"]`) ||
+ document.querySelector(`h2:contains("${targetId}")`);
+
+ if (targetElement) {
+ const offsetTop = targetElement.offsetTop - 100; // Account for header
+ window.scrollTo({
+ top: offsetTop,
+ behavior: 'smooth'
+ });
+ }
+ }
+ });
+ });
+ }
// Helper function to show flash messages
function showFlashMessage(message, type = 'info') {
// Use the global toast manager if available
if (window.showToast) {
window.showToast(message, type);
+ } else if (window.MYP && window.MYP.UI && window.MYP.UI.ToastManager) {
+ const toast = new window.MYP.UI.ToastManager();
+ toast.show(message, type);
} else {
- alert(message);
+ // Fallback to simple notification
+ const notification = document.createElement('div');
+ notification.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 ${
+ type === 'success' ? 'bg-green-500' :
+ type === 'error' ? 'bg-red-500' :
+ type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500'
+ }`;
+ notification.textContent = message;
+ document.body.appendChild(notification);
+
+ setTimeout(() => {
+ notification.style.opacity = '0';
+ setTimeout(() => document.body.removeChild(notification), 300);
+ }, 3000);
}
}
- // Navigation links
- const navItems = document.querySelectorAll('.nav-item');
- navItems.forEach(item => {
- item.addEventListener('click', function(e) {
- // If it's a real link to another page, don't preventDefault
- if (this.getAttribute('href').startsWith('#')) {
- e.preventDefault();
-
- // Update active state
- navItems.forEach(navItem => {
- navItem.classList.remove('bg-blue-50', 'dark:bg-blue-900/20', 'text-blue-700', 'dark:text-blue-300');
- navItem.classList.add('text-slate-900', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-slate-800');
- });
-
- this.classList.add('bg-blue-50', 'dark:bg-blue-900/20', 'text-blue-700', 'dark:text-blue-300');
- this.classList.remove('text-slate-900', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-slate-800');
-
- // Scroll to section
- const targetId = this.getAttribute('href').substring(1);
- const targetElement = document.querySelector(`[id="${targetId}"]`) ||
- document.querySelector(`h2:contains("${targetId}")`);
-
- if (targetElement) {
- targetElement.scrollIntoView({ behavior: 'smooth' });
- }
- }
- });
- });
+ // Initialize everything
+ loadUserSettings();
+ initializeEnhancedFeatures();
});
{% endblock %}
\ No newline at end of file