From 465a4a3c1869883d0ed173f43347afb88d9cedd9 Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Tue, 4 Nov 2025 23:03:02 +0100
Subject: [PATCH] Updated the home page

---
 src/pages/home/home-component.ts |  40 ++++++------
 src/pages/home/home.html         |  13 +---
 src/pages/home/home.ts           | 102 +++++++++++++++++--------------
 3 files changed, 80 insertions(+), 75 deletions(-)

diff --git a/src/pages/home/home-component.ts b/src/pages/home/home-component.ts
index b38e1a5..d7af469 100644
--- a/src/pages/home/home-component.ts
+++ b/src/pages/home/home-component.ts
@@ -1,5 +1,6 @@
+// src/pages/home/home-component.ts
+
 import loginHtml from './home.html?raw';
-import loginScript from './home.ts?raw';
 import loginCss from '../../4nk.css?raw';
 import { initHomePage } from './home';
 
@@ -11,11 +12,26 @@ export class LoginComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    console.log('CALLBACK LOGIN PAGE');
     this.render();
-    setTimeout(() => {
-      initHomePage();
-    }, 500);
+
+    try {
+      if (this.shadowRoot) {
+        initHomePage(this.shadowRoot);
+      } else {
+        console.error("[LoginComponent] 💥 ShadowRoot est nul. Impossible d'initialiser.");
+      }
+    } catch (e) {
+      console.error("[LoginComponent] 💥 Échec de l'initHomePage:", e);
+    }
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = `
+        <style>${loginCss}</style>
+        ${loginHtml} 
+      `;
+    }
   }
 
   set callback(fn) {
@@ -25,23 +41,9 @@ export class LoginComponent extends HTMLElement {
       console.error('Callback is not a function');
     }
   }
-
   get callback() {
     return this._callback;
   }
-
-  render() {
-    if (this.shadowRoot)
-      this.shadowRoot.innerHTML = `
-            <style>
-            ${loginCss}
-            </style>${loginHtml}
-            <script type="module">
-            ${loginScript}
-            </scipt>
-            
-        `;
-  }
 }
 
 if (!customElements.get('login-4nk-component')) {
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
index c9e87d1..ee5e0c4 100755
--- a/src/pages/home/home.html
+++ b/src/pages/home/home.html
@@ -13,9 +13,6 @@
   <div id="tab1" class="card tab-content active">
     <div class="card-description">Create an account :</div>
     <div class="pairing-request"></div>
-    <!-- <div class="card-image qr-code">
-      <img src="assets/qr_code.png" alt="QR Code" width="150" height="150" />
-    </div> -->
     <button id="createButton" class="create-btn"></button>
   </div>
   <div class="separator"></div>
@@ -23,20 +20,16 @@
     <div class="card-description">Add a device for an existing member :</div>
     <div class="card-image camera-card">
       <img id="scanner" src="assets/camera.jpg" alt="QR Code" width="150" height="150" />
-      <button id="scan-btn" onclick="scanDevice()">Scan</button>
-      <div class="qr-code-scanner">
+      <button id="scan-btn" onclick="scanDevice()">Scan</button> <div class="qr-code-scanner">
         <div id="qr-reader" style="width: 200px; display: contents"></div>
         <div id="qr-reader-results"></div>
       </div>
     </div>
     <p>Or</p>
-    <!-- <input type="text" id="addressInput" placeholder="Paste address" />
-    <div id="emoji-display-2"></div> -->
     <div class="card-description">Chose a member :</div>
     <select name="memberSelect" id="memberSelect" size="5" class="custom-select">
-      <!-- Options -->
-    </select>
+      </select>
     
     <button id="okButton" style="display: none">OK</button>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index eeedce5..fd1891d 100755
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -1,20 +1,30 @@
+// src/pages/home/home.ts
+
 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 { getCorrectDOM } from '../../utils/html.utils';
+import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji } from '../../utils/sp-address.utils';
 import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
-import { navigate, registerAllListeners } from '../../router';
 
 export { QrScannerComponent };
-export async function initHomePage(): Promise<void> {
-  console.log('INIT-HOME');
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
-  container.querySelectorAll('.tab').forEach((tab) => {
+
+/**
+ * Fonction d'initialisation principale.
+ * Elle est appelée par home-component.ts et reçoit le ShadowRoot.
+ */
+export async function initHomePage(container: ShadowRoot): Promise<void> {
+
+  if (!container) {
+    console.error('[home.ts] 💥 ERREUR: Le shadowRoot est nul !');
+    return;
+  }
+
+  const tabs = container.querySelectorAll('.tab');
+
+  tabs.forEach((tab) => {
     addSubscription(tab, 'click', () => {
       container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
       tab.classList.add('active');
-
       container.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active'));
       container.querySelector(`#${tab.getAttribute('data-tab') as string}`)?.classList.add('active');
     });
@@ -22,41 +32,21 @@ export async function initHomePage(): Promise<void> {
 
   const service = await Services.getInstance();
   const spAddress = await service.getDeviceAddress();
-  // generateQRCode(spAddress);
   generateCreateBtn();
   displayEmojis(spAddress);
-  
-  // Add this line to populate the select when the page loads
-  await populateMemberSelect();
+
+  await populateMemberSelect(container);
 }
 
-//// Modal
-export async function openModal(myAddress: string, receiverAddress: string) {
-  const router = await Routing.getInstance();
-  router.openLoginModal(myAddress, receiverAddress);
-}
-
-// const service =  await Services.getInstance()
-// service.setNotification()
-
-function scanDevice() {
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
-  const scannerImg = container.querySelector('#scanner') as HTMLElement;
-  if (scannerImg) scannerImg.style.display = 'none';
-  const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
-  if (scannerQrCode) scannerQrCode.style.display = 'block';
-  const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
-  if (scanButton) scanButton.style.display = 'none';
-  const reader = container?.querySelector('#qr-reader');
-  if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
-}
-
-async function populateMemberSelect() {
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
+/**
+ * Remplit le <select> des membres.
+ * Doit utiliser le 'container' (ShadowRoot) pour trouver l'élément.
+ */
+async function populateMemberSelect(container: ShadowRoot) {
   const memberSelect = container.querySelector('#memberSelect') as HTMLSelectElement;
-  
+
   if (!memberSelect) {
-    console.error('Could not find memberSelect element');
+    console.error('[home.ts] Impossible de trouver #memberSelect dans le shadowRoot.');
     return;
   }
 
@@ -65,8 +55,7 @@ async function populateMemberSelect() {
 
   for (const [processId, member] of Object.entries(members)) {
     const process = await service.getProcess(processId);
-    let memberPublicName;
-    
+    let memberPublicName = 'Unnamed Member';
     if (process) {
       const publicMemberData = service.getPublicData(process);
       if (publicMemberData) {
@@ -76,14 +65,9 @@ async function populateMemberSelect() {
         }
       }
     }
-    
-    if (!memberPublicName) {
-      memberPublicName = 'Unnamed Member';
-    }
 
-    // Récupérer les emojis pour ce processId
     const emojis = await addressToEmoji(processId);
-    
+
     const option = document.createElement('option');
     option.value = processId;
     option.textContent = `${memberPublicName} (${emojis})`;
@@ -91,6 +75,32 @@ async function populateMemberSelect() {
   }
 }
 
-(window as any).populateMemberSelect = populateMemberSelect;
+/**
+ * Fonction appelée par le 'onclick="scanDevice()"' dans le HTML.
+ * Doit être attachée à 'window' pour être globale.
+ */
+function scanDevice() {
+  const hostElement = document.querySelector('login-4nk-component');
+  const container = hostElement?.shadowRoot;
+
+  if (!container) {
+    console.error('[home.ts] scanDevice: Impossible de trouver le shadowRoot !');
+    return;
+  }
+
+  const scannerImg = container.querySelector('#scanner') as HTMLElement;
+  if (scannerImg) scannerImg.style.display = 'none';
+  const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
+  if (scannerQrCode) scannerQrCode.style.display = 'block';
+  const scanButton = container.querySelector('#scan-btn') as HTMLElement;
+  if (scanButton) scanButton.style.display = 'none';
+  const reader = container.querySelector('#qr-reader');
+  if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
+}
 
 (window as any).scanDevice = scanDevice;
+
+export async function openModal(myAddress: string, receiverAddress: string) {
+  const router = await Routing.getInstance();
+  router.openLoginModal(myAddress, receiverAddress);
+}