refactor: Remove manual authentication button, improve auto-flow

**Motivations :**
- Remove unnecessary 'Authenticate with Browser' button since authentication is automatic
- Simplify UI by removing manual interaction requirement
- Add better logging for relay connection debugging

**Modifications :**
- Removed mainPairingButton from home.html template
- Simplified setupMainPairing() to not handle button events
- Cleaned up handleMainPairing() to remove button state management
- Added relay connection success logging in router.ts

**Pages affectées :**
- src/pages/home/home.html - Removed authentication button
- src/pages/home/home.ts - Simplified authentication flow
- src/router.ts - Added relay connection logging
This commit is contained in:
NicolasCantu 2025-10-23 21:09:34 +02:00
parent 73b8d722c2
commit 3260ea9695
3 changed files with 8 additions and 32 deletions

View File

@ -15,8 +15,6 @@
</div>
</div>
<button id="mainPairingButton" class="primary-btn">Authenticate with Browser</button>
<div class="account-actions">
<button id="deleteAccountButton" class="danger-btn">🗑️ Delete Account</button>
</div>

View File

@ -524,34 +524,21 @@ export function setupIframePairingButtons() {
}
}
// Main Pairing Interface
// Main Pairing Interface - Auto-triggered, no button needed
export function setupMainPairing(): void {
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainPairingButton = container.querySelector('#mainPairingButton') as HTMLButtonElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement;
if (mainPairingButton) {
mainPairingButton.addEventListener('click', async () => {
await handleMainPairing();
});
}
// No button setup needed since authentication is automatic
console.log('🔐 Main pairing setup - authentication will be automatic');
}
async function handleMainPairing(): Promise<void> {
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement;
const mainPairingButton = container.querySelector('#mainPairingButton') as HTMLButtonElement;
try {
// Update UI
if (mainStatus) {
mainStatus.innerHTML = '<div class="spinner"></div><span>Authenticating with browser...</span>';
}
if (mainPairingButton) {
mainPairingButton.disabled = true;
mainPairingButton.textContent = 'Authenticating...';
}
// Always trigger WebAuthn flow for authentication
console.log('🔐 Triggering WebAuthn authentication...');
@ -594,23 +581,12 @@ async function handleMainPairing(): Promise<void> {
// Now proceed with pairing process
await prepareAndSendPairingTx();
// Re-enable button
if (mainPairingButton) {
mainPairingButton.disabled = false;
mainPairingButton.textContent = 'Authenticate with Browser';
}
} catch (error) {
console.error('Pairing failed:', error);
if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed</span>';
}
if (mainPairingButton) {
mainPairingButton.disabled = false;
mainPairingButton.textContent = 'Authenticate with Browser';
}
}
}

View File

@ -55,7 +55,7 @@ async function handleLocation(path: string) {
'width: 100vw; height: 100vh; position: relative; grid-row: 2;'
);
if (container) container.appendChild(accountComponent);
// Initialize the home page after component is added to DOM
console.log('🏠 Initializing home page...');
try {
@ -164,8 +164,10 @@ export async function init(): Promise<void> {
try {
console.log('🌐 Connecting to relays...');
await services.connectAllRelays();
console.log('✅ Relays connected successfully');
} catch (error) {
console.warn('⚠️ Failed to connect to some relays:', error);
console.log('🔄 Continuing despite relay connection issues...');
}
// We register all the event listeners if we run in an iframe