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 an account :
-
-
-
-
-
-
Add a device for an existing member :
-
-

-
-
-
Or
-
Chose a member :
-
+
\ No newline at end of file
+
+
+
+
+
+
Create Account / New Session
+
+
+
+
+
Create an account
+
Add a device for an existing memeber
+
+
+
+
+
+
Create an account :
+
+
+
+
+
+
Add a device for an existing member :
+
+

+
+
+
Or
+
Chose a member :
+
+
+
+
+
+
+
+
\ 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().');
}
/**