Update index.html

index.html

@@ -401,113 +401,127 @@
         </form>
     </div>
 </div>
-  <script>
-    // Complete JavaScript for Login and Capital Account Functionality
+ <script>
+    // The entire script is wrapped in a DOMContentLoaded listener.
+    // This ensures the script only runs AFTER the entire HTML page is loaded,
+    // which guarantees that all buttons and forms can be found.
+    document.addEventListener('DOMContentLoaded', () => {
+
+        // ▼▼▼▼▼ CRITICAL: CONFIGURE YOUR WORKER URL ▼▼▼▼▼
+        const WORKER_URL="https://partnership-ledger-api.aiagents.workers.dev/";
+        // ▲▲▲▲▲ CRITICAL: CONFIGURE YOUR WORKER URL ▲▲▲▲▲
+        
+        // Add the Turnstile script to the page dynamically
+        const turnstileScript = document.createElement('script');
+        turnstileScript.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+        turnstileScript.async = true;
+        turnstileScript.defer = true;
+        document.head.appendChild(turnstileScript);
 
-    // ▼▼▼▼▼ CRITICAL: CONFIGURE YOUR WORKER URL ▼▼▼▼▼
-    const WORKER_URL="https://partnership-ledger-api.aiagents.workers.dev/";
-    // ▲▲▲▲▲ CRITICAL: CONFIGURE YOUR WORKER URL ▲▲▲▲▲
-    
-    // Add the Turnstile script to the page dynamically
-    const turnstileScript = document.createElement('script');
-    turnstileScript.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
-    turnstileScript.async = true;
-    turnstileScript.defer = true;
-    document.head.appendChild(turnstileScript);
+        // Get all the elements we need to control
+        const loginModal = document.getElementById('loginModal');
+        const entryModal = document.getElementById('entryModal');
+        const addEntryBtn = document.getElementById('addEntryBtn');
+        const cancelBtn = document.getElementById('cancelBtn');
+        const loginForm = document.getElementById('loginForm');
+        const ledgerForm = document.getElementById('ledgerForm');
+        const welcomeDiv = document.getElementById('welcome');
+        const partnerNameSpan = document.getElementById('partnerName');
+        const logoutBtn = document.getElementById('logoutBtn');
+        const forceLogoutBtn = document.getElementById('forceLogoutBtn'); // Get the new button
+        let sessionToken = localStorage.getItem('accessToken');
 
-    // Get all the elements we need to control
-    const loginModal = document.getElementById('loginModal');
-    const entryModal = document.getElementById('entryModal');
-    const addEntryBtn = document.getElementById('addEntryBtn');
-    const cancelBtn = document.getElementById('cancelBtn');
-    const loginForm = document.getElementById('loginForm');
-    const ledgerForm = document.getElementById('ledgerForm');
-    const welcomeDiv = document.getElementById('welcome');
-    const partnerNameSpan = document.getElementById('partnerName');
-    const logoutBtn = document.getElementById('logoutBtn');
-    let sessionToken = localStorage.getItem('accessToken');
+        // This function checks if a user is already logged in on page load
+        const checkLoginState = () => {
+            if (sessionToken) {
+                if (loginModal) loginModal.style.display = 'none';
+                if (addEntryBtn) addEntryBtn.style.display = 'flex';
+                if (welcomeDiv) welcomeDiv.style.display = 'block';
+                if (partnerNameSpan) partnerNameSpan.textContent = localStorage.getItem('partnerName');
+            } else {
+                if (loginModal) loginModal.style.display = 'flex';
+                if (addEntryBtn) addEntryBtn.style.display = 'none';
+                if (welcomeDiv) welcomeDiv.style.display = 'none';
+            }
+        };
 
-    // This function checks if a user is already logged in on page load
-    const checkLoginState = () => {
-        if (sessionToken) {
-            loginModal.style.display = 'none';
-            addEntryBtn.style.display = 'flex'; // Show the button
-            welcomeDiv.style.display = 'block'; // Show the welcome message
-            partnerNameSpan.textContent = localStorage.getItem('partnerName');
-        } else {
-            loginModal.style.display = 'flex'; // Show the login form
-            addEntryBtn.style.display = 'none';
-            welcomeDiv.style.display = 'none';
+        // Event listener for the LOGIN form
+        if (loginForm) {
+            loginForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const formData = new FormData(loginForm);
+                const data = Object.fromEntries(formData.entries());
+                try {
+                    const response = await fetch(`${WORKER_URL}/api/login`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(data)
+                    });
+                    if (!response.ok) throw new Error('Login failed. Check your ID and try again.');
+                    
+                    const result = await response.json();
+                    localStorage.setItem('accessToken', result.accessToken);
+                    localStorage.setItem('partnerName', result.partnerName);
+                    sessionToken = result.accessToken;
+                    checkLoginState();
+                
+                } catch (error) {
+                    alert(error.message);
+                    try { turnstile.reset(); } catch (e) {}
+                }
+            });
         }
-    };
 
-    // Event listener for the LOGIN form
-    loginForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const formData = new FormData(loginForm);
-        const data = Object.fromEntries(formData.entries());
-        try {
-            const response = await fetch(`${WORKER_URL}/api/login`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data)
+        // Event listener for the LEDGER form
+        if(ledgerForm) {
+            ledgerForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const entryData = { date: document.getElementById('date').value, description: document.getElementById('description').value, ref: document.getElementById('ref').value, debit: document.getElementById('debit').value || 0, credit: document.getElementById('credit').value || 0 };
+                try {
+                    const response = await fetch(`${WORKER_URL}/api/ledger`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionToken}`},
+                        body: JSON.stringify(entryData),
+                    });
+                    if (!response.ok) throw new Error('Authorization failed. Please log in again.');
+                    
+                    const result = await response.json();
+                    alert(`${result.message}\nNew Balance: ${result.newBalance.toFixed(2)}`);
+                    entryModal.style.display = 'none';
+                    ledgerForm.reset();
+                } catch (error) {
+                    alert(error.message);
+                }
             });
-            if (!response.ok) throw new Error('Login failed. Check your ID and try again.');
-            
-            const result = await response.json();
-            localStorage.setItem('accessToken', result.accessToken);
-            localStorage.setItem('partnerName', result.partnerName);
-            sessionToken = result.accessToken;
-            checkLoginState(); // Re-check the state to show the button
+        }
         
-        } catch (error) {
-            alert(error.message);
-            try { turnstile.reset(); } catch (e) {}
+        // Event listeners for logout and modal buttons
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', () => {
+                localStorage.removeItem('accessToken');
+                localStorage.removeItem('partnerName');
+                sessionToken = null;
+                checkLoginState();
+            });
         }
-    });
+        
+        if (addEntryBtn) addEntryBtn.addEventListener('click', () => entryModal.style.display = 'flex');
+        if (cancelBtn) cancelBtn.addEventListener('click', () => { entryModal.style.display = 'none'; ledgerForm.reset(); });
 
-    // Event listener for the LEDGER form (the one in the floating button's modal)
-    ledgerForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const entryData = { date: document.getElementById('date').value, description: document.getElementById('description').value, ref: document.getElementById('ref').value, debit: document.getElementById('debit').value || 0, credit: document.getElementById('credit').value || 0 };
-        try {
-            const response = await fetch(`${WORKER_URL}/api/ledger`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionToken}`},
-                body: JSON.stringify(entryData),
+        // Event listener for our temporary Force Logout button
+        if(forceLogoutBtn) {
+            forceLogoutBtn.addEventListener('click', () => {
+                localStorage.removeItem('accessToken');
+                localStorage.removeItem('partnerName');
+                alert('Session data has been cleared. The page will now reload.');
+                window.location.reload();
             });
-            if (!response.ok) throw new Error('Authorization failed. Please log in again.');
-            
-            const result = await response.json();
-            alert(`${result.message}\nNew Balance: ${result.newBalance.toFixed(2)}`);
-            entryModal.style.display = 'none';
-            ledgerForm.reset();
-        } catch (error) {
-            alert(error.message);
         }
-    });
-    
-    // Event listeners for logout and modal buttons
-    logoutBtn.addEventListener('click', () => {
-        localStorage.removeItem('accessToken');
-        localStorage.removeItem('partnerName');
-        sessionToken = null;
-        checkLoginState(); // Re-check state to show the login form again
-    });
-
-    addEntryBtn.addEventListener('click', () => entryModal.style.display = 'flex');
-    cancelBtn.addEventListener('click', () => { entryModal.style.display = 'none'; ledgerForm.reset(); });
 
-    // Run the check when the page first loads
-    checkLoginState();
-    // Add logic for the temporary Force Logout button
-document.getElementById('forceLogoutBtn').addEventListener('click', () => {
-    localStorage.removeItem('accessToken');
-    localStorage.removeItem('partnerName');
-    alert('Session data has been cleared. The page will now reload.');
-    window.location.reload();
-});
-  </script>
+        // Run the initial check to see if we should show the login modal or the app
+        checkLoginState();
+    });
+ </script>
   <div class="modal-overlay" id="loginModal">
     <div class="modal-content">
         <h3>Partner Access</h3>