Update Apache SSL configuration and enhance security features across multiple files. Changed X-Frame-Options to SAMEORIGIN for better security, added optional Content Security Policy headers for testing, and improved password handling with HaveIBeenPwned checks during user registration and password reset. Implemented passkey login functionality in the authentication flow, including UI updates for user experience. Enhanced image upload processing with size limits and validation, and added rate limiting for various API endpoints to prevent abuse.

pages/login.vue

@@ -97,6 +97,23 @@
             <span>{{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}</span>
           </button>
 
+          <!-- Passkey Button -->
+          <button
+            type="button"
+            :disabled="isLoading || isPasskeyLoading || !isPasskeySupported"
+            class="w-full px-6 py-3 border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 text-gray-900 font-semibold rounded-lg transition-colors flex items-center justify-center"
+            @click="handlePasskeyLogin"
+          >
+            <Loader2
+              v-if="isPasskeyLoading"
+              :size="20"
+              class="mr-2 animate-spin"
+            />
+            <span>
+              {{ isPasskeyLoading ? 'Passkey-Login läuft...' : (isPasskeySupported ? 'Mit Passkey anmelden' : 'Passkey nicht verfügbar') }}
+            </span>
+          </button>
+
           <!-- Forgot Password Link -->
           <div class="text-center">
             <NuxtLink
@@ -137,9 +154,15 @@ const formData = ref({
 })
 
 const isLoading = ref(false)
+const isPasskeyLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
 
+const isPasskeySupported = ref(false)
+if (process.client) {
+  isPasskeySupported.value = !!window.PublicKeyCredential
+}
+
 const handleLogin = async () => {
   isLoading.value = true
   errorMessage.value = ''
@@ -168,6 +191,31 @@ const handleLogin = async () => {
   }
 }
 
+const handlePasskeyLogin = async () => {
+  isPasskeyLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const response = await authStore.passkeyLogin()
+    if (response.success) {
+      successMessage.value = 'Anmeldung per Passkey erfolgreich! Sie werden weitergeleitet...'
+      setTimeout(() => {
+        const roles = response.user.roles || (response.user.role ? [response.user.role] : [])
+        if (roles.includes('admin') || roles.includes('vorstand') || roles.includes('newsletter')) {
+          router.push('/cms')
+        } else {
+          router.push('/mitgliederbereich')
+        }
+      }, 800)
+    }
+  } catch (error) {
+    errorMessage.value = error?.data?.message || error?.message || 'Passkey-Login fehlgeschlagen.'
+  } finally {
+    isPasskeyLoading.value = false
+  }
+}
+
 definePageMeta({
   layout: 'default'
 })