refactor(auth): replace fetch with JSONP for OTP request handling

The OTP request handling in the auth.js file was refactored to use JSONP instead of fetch to improve cross-origin compatibility. This change aligns with the updates made in the edit.gs file, which now supports JSONP responses. Additionally, debug logging was removed to clean up the code.

Author: Ali-Cheikh

Assets/js/auth.js

@@ -24,7 +24,6 @@ export function setupOtpInputs() {
 
 export async function requestOtp() {
   const email = DOM.loginEmail.value.trim();
-  console.log("Email value:", email);
 
   if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
     await showAlert('error', 'Invalid Email', 'Please enter a valid email address');
@@ -34,37 +33,44 @@ export async function requestOtp() {
   try {
     DOM.requestOtpBtn.disabled = true;
     DOM.requestOtpBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
-    console.log("Request URL:", `${CONFIG.googleScriptUrl}?action=request_otp&email=${encodeURIComponent(email)}`);
-    const formData = new FormData();
-    formData.append('action', 'request_otp');
-    formData.append('email', email);
 
-    const response = await fetch(CONFIG.googleScriptUrl, {
-      method: 'POST',
-      body: formData
-    });
-    
-    const data = await response.json();
-    console.log("Response data:", data);
-    
-    if (data.status === 'success') {
-      sessionStorage.setItem(OTP_STORAGE_KEY, JSON.stringify({
-        email,
-        expiry: Date.now() + (CONFIG.otpExpiryMinutes * 60000)
-      }));
+    // Use JSONP approach instead of fetch
+    return new Promise((resolve, reject) => {
+      const callbackName = 'jsonpCallback_' + Math.round(Math.random() * 1000000);
+      window[callbackName] = function(data) {
+        document.body.removeChild(script);
+        delete window[callbackName];
+        
+        if (data.status === 'success') {
+          sessionStorage.setItem(OTP_STORAGE_KEY, JSON.stringify({
+            email,
+            expiry: Date.now() + (CONFIG.otpExpiryMinutes * 60000)
+          }));
+          
+          state.currentUser.email = email;
+          DOM.otpEmailDisplay.textContent = maskEmail(email);
+          DOM.emailForm.classList.add('hidden');
+          DOM.otpForm.classList.remove('hidden');
+          document.querySelector('.otp-inputs input').focus();
+          startOtpCountdown(CONFIG.otpExpiryMinutes * 60);
+          resolve(true);
+        } else {
+          reject(new Error(data.message || 'Failed to send OTP'));
+        }
+      };
 
-      state.currentUser.email = email;
-      DOM.otpEmailDisplay.textContent = maskEmail(email);
-      DOM.emailForm.classList.add('hidden');
-      DOM.otpForm.classList.remove('hidden');
-      document.querySelector('.otp-inputs input').focus();
-      startOtpCountdown(CONFIG.otpExpiryMinutes * 60);
-      return true;
-    }
-    throw new Error(data.message || 'Failed to send OTP');
+      const script = document.createElement('script');
+      script.src = `${CONFIG.googleScriptUrl}?action=request_otp&email=${encodeURIComponent(email)}&callback=${callbackName}`;
+      script.onerror = () => {
+        document.body.removeChild(script);
+        delete window[callbackName];
+        reject(new Error('Failed to connect to server'));
+      };
+      
+      document.body.appendChild(script);
+    });
   } catch (error) {
     await showAlert('error', 'Error', error.message);
-    console.error("Error details:", error);
     return false;
   } finally {
     DOM.requestOtpBtn.disabled = false;

Assets/js/config.js

@@ -1,6 +1,6 @@
 // Configuration constants
 export const CONFIG = {
-  googleScriptUrl: 'https://script.google.com/macros/s/AKfycbyTSxPXhQllvSdPPbV_olcsHqqZDUL-dWlteqWkHqavwWA3Zv-Zz0gI7x1CBCjVAwOj/exec', // version new edit 0.00.2
+  googleScriptUrl: 'https://script.google.com/macros/s/AKfycbyTSxPXhQllvSdPPbV_olcsHqqZDUL-dWlteqWkHqavwWA3Zv-Zz0gI7x1CBCjVAwOj/exec', // version new edit 0.01
   sessionExpiryHours: 1, // Matches GAS session duration
   otpExpiryMinutes: 5,   // Matches GAS OTP duration
 

edit.gs

@@ -12,31 +12,28 @@ const COLUMNS = {
   STYLE: 8,
   PROFILE_PIC: 9
 };
+
 function doGet(e) {
   try {
-    // Debug logging
-    console.log('Request parameters raw:', e);
-    console.log('Parameter action:', e.parameter.action);
-    console.log('Parameter email:', e.parameter.email);
+    console.log('Request parameters:', JSON.stringify(e.parameter));
 
     if (!e.parameter || !e.parameter.action) {
-      return jsonResponse({
+      return jsonpResponse({
         status: 'error',
         message: 'Missing action parameter'
-      });
+      }, e.parameter.callback);
     }
 
     const action = e.parameter.action;
     let response;
 
     switch (action) {
       case 'request_otp':
-        // Fix: Check if email exists in parameters
-        if (!e.parameter.email || e.parameter.email.trim() === '') {
-          return jsonResponse({
+        if (!e.parameter.email) {
+          return jsonpResponse({
             status: 'error',
-            message: 'Missing required fields: email'
-          });
+            message: 'Missing required fields'
+          }, e.parameter.callback);
         }
         response = handleOtpRequest(e.parameter);
         break;
@@ -53,19 +50,26 @@ function doGet(e) {
         throw new Error('Invalid action');
     }
 
-    return jsonResponse(response);
+    return jsonpResponse(response, e.parameter.callback);
   } catch (error) {
     console.error('Error:', error);
-    return jsonResponse({
+    return jsonpResponse({
       status: 'error',
       message: error.message
-    });
+    }, e.parameter.callback);
   }
 }
 
-function jsonResponse(data) {
-  return ContentService.createTextOutput(JSON.stringify(data))
-    .setMimeType(ContentService.MimeType.JSON);
+function jsonpResponse(data, callback) {
+  if (callback) {
+    // JSONP response
+    return ContentService.createTextOutput(callback + '(' + JSON.stringify(data) + ')')
+      .setMimeType(ContentService.MimeType.JAVASCRIPT);
+  } else {
+    // Regular JSON response
+    return ContentService.createTextOutput(JSON.stringify(data))
+      .setMimeType(ContentService.MimeType.JSON);
+  }
 }
 
 // --- OTP Request ---