From 9b3af0b5ea141447a3cd80755b5072b3cf895828 Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Thu, 23 Oct 2025 22:02:35 +0200
Subject: [PATCH] fix: improve WebAuthn button visibility and add debug logging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Motivations :**
- WebAuthn window not appearing due to button visibility issues
- Add debug logging to troubleshoot authentication flow
- Ensure authentication button is clearly visible to user
- Improve user experience with better styling and feedback

**Modifications :**
- Added inline styles to authentication button for better visibility
- Added comprehensive debug logging to track button creation and click events
- Improved button styling with centered layout and clear visual hierarchy
- Added error handling for missing DOM elements
- Enhanced user feedback with clear instructions

**Pages affectées :**
- src/pages/home/home.ts: Enhanced button visibility and debug logging
---
 src/pages/home/home.ts | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index 567184e..151e500 100755
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -548,20 +548,45 @@ async function handleMainPairing(): Promise<void> {
 
   try {
     // Show authentication button that requires user interaction
+    console.log('🔍 DEBUG: mainStatus element:', mainStatus);
     if (mainStatus) {
+      console.log('🔍 DEBUG: Setting up authentication button...');
       mainStatus.innerHTML = `
-        <div class="auth-container">
-          <p>🔐 Secure authentication required</p>
-          <button id="authButton" class="auth-button">🔐 Authenticate with Browser</button>
-          <p class="auth-hint">Click the button above to authenticate with your browser</p>
+        <div class="auth-container" style="text-align: center; padding: 20px;">
+          <p style="font-size: 18px; margin-bottom: 20px; color: #333;">🔐 Secure authentication required</p>
+          <button id="authButton" class="auth-button" style="
+            background: linear-gradient(135deg, #007bff, #0056b3);
+            color: white;
+            border: none;
+            padding: 16px 32px;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+            margin: 20px 0;
+            min-width: 250px;
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+          ">🔐 Authenticate with Browser</button>
+          <p class="auth-hint" style="color: #6c757d; font-size: 14px; margin-top: 10px; font-style: italic;">Click the button above to authenticate with your browser</p>
         </div>
       `;
+      console.log('🔍 DEBUG: Authentication button HTML set');
+    } else {
+      console.error('❌ mainStatus element not found!');
+      throw new Error('Main status element not found');
     }
 
     // Wait for user to click the authentication button
     await new Promise<void>((resolve, reject) => {
+      console.log('🔍 DEBUG: Looking for authButton...');
       const authButton = document.getElementById('authButton') as HTMLButtonElement;
+      console.log('🔍 DEBUG: authButton found:', authButton);
       if (!authButton) {
+        console.error('❌ Authentication button not found in DOM');
         reject(new Error('Authentication button not found'));
         return;
       }