4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve WebAuthn button visibility and add debug logging

Browse Source 
**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
This commit is contained in:
NicolasCantu 2025-10-23 22:02:35 +02:00
parent 4f8e43ed87
commit 9b3af0b5ea
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/home/home.ts
View File

@ -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;
}