Enhance debug information for Passkey Registration in registrieren.vue

Update the registrieren.vue component to include additional debug information for the Passkey registration process. Introduce new elements for displaying the smartphone URL, registration ID, and full options JSON, improving the clarity of debug outputs. Implement a copy-to-clipboard functionality for easier access to debug data, enhancing the overall user experience during Cross-Device registration.

pages/registrieren.vue

@@ -177,17 +177,54 @@
           <!-- Debug Info (nur bei Passkey-Registrierung) -->
           <div
             v-if="usePasskey && showDebugInfo && debugChallenge"
-            class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-xs"
+            class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-xs space-y-3"
           >
             <div class="font-semibold text-blue-900 mb-2">🔍 Debug-Informationen (QR-Code):</div>
             <div class="space-y-1 text-blue-800">
-              <div><strong>Challenge:</strong> <code class="bg-blue-100 px-1 rounded">{{ debugChallenge.substring(0, 40) }}...</code></div>
+              <div><strong>Challenge:</strong> <code class="bg-blue-100 px-1 rounded break-all">{{ debugChallenge }}</code></div>
               <div><strong>RP-ID:</strong> <code class="bg-blue-100 px-1 rounded">{{ debugRpId }}</code></div>
+              <div v-if="debugRegistrationId"><strong>Registration-ID:</strong> <code class="bg-blue-100 px-1 rounded break-all">{{ debugRegistrationId }}</code></div>
               <div><strong>Origin:</strong> <code class="bg-blue-100 px-1 rounded">{{ typeof window !== 'undefined' ? window.location.origin : 'N/A (SSR)' }}</code></div>
-              <div class="mt-2 text-blue-700">
-                <strong>Hinweis:</strong> Der QR-Code wird vom Browser generiert. 
-                Prüfe in der Browser-Konsole (F12) für vollständige Debug-Ausgaben.
+            </div>
+            
+            <!-- Smartphone URL -->
+            <div v-if="debugSmartphoneUrl" class="mt-3 p-3 bg-green-50 border border-green-300 rounded">
+              <div class="font-semibold text-green-900 mb-2">📱 Smartphone-URL (statt QR-Code scannen):</div>
+              <div class="break-all text-xs mb-2 p-2 bg-white rounded border">
+                <a :href="debugSmartphoneUrl" target="_blank" class="text-blue-600 hover:underline">
+                  {{ debugSmartphoneUrl }}
+                </a>
               </div>
+              <div class="text-xs text-gray-700 mb-2">
+                <strong>Anleitung:</strong> Öffnen Sie diese URL auf Ihrem Smartphone, um die Passkey-Registrierung durchzuführen.
+              </div>
+              <button
+                @click="copyToClipboard(debugSmartphoneUrl)"
+                class="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700"
+              >
+                📋 URL kopieren
+              </button>
+            </div>
+            
+            <!-- Full Options JSON -->
+            <div v-if="debugOptions" class="mt-3">
+              <details class="text-xs">
+                <summary class="cursor-pointer font-semibold text-blue-900 hover:text-blue-700 mb-2">
+                  📄 Vollständige Options (JSON) - Klicken zum Anzeigen
+                </summary>
+                <pre class="mt-2 p-2 bg-gray-100 rounded overflow-auto text-xs max-h-60 border">{{ JSON.stringify(debugOptions, null, 2) }}</pre>
+                <button
+                  @click="copyToClipboard(JSON.stringify(debugOptions, null, 2))"
+                  class="mt-2 px-3 py-1 bg-gray-600 text-white text-xs rounded hover:bg-gray-700"
+                >
+                  📋 JSON kopieren
+                </button>
+              </details>
+            </div>
+            
+            <div class="mt-2 text-blue-700 text-xs">
+              <strong>Hinweis:</strong> Der QR-Code wird vom Browser generiert. 
+              Prüfe in der Browser-Konsole (F12) für vollständige Debug-Ausgaben.
             </div>
           </div>
 
@@ -278,6 +315,9 @@ const handleFormSubmit = (event) => {
 const showDebugInfo = ref(false)
 const debugChallenge = ref('')
 const debugRpId = ref('')
+const debugRegistrationId = ref('')
+const debugOptions = ref(null)
+const debugSmartphoneUrl = ref('')
 
 onMounted(() => {
   try {
@@ -524,6 +564,15 @@ const handleRegisterWithPasskey = async () => {
     // Der Browser generiert automatisch einen QR-Code für Cross-Device
     debugChallenge.value = pre.options?.challenge || ''
     debugRpId.value = pre.options?.rp?.id || ''
+    debugRegistrationId.value = pre.registrationId || ''
+    debugOptions.value = pre.options || null
+    
+    // Generiere Smartphone-URL für Cross-Device
+    // Das Smartphone kann diese URL öffnen, um die Passkey-Registrierung durchzuführen
+    if (pre.registrationId) {
+      debugSmartphoneUrl.value = `${window.location.origin}/passkey-register-cross-device?registrationId=${pre.registrationId}`
+    }
+    
     showDebugInfo.value = true
     
     console.log('[DEBUG] QR-Code Info (for Cross-Device):', {
@@ -642,6 +691,19 @@ const handleRegisterWithPasskey = async () => {
       console.log('[DEBUG] 4. Smartphone muss startRegistration aufrufen können')
       console.log('[DEBUG] 5. Smartphone sendet Credential-Response an:', window.location.origin + '/api/auth/register-passkey')
       
+      // WICHTIG: Prüfe, ob Cross-Device überhaupt unterstützt wird
+      console.log('[DEBUG] Checking Cross-Device support...')
+      console.log('[DEBUG] Platform Authenticator Available:', await mod.platformAuthenticatorIsAvailable())
+      console.log('[DEBUG] Browser Supports WebAuthn:', mod.browserSupportsWebAuthn())
+      
+      // Versuche startRegistration aufzurufen
+      // Bei Cross-Device wird automatisch ein QR-Code generiert
+      // Das Smartphone muss dann die Website öffnen können
+      console.log('[DEBUG] Calling startRegistration...')
+      console.log('[DEBUG] ⚠️ WICHTIG: Wenn Cross-Device verwendet wird, sollte ein QR-Code erscheinen')
+      console.log('[DEBUG] ⚠️ Das Smartphone muss dann die Website öffnen können:', window.location.origin)
+      console.log('[DEBUG] ⚠️ Prüfe, ob das Smartphone die Website erreichen kann!')
+      
       credential = await mod.startRegistration({ optionsJSON: pre.options })
       
       clearTimeout(timeoutWarning)
@@ -713,6 +775,31 @@ const handleRegisterWithPasskey = async () => {
   } finally {
     isLoading.value = false
   }
+  
+  // Funktion zum Kopieren in die Zwischenablage
+  async function copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text)
+      alert('In Zwischenablage kopiert!')
+    } catch (err) {
+      console.error('Fehler beim Kopieren:', err)
+      // Fallback für ältere Browser
+      const textArea = document.createElement('textarea')
+      textArea.value = text
+      textArea.style.position = 'fixed'
+      textArea.style.opacity = '0'
+      document.body.appendChild(textArea)
+      textArea.select()
+      try {
+        document.execCommand('copy')
+        alert('In Zwischenablage kopiert!')
+      } catch (err) {
+        console.error('Fallback-Kopieren fehlgeschlagen:', err)
+        alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.')
+      }
+      document.body.removeChild(textArea)
+    }
+  }
 }
 
 useHead({