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

backend/set-password.js

@@ -0,0 +1,71 @@
+/**
+ * Script zum Setzen eines neuen Passworts für einen User
+ * Verwendung: node set-password.js <user_id> <neues_passwort>
+ */
+
+require('dotenv').config();
+const bcrypt = require('bcrypt');
+const database = require('./src/config/database');
+
+async function setPassword(userId, newPassword) {
+  try {
+    // Datenbank initialisieren
+    await database.initialize();
+    
+    const { User, AuthInfo } = database.getModels();
+    
+    // Hole User
+    const user = await User.findByPk(userId, {
+      include: [
+        {
+          model: AuthInfo,
+          as: 'authInfo',
+          required: true
+        }
+      ]
+    });
+    
+    if (!user || !user.authInfo) {
+      console.error(`❌ User ${userId} oder AuthInfo nicht gefunden`);
+      process.exit(1);
+    }
+    
+    // Hash Passwort
+    console.log('🔐 Hashe Passwort...');
+    const hashedPassword = await bcrypt.hash(newPassword, 10);
+    
+    // Aktualisiere Passwort
+    user.authInfo.password_hash = hashedPassword;
+    await user.authInfo.save();
+    
+    console.log(`✅ Passwort für User ${userId} (${user.full_name}) erfolgreich gesetzt!`);
+    console.log(`   Email: ${user.authInfo.email}`);
+    
+    // Schließe Datenbankverbindung
+    await database.close();
+    process.exit(0);
+  } catch (error) {
+    console.error('❌ Fehler beim Setzen des Passworts:', error.message);
+    await database.close();
+    process.exit(1);
+  }
+}
+
+// Argumente prüfen
+const userId = parseInt(process.argv[2]);
+const newPassword = process.argv[3];
+
+if (!userId || !newPassword) {
+  console.log('Verwendung: node set-password.js <user_id> <neues_passwort>');
+  console.log('Beispiel: node set-password.js 1 MeinNeuesPasswort123');
+  process.exit(1);
+}
+
+if (newPassword.length < 6) {
+  console.error('❌ Passwort muss mindestens 6 Zeichen lang sein');
+  process.exit(1);
+}
+
+// Passwort setzen
+setPassword(userId, newPassword);
+

backend/src/controllers/PasswordController.js

@@ -0,0 +1,47 @@
+const PasswordService = require('../services/PasswordService');
+
+/**
+ * Controller für Passwort-Verwaltung
+ * Verarbeitet HTTP-Requests und delegiert an PasswordService
+ */
+class PasswordController {
+  /**
+   * Ändert das Passwort
+   */
+  async changePassword(req, res) {
+    try {
+      const userId = req.user?.id || 1;
+      const { oldPassword, newPassword, confirmPassword } = req.body;
+      
+      if (!oldPassword || !newPassword || !confirmPassword) {
+        return res.status(400).json({ 
+          message: 'Alle Felder sind erforderlich' 
+        });
+      }
+      
+      if (newPassword !== confirmPassword) {
+        return res.status(400).json({ 
+          message: 'Die Passwörter stimmen nicht überein' 
+        });
+      }
+      
+      await PasswordService.changePassword(userId, oldPassword, newPassword);
+      
+      res.json({ message: 'Passwort erfolgreich geändert' });
+    } catch (error) {
+      console.error('Fehler beim Ändern des Passworts:', error);
+      
+      // Spezifische Fehlermeldungen
+      if (error.message.includes('alte Passwort')) {
+        return res.status(401).json({ message: error.message });
+      }
+      
+      res.status(500).json({ 
+        message: error.message || 'Fehler beim Ändern des Passworts'
+      });
+    }
+  }
+}
+
+module.exports = new PasswordController();
+

backend/src/index.js

@@ -94,6 +94,10 @@ app.use('/api/holidays', authenticateToken, holidaysRouter);
 const profileRouter = require('./routes/profile');
 app.use('/api/profile', authenticateToken, profileRouter);
 
+// Password routes (geschützt) - MIT ID-Hashing
+const passwordRouter = require('./routes/password');
+app.use('/api/password', authenticateToken, passwordRouter);
+
 // Error handling middleware
 app.use((err, req, res, next) => {
   console.error(err.stack);

backend/src/routes/password.js

@@ -0,0 +1,13 @@
+const express = require('express');
+const router = express.Router();
+const PasswordController = require('../controllers/PasswordController');
+
+/**
+ * Routen für Passwort-Verwaltung
+ */
+
+// PUT /api/password - Passwort ändern
+router.put('/', PasswordController.changePassword.bind(PasswordController));
+
+module.exports = router;
+

backend/src/services/PasswordService.js

@@ -0,0 +1,68 @@
+const database = require('../config/database');
+const bcrypt = require('bcrypt');
+
+/**
+ * Service-Klasse für Passwort-Verwaltung
+ */
+class PasswordService {
+  /**
+   * Ändert das Passwort eines Benutzers
+   * @param {number} userId - Benutzer-ID
+   * @param {string} oldPassword - Altes Passwort
+   * @param {string} newPassword - Neues Passwort
+   * @returns {Promise<void>}
+   */
+  async changePassword(userId, oldPassword, newPassword) {
+    const { User, AuthInfo } = database.getModels();
+    
+    // Hole User und AuthInfo
+    const user = await User.findByPk(userId, {
+      include: [
+        {
+          model: AuthInfo,
+          as: 'authInfo',
+          required: true
+        }
+      ]
+    });
+    
+    if (!user || !user.authInfo) {
+      throw new Error('Benutzer oder Login-Informationen nicht gefunden');
+    }
+    
+    const authInfo = user.authInfo;
+    
+    // Prüfe ob Passwort gesetzt ist
+    if (!authInfo.password_hash) {
+      throw new Error('Für diesen Account ist kein Passwort gesetzt. Möglicherweise verwenden Sie OAuth-Login.');
+    }
+    
+    // Prüfe altes Passwort
+    const isValidPassword = await bcrypt.compare(oldPassword, authInfo.password_hash);
+    
+    if (!isValidPassword) {
+      throw new Error('Das alte Passwort ist nicht korrekt');
+    }
+    
+    // Prüfe neues Passwort
+    if (!newPassword || newPassword.length < 6) {
+      throw new Error('Das neue Passwort muss mindestens 6 Zeichen lang sein');
+    }
+    
+    if (newPassword === oldPassword) {
+      throw new Error('Das neue Passwort darf nicht mit dem alten übereinstimmen');
+    }
+    
+    // Hash neues Passwort
+    const hashedPassword = await bcrypt.hash(newPassword, 10);
+    
+    // Aktualisiere Passwort
+    authInfo.password_hash = hashedPassword;
+    await authInfo.save();
+    
+    console.log(`Passwort für User ${userId} erfolgreich geändert`);
+  }
+}
+
+module.exports = new PasswordService();
+

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>
+