From c09fa6f2f8f2307a6bdcd32adff118253e738abd Mon Sep 17 00:00:00 2001 From: NicolasCantu Date: Wed, 12 Nov 2025 12:30:19 +0100 Subject: [PATCH] Add beautiful loader step for the connexion with the iframe --- src/pages/home/home.html | 143 ++++++++++++++++++++++++++++++--------- src/pages/home/home.ts | 88 ++++++++++++++++++++++-- 2 files changed, 193 insertions(+), 38 deletions(-) diff --git a/src/pages/home/home.html b/src/pages/home/home.html index ee5e0c4..d3c2f20 100755 --- a/src/pages/home/home.html +++ b/src/pages/home/home.html @@ -1,35 +1,112 @@ -
-

Create Account / New Session

-
- -
-
-
Create an account
-
Add a device for an existing memeber
-
-
- -
-
-
Create an account :
-
- -
-
-
-
Add a device for an existing member :
-
- QR Code -
-
-
-
-
-

Or

-
Chose a member :
- +
+
+ - +
+

Initialisation...

+
+
-
\ No newline at end of file +
+ + + + \ No newline at end of file diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index fd1891d..7d9bb26 100755 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -3,11 +3,37 @@ import Routing from '../../services/modal.service'; import Services from '../../services/service'; import { addSubscription } from '../../utils/subscription.utils'; -import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji } from '../../utils/sp-address.utils'; +import { displayEmojis, generateQRCode, generateCreateBtn, prepareAndSendPairingTx addressToEmoji } from '../../utils/sp-address.utils'; import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component'; export { QrScannerComponent }; +function addLoaderStep(container: ShadowRoot, text: string) { + // 1. Rendre l'ancienne étape "inactive" + const currentStep = container.querySelector('.loader-step.active') as HTMLParagraphElement; + if (currentStep) { + currentStep.classList.remove('active'); + } + + // 2. Trouver le conteneur + const stepsContainer = container.querySelector('#loader-steps-container') as HTMLDivElement; + if (stepsContainer) { + // 3. Créer et ajouter la nouvelle étape "active" + const newStep = document.createElement('p'); + newStep.className = 'loader-step active'; + newStep.textContent = text; + stepsContainer.appendChild(newStep); + } +} + +function updateLoaderText(container: ShadowRoot, text: string) { + const loaderText = container.querySelector('#loader-text') as HTMLParagraphElement; + if (loaderText) { + loaderText.textContent = text; + } +} + +const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); /** * Fonction d'initialisation principale. * Elle est appelée par home-component.ts et reçoit le ShadowRoot. @@ -19,6 +45,9 @@ export async function initHomePage(container: ShadowRoot): Promise { return; } + const loaderDiv = container.querySelector('#iframe-loader') as HTMLDivElement; + const mainContentDiv = container.querySelector('#main-content') as HTMLDivElement; + const tabs = container.querySelectorAll('.tab'); tabs.forEach((tab) => { @@ -31,11 +60,60 @@ export async function initHomePage(container: ShadowRoot): Promise { }); const service = await Services.getInstance(); - const spAddress = await service.getDeviceAddress(); - generateCreateBtn(); - displayEmojis(spAddress); - await populateMemberSelect(container); + // --- Début du flux de chargement --- + try { + // 'Initialisation...' est déjà dans le HTML + + await delay(500); // Délai pour que "Initialisation..." soit visible + addLoaderStep(container, "Initialisation des services..."); + const service = await Services.getInstance(); + + await delay(700); + addLoaderStep(container, "Vérification de l'appareil..."); + const currentDevice = await service.getDeviceFromDatabase(); + const pairingId = currentDevice?.pairing_process_commitment || null; + + if (pairingId) { + await delay(300); + addLoaderStep(container, "Appairage existant trouvé."); + service.setProcessId(pairingId); + } else { + await delay(300); + addLoaderStep(container, "Création d'un appairage sécurisé..."); + await prepareAndSendPairingTx(); + addLoaderStep(container, "Appairage créé avec succès."); + } + + await delay(500); + addLoaderStep(container, "Finalisation de la connexion..."); + + container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active')); + container.querySelector('[data-tab="tab2"]')?.classList.add('active'); + container.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active')); + container.querySelector('#tab2')?.classList.add('active'); + + const spAddress = await service.getDeviceAddress(); + generateCreateBtn(); + displayEmojis(spAddress); + await populateMemberSelect(container); + + await delay(1000); + + } catch (e: any) { + console.error('[home.ts] Échec de la logique auto-pairing:', e); + addLoaderStep(container, `Erreur: ${e.message}`); + // En cas d'erreur, on ne cache pas le loader + return; + } + + // --- Cacher le loader et afficher le contenu --- + // (Votre AuthModal le fermera si vite que ce ne sera pas visible, + // mais c'est une bonne pratique au cas où) + if (loaderDiv) loaderDiv.style.display = 'none'; + if (mainContentDiv) mainContentDiv.style.display = 'block'; + + console.log('[home.ts] Init terminée. L\'iframe est prête pour le requestLink().'); } /**