From 4ff2965b49d8fec40a968f50886f8869e3cecf25 Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Fri, 7 Mar 2025 16:44:11 +0100
Subject: [PATCH] [WIP] Add an account creation modal

---
 src/components/modal/creation-modal.html | 14 +++++++
 src/services/modal.service.ts            | 50 ++++++++++++++++--------
 2 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 src/components/modal/creation-modal.html

diff --git a/src/components/modal/creation-modal.html b/src/components/modal/creation-modal.html
new file mode 100644
index 0000000..231ac87
--- /dev/null
+++ b/src/components/modal/creation-modal.html
@@ -0,0 +1,14 @@
+<div id="creation-modal" class="modal">
+    <div class="modal-content">
+      <div class="modal-title">Login</div>
+      <div class="message">
+        Do you want to create a 4NK member?<br />
+        Attempting to create a member with address <br />
+        <strong>{{device1}}</strong> <br />
+      </div>
+      <div class="confirmation-box">
+        <a class="btn confirmation-btn" onclick="confirm()">Confirm</a>
+        <a class="btn refusal-btn" onclick="closeConfirmationModal()">Refuse</a>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/services/modal.service.ts b/src/services/modal.service.ts
index a6560e1..e331549 100755
--- a/src/services/modal.service.ts
+++ b/src/services/modal.service.ts
@@ -14,6 +14,7 @@ export default class ModalService {
   private processId: string | null = null;
   private constructor() {}
   private paired_addresses: string[] = [];
+  private modal: HTMLElement | null = null;
 
   // Method to access the singleton instance of Services
   public static async getInstance(): Promise<ModalService> {
@@ -54,6 +55,21 @@ export default class ModalService {
     }
   }
 
+  async injectCreationModal(members: any[]) {
+    const container = document.querySelector('#containerId');
+    if (container) {
+      let html = await fetch('/src/components/modal/creation-modal.html').then((res) => res.text());
+      html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
+      container.innerHTML += html;
+
+      // Dynamically load the header JS
+      const script = document.createElement('script');
+      script.src = '/src/components/modal/confirmation-modal.ts';
+      script.type = 'module';
+      document.head.appendChild(script);
+    }
+  }
+
   // Device 1 wait Device 2
   async injectWaitingModal() {
     const container = document.querySelector('#containerId');
@@ -106,6 +122,7 @@ export default class ModalService {
       throw new Error('Must have exactly 1 member');
     }
 
+    console.log("MEMBERS:", members);
     // We take all the addresses except our own
     const service = await Services.getInstance();
     const localAddress = await service.getDeviceAddress();
@@ -118,20 +135,24 @@ export default class ModalService {
     }
     this.processId = processId;
     this.stateId = stateId;
-    await this.injectModal(members);
-    const modal = document.getElementById('modal');
-    if (modal) modal.style.display = 'flex';
-    // const newScript = document.createElement('script');
-    // newScript.setAttribute('type', 'module');
-    // newScript.textContent = confirmationModalScript;
-    // document.head.appendChild(newScript).parentNode?.removeChild(newScript);
 
-    // Add correct text
+
+    if (members.sp_addresses.length === 1) {
+      await this.injectCreationModal(members);
+      this.modal = document.getElementById('creation-modal');
+      console.log("LENGTH:", members.sp_addresses.length);
+    } else {
+      await this.injectModal(members);
+      this.modal = document.getElementById('modal');
+      console.log("LENGTH:", members.sp_addresses.length);
+    }
+
+    
+    if (this.modal) this.modal.style.display = 'flex';
 
     // Close modal when clicking outside of it
     window.onclick = (event) => {
-      const modal = document.getElementById('modal');
-      if (event.target === modal) {
+      if (event.target === this.modal) {
         this.closeConfirmationModal();
       }
     };
@@ -140,14 +161,12 @@ export default class ModalService {
     console.log('=============> Confirm Login');
   }
   async closeLoginModal() {
-    const modal = document.getElementById('login-modal');
-    if (modal) modal.style.display = 'none';
+    if (this.modal) this.modal.style.display = 'none';
   }
 
   async confirmPairing() {
     const service = await Services.getInstance();
-    const modal = document.getElementById('modal');
-    if (modal) modal.style.display = 'none';
+    if (this.modal) this.modal.style.display = 'none';
 
     if (service.device1) {
       console.log("Device 1 detected");
@@ -236,7 +255,6 @@ export default class ModalService {
   async closeConfirmationModal() {
     const service = await Services.getInstance();
     await service.unpairDevice();
-    const modal = document.getElementById('modal');
-    if (modal) modal.style.display = 'none';
+    if (this.modal) this.modal.style.display = 'none';
   }
 }