Implement passkey login functionality and enhance passkey support checks

pages/login.vue

@@ -86,7 +86,7 @@
           <!-- Submit Button -->
           <button
             type="submit"
-            :disabled="isLoading"
+            :disabled="isLoading || passkeyLoading"
             class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
           >
             <Loader2
@@ -97,6 +97,32 @@
             <span>{{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}</span>
           </button>
 
+          <button
+            type="button"
+            :disabled="isLoading || passkeyLoading || !isPasskeySupported"
+            class="w-full px-6 py-3 border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 text-gray-800 font-semibold rounded-lg transition-colors flex items-center justify-center"
+            @click="handlePasskeyLogin"
+          >
+            <Loader2
+              v-if="passkeyLoading"
+              :size="20"
+              class="mr-2 animate-spin"
+            />
+            <Lock
+              v-else
+              :size="18"
+              class="mr-2"
+            />
+            <span>{{ passkeyLoading ? 'Passkey-Anmeldung läuft...' : 'Mit Passkey anmelden' }}</span>
+          </button>
+
+          <p
+            v-if="!isPasskeySupported"
+            class="text-xs text-gray-500 text-center"
+          >
+            {{ passkeySupportReason || 'Passkeys sind in diesem Browser aktuell nicht verfügbar.' }}
+          </p>
+
           <!-- Forgot Password Link -->
           <div class="text-center">
             <NuxtLink
@@ -124,7 +150,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AlertCircle, Check, Loader2, Lock } from 'lucide-vue-next'
 
@@ -137,8 +163,26 @@ const formData = ref({
 })
 
 const isLoading = ref(false)
+const passkeyLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
+const isPasskeySupported = ref(false)
+const passkeySupportReason = ref('')
+
+onMounted(() => {
+  const hasPublicKeyCredential = typeof window !== 'undefined' && typeof window.PublicKeyCredential !== 'undefined'
+  const secureContext = typeof window !== 'undefined' && !!window.isSecureContext
+
+  isPasskeySupported.value = !!(hasPublicKeyCredential && secureContext)
+
+  if (!secureContext) {
+    passkeySupportReason.value = 'Passkeys benötigen HTTPS (oder localhost).'
+  } else if (!hasPublicKeyCredential) {
+    passkeySupportReason.value = 'Dieser Browser unterstützt WebAuthn/Passkeys nicht.'
+  } else {
+    passkeySupportReason.value = ''
+  }
+})
 
 const handleLogin = async () => {
   isLoading.value = true
@@ -170,8 +214,35 @@ const handleLogin = async () => {
   }
 }
 
-// Passkey-Login vorläufig deaktiviert
-// const handlePasskeyLogin = async () => { ... }
+const handlePasskeyLogin = async () => {
+  passkeyLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const response = await authStore.passkeyLogin(formData.value.email)
+
+    if (response.success) {
+      successMessage.value = 'Passkey-Anmeldung erfolgreich! Sie werden weitergeleitet...'
+
+      setTimeout(() => {
+        const roles = response.user.roles || (response.user.role ? [response.user.role] : [])
+        if (roles.includes('trainer')) {
+          router.push('/cms/kontaktanfragen')
+        } else if (roles.includes('admin') || roles.includes('vorstand') || roles.includes('newsletter')) {
+          router.push('/cms')
+        } else {
+          router.push('/mitgliederbereich')
+        }
+      }, 1000)
+    }
+  } catch (error) {
+    const message = error?.data?.message || error?.message || 'Passkey-Anmeldung fehlgeschlagen.'
+    errorMessage.value = message
+  } finally {
+    passkeyLoading.value = false
+  }
+}
 
 definePageMeta({
   layout: 'default'

pages/mitgliederbereich/profil.vue

@@ -198,8 +198,6 @@
             </div>
           </div>
 
-          <!-- Passkeys - vorläufig deaktiviert -->
-          <!--
           <div class="border-t border-gray-200 pt-6 mt-6">
             <h3 class="text-lg font-semibold text-gray-900 mb-2">
               Passkeys
@@ -208,6 +206,13 @@
               Passkeys erlauben eine Anmeldung ohne Passwort (z.B. per Fingerabdruck/FaceID/Windows Hello).
             </p>
 
+            <p
+              v-if="!isPasskeySupported"
+              class="text-sm text-amber-700 mb-4"
+            >
+              Passkeys sind in diesem Browser bzw. ohne HTTPS nicht verfügbar.
+            </p>
+
             <div
               v-if="passkeyError"
               class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm mb-3"
@@ -264,7 +269,6 @@
               </li>
             </ul>
           </div>
-          -->
 
           <!-- Error/Success Messages -->
           <div
@@ -334,7 +338,7 @@ const passkeyLoading = ref(false)
 const passkeyError = ref('')
 const isPasskeySupported = ref(false)
 if (process.client) {
-  isPasskeySupported.value = !!window.PublicKeyCredential
+  isPasskeySupported.value = !!window.PublicKeyCredential && !!window.isSecureContext
 }
 
 const formData = ref({
@@ -503,8 +507,9 @@ const handleSave = async () => {
 
 onMounted(() => {
   loadProfile()
-  // Passkey-Verwaltung vorläufig deaktiviert
-  // loadPasskeys()
+  if (isPasskeySupported.value) {
+    loadPasskeys()
+  }
 })
 
 definePageMeta({