Updated the home page

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();
+    try {
-    }, 500);
+      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')) {

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,19 +20,15 @@
     <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>
+      <button id="scan-btn" onclick="scanDevice()">Scan</button> <div class="qr-code-scanner">
-      <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>

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 { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji } from '../../utils/sp-address.utils';
-import { getCorrectDOM } from '../../utils/html.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;
+ * Fonction d'initialisation principale.
-  container.querySelectorAll('.tab').forEach((tab) => {
+ * 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(container);
-  await populateMemberSelect();
 }
 
-//// Modal
+/**
-export async function openModal(myAddress: string, receiverAddress: string) {
+ * Remplit le <select> des membres.
-  const router = await Routing.getInstance();
+ * Doit utiliser le 'container' (ShadowRoot) pour trouver l'élément.
-  router.openLoginModal(myAddress, receiverAddress);
+ */
-}
+async function populateMemberSelect(container: ShadowRoot) {
-
-// 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;
   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) {
@@ -77,11 +66,6 @@ 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');
@@ -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);
+}