Add password change routes to backend and frontend; update routing and UI components for password management

frontend/src/App.vue

@@ -74,6 +74,7 @@ const pageTitle = computed(() => {
     'calendar': 'Kalender',
     'admin-holidays': 'Feiertage',
     'settings-profile': 'Persönliches',
+    'settings-password': 'Passwort ändern',
     'entries': 'Einträge',
     'stats': 'Statistiken'
   }

frontend/src/router/index.js

@@ -17,6 +17,7 @@ import Workdays from '../views/Workdays.vue'
 import Calendar from '../views/Calendar.vue'
 import Holidays from '../views/Holidays.vue'
 import Profile from '../views/Profile.vue'
+import PasswordChange from '../views/PasswordChange.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -105,6 +106,12 @@ const router = createRouter({
       component: Profile,
       meta: { requiresAuth: true }
     },
+    {
+      path: '/settings/password',
+      name: 'settings-password',
+      component: PasswordChange,
+      meta: { requiresAuth: true }
+    },
     {
       path: '/entries',
       name: 'entries',

frontend/src/views/PasswordChange.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="password-page">
+    <div class="card">
+      <form @submit.prevent="changePassword" class="password-form">
+        <div class="form-group">
+          <label for="oldPassword">Altes Passwort</label>
+          <input 
+            type="password" 
+            id="oldPassword" 
+            v-model="form.oldPassword"
+            required
+            autocomplete="current-password"
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="newPassword">Neues Passwort</label>
+          <input 
+            type="password" 
+            id="newPassword" 
+            v-model="form.newPassword"
+            required
+            minlength="6"
+            autocomplete="new-password"
+          >
+          <small class="help-text">Mindestens 6 Zeichen</small>
+        </div>
+
+        <div class="form-group">
+          <label for="confirmPassword">Neues Passwort bestätigen</label>
+          <input 
+            type="password" 
+            id="confirmPassword" 
+            v-model="form.confirmPassword"
+            required
+            minlength="6"
+            autocomplete="new-password"
+          >
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary" :disabled="loading">
+            {{ loading ? 'Wird gespeichert...' : 'Passwort ändern' }}
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Modal-Komponente -->
+    <Modal 
+      v-if="showModal"
+      :show="showModal"
+      :title="modalConfig.title"
+      :message="modalConfig.message"
+      :type="modalConfig.type"
+      :confirmText="modalConfig.confirmText"
+      :cancelText="modalConfig.cancelText"
+      @confirm="onConfirm" 
+      @cancel="onCancel" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useAuthStore } from '../stores/authStore'
+import { useModal } from '../composables/useModal'
+import Modal from '../components/Modal.vue'
+
+const authStore = useAuthStore()
+const loading = ref(false)
+
+const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
+
+const form = ref({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+// Ändere Passwort
+async function changePassword() {
+  if (form.value.newPassword !== form.value.confirmPassword) {
+    await alert('Die neuen Passwörter stimmen nicht überein', 'Fehler')
+    return
+  }
+  
+  if (form.value.newPassword.length < 6) {
+    await alert('Das neue Passwort muss mindestens 6 Zeichen lang sein', 'Fehler')
+    return
+  }
+  
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/password', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${authStore.token}`
+      },
+      body: JSON.stringify({
+        oldPassword: form.value.oldPassword,
+        newPassword: form.value.newPassword,
+        confirmPassword: form.value.confirmPassword
+      })
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Ändern des Passworts')
+    }
+    
+    // Erfolg
+    await alert('Ihr Passwort wurde erfolgreich geändert', 'Erfolg')
+    
+    // Formular zurücksetzen
+    resetForm()
+  } catch (error) {
+    console.error('Fehler beim Ändern des Passworts:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Formular zurücksetzen
+function resetForm() {
+  form.value = {
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  }
+}
+</script>
+
+<style scoped>
+.password-page {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+}
+
+.form-group input {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #4CAF50;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+}
+
+.help-text {
+  font-size: 12px;
+  color: #666;
+  font-style: italic;
+}
+
+.form-actions {
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: white;
+  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
+}
+</style>
+