Update index.html

index.html

@@ -402,75 +402,104 @@
     </div>
 </div>
   <script>
-    // JavaScript for Capital Account Functionality
+    // Complete JavaScript for Login and Capital Account Functionality
 
-    // ▼▼▼▼▼ CRITICAL STEP: CONFIGURE YOUR WORKER URL ▼▼▼▼▼
+    // ▼▼▼▼▼ CRITICAL: CONFIGURE YOUR WORKER URL ▼▼▼▼▼
     const WORKER_URL="https://partnership-ledger-api.aiagents.workers.dev/";
-    // ▲▲▲▲▲ CRITICAL STEP: CONFIGURE YOUR WORKER URL ▲▲▲▲▲
-
+    // ▲▲▲▲▲ 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');
-
-    // NOTE: This assumes the user is already logged in and a JWT is in localStorage.
-    // The floating button will only appear if a session token exists.
+    const welcomeDiv = document.getElementById('welcome');
+    const partnerNameSpan = document.getElementById('partnerName');
+    const logoutBtn = document.getElementById('logoutBtn');
     let sessionToken = localStorage.getItem('accessToken');
-    if (sessionToken) {
-        addEntryBtn.style.display = 'flex';
-    }
-    
-    addEntryBtn.addEventListener('click', () => {
-        entryModal.style.display = 'flex';
-    });
 
-    cancelBtn.addEventListener('click', () => {
-        entryModal.style.display = 'none';
-        ledgerForm.reset();
-    });
+    // 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';
+        }
+    };
 
-    ledgerForm.addEventListener('submit', async (e) => {
+    // Event listener for the LOGIN form
+    loginForm.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,
-        };
-
-        // Re-check for session token before submitting
-        sessionToken = localStorage.getItem('accessToken');
-        if (!sessionToken) {
-            alert('Your session has expired. Please log in again.');
-            return;
+        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(); // Re-check the state to show the button
+        
+        } catch (error) {
+            alert(error.message);
+            try { turnstile.reset(); } catch (e) {}
         }
+    });
 
+    // 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}`
-                },
+                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionToken}`},
                 body: JSON.stringify(entryData),
             });
+            if (!response.ok) throw new Error('Authorization failed. Please log in again.');
             
-            if (!response.ok) {
-                // Try to get error message from backend
-                const errorResult = await response.json();
-                throw new Error(errorResult.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();
   </script>
   <div class="modal-overlay" id="loginModal">
     <div class="modal-content">