Update script.js

script.js

@@ -34,49 +34,14 @@ document.addEventListener("DOMContentLoaded", () => {
   chatSection.appendChild(commentsContainer);
   chatSection.appendChild(commentInput);
 
-  // ------------------
-  // CSS for Immersion
-  // ------------------
-  document.body.style.margin = "0";
-  document.body.style.height = "100vh";
-  document.body.style.overflow = "hidden";
-  document.documentElement.style.height = "100%";
-  chatSection.style.height = "100%";
-  aiAppsSection.style.height = "100%";
-  chatContainer.style.height = "calc(100% - 50px)";
-  chatContainer.style.overflowY = "auto";
-  commentsContainer.style.overflowY = "auto";
-
-  // Custom cursor
-  const cursor = document.createElement("style");
-  cursor.innerHTML = `
-    * { cursor: url('https://cdn-icons-png.flaticon.com/512/32/32339.png'), auto !important; }
-  `;
-  document.head.appendChild(cursor);
-
-  // Custom favicon/logo
-  const favicon = document.createElement("link");
-  favicon.rel = "icon";
-  favicon.href = "https://cdn-icons-png.flaticon.com/512/4712/4712301.png";
-  document.head.appendChild(favicon);
-
   // ------------------
   // Helper Functions
   // ------------------
   function addMessage(content, sender) {
     const bubble = document.createElement("div");
     bubble.className = "chat-bubble " + sender;
-    bubble.style.margin = "5px";
-    bubble.style.padding = "10px";
-    bubble.style.borderRadius = "12px";
-    bubble.style.maxWidth = "70%";
-    bubble.style.wordWrap = "break-word";
-    bubble.style.animation = "fadeIn 0.3s ease-out";
-
     bubble.textContent = (sender === "user" ? userEmoji : aiEmoji) + " " + content;
-    if (sender === "ai") chatContainer.appendChild(bubble);
-    else chatContainer.appendChild(bubble);
-
+    chatContainer.appendChild(bubble);
     chatContainer.scrollTop = chatContainer.scrollHeight;
   }
 
@@ -95,54 +60,111 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   // ------------------
-  // AI Thinking Animation
+  // Email Verification
   // ------------------
-  function showTyping() {
-    typing.style.display = "block";
-    typing.textContent = aiEmoji + " AI thinking";
-    let dots = 0;
-    typing._interval = setInterval(() => {
-      dots = (dots + 1) % 4;
-      typing.textContent = aiEmoji + " AI thinking" + ".".repeat(dots);
-    }, 500);
-  }
-
-  function hideTyping() {
-    typing.style.display = "none";
-    typing.textContent = "";
-    clearInterval(typing._interval);
+  async function handleEmailVerification(email) {
+    const code = prompt("Enter the verification code sent to your email:");
+    if (!code) return alert("Verification code required.");
+    try {
+      const res = await fetch("/api/verify_email", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, code })
+      });
+      const data = await res.json();
+      if (data.error) alert("❌ " + data.error);
+      else alert("✅ " + data.message);
+    } catch (err) {
+      alert("❌ Could not verify email.");
+      console.error(err);
+    }
   }
 
   // ------------------
-  // Fullscreen helpers
+  // Check Session
   // ------------------
-  function requestFullscreen() {
-    if (document.fullscreenEnabled && !document.fullscreenElement) {
-      document.documentElement.requestFullscreen().catch(() => {});
+  async function checkSession() {
+    if (!token) return false;
+    try {
+      const res = await fetch("/api/session", { headers: authHeaders() });
+      const data = await res.json();
+      if (data.user) {
+        loginForm.style.display = "none";
+        signupForm.style.display = "none";
+        chatSection.style.display = "block";
+        aiAppsSection.style.display = "block";
+        loadComments();
+        setTimeout(() => document.documentElement.requestFullscreen?.(), 500);
+        return true;
+      } else {
+        localStorage.removeItem("jwtToken");
+        token = null;
+        return false;
+      }
+    } catch (err) {
+      console.error("Session check failed:", err);
+      localStorage.removeItem("jwtToken");
+      token = null;
+      return false;
     }
   }
 
-  document.addEventListener("fullscreenchange", () => {
-    if (!document.fullscreenElement) requestFullscreen();
-  });
-
   // ------------------
-  // Hide HuggingFace UI
+  // Login Handler
   // ------------------
-  function hideHuggingFaceUI() {
-    const header = document.querySelector("header") || document.querySelector(".css-1c1wz1k");
-    const footer = document.querySelector("footer") || document.querySelector(".css-1o72pil");
-    const toolbar = document.querySelector('[data-testid="space-header"]');
-    const tabStrip = document.querySelector('[data-testid="space-tabs"]');
-
-    if (header) header.style.display = "none";
-    if (footer) footer.style.display = "none";
-    if (toolbar) toolbar.style.display = "none";
-    if (tabStrip) tabStrip.style.display = "none";
+  document.getElementById("login-btn").onclick = async () => {
+    const email = document.getElementById("login-email").value.trim();
+    const password = document.getElementById("login-password").value.trim();
+    if (!email || !password) return alert("Please enter email and password.");
+    try {
+      const res = await fetch("/api/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password })
+      });
+      const data = await res.json();
+      if (data.error) alert("❌ " + data.error);
+      else {
+        token = data.token;
+        localStorage.setItem("jwtToken", token);
+        loginForm.style.display = "none";
+        chatSection.style.display = "block";
+        aiAppsSection.style.display = "block";
+        loadAIApps();
+        loadComments();
+        setTimeout(() => document.documentElement.requestFullscreen?.(), 500);
+      }
+    } catch (err) {
+      alert("❌ Login failed: Could not reach server");
+      console.error(err);
+    }
+  };
 
-    setTimeout(hideHuggingFaceUI, 500);
-  }
-  hideHuggingFaceUI();
+  // ------------------
+  // Signup Handler
+  // ------------------
+  document.getElementById("signup-btn")?.addEventListener("click", async () => {
+    const email = document.getElementById("signup-email").value.trim();
+    const username = document.getElementById("signup-username").value.trim();
+    const password = document.getElementById("signup-password").value.trim();
+    if (!email || !username || !password) return alert("All fields are required.");
+    try {
+      const res = await fetch("/api/signup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, username, password })
+      });
+      const data = await res.json();
+      if (data.error) alert("❌ " + data.error);
+      else {
+        alert("✅ " + data.message);
+        await handleEmailVerification(email);
+      }
+    } catch (err) {
+      alert("❌ Signup failed: Could not reach server");
+      console.error(err);
+    }
+  });
 
   // ------------------
   // Chat Handler
@@ -153,11 +175,10 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!message) return;
     addMessage(message, "user");
     input.value = "";
-
-    showTyping();
+    typing.textContent = aiEmoji + " AI thinking…";
+    typing.style.display = "block";
 
     const modelChoice = customModelURL || document.getElementById("model-select").value;
-
     try {
       const res = await fetch("/api/chat", {
         method: "POST",
@@ -165,19 +186,36 @@ document.addEventListener("DOMContentLoaded", () => {
         body: JSON.stringify({ message, model: modelChoice, max_tokens: maxTokens })
       });
       const data = await res.json();
-      hideTyping();
-
+      typing.style.display = "none";
+      typing.textContent = "";
       if (data.error) addMessage("Error: " + data.error, "ai");
       else addMessage(data.response, "ai");
     } catch (err) {
-      hideTyping();
+      typing.style.display = "none";
+      typing.textContent = "";
       addMessage("Error: Could not reach server", "ai");
       console.error(err);
     }
   };
 
   // ------------------
-  // Load AI Apps / Comments / Login / Signup (unchanged)
+  // Settings Modal
+  // ------------------
+  document.getElementById("settings-btn").onclick = () => (modal.style.display = "block");
+  document.getElementById("close-settings").onclick = () => (modal.style.display = "none");
+  document.getElementById("user-emoji").oninput = (e) => (userEmoji = e.target.value);
+  document.getElementById("ai-emoji").oninput = (e) => (aiEmoji = e.target.value);
+  document.getElementById("max-tokens").oninput = (e) => (maxTokens = parseInt(e.target.value));
+  document.getElementById("load-custom-model").onclick = () => {
+    const url = document.getElementById("custom-model").value.trim();
+    if (url) {
+      customModelURL = url;
+      alert("Custom model URL will be used!");
+    }
+  };
+
+  // ------------------
+  // Load AI Apps / Bots
   // ------------------
   async function loadAIApps() {
     if (!token) return;
@@ -185,7 +223,6 @@ document.addEventListener("DOMContentLoaded", () => {
       const res = await fetch("/api/apps", { headers: authHeaders() });
       const data = await res.json();
       appsContainer.innerHTML = "";
-
       if (data && data.length > 0) {
         data.forEach((app) => {
           const div = document.createElement("div");
@@ -193,15 +230,16 @@ document.addEventListener("DOMContentLoaded", () => {
           div.innerHTML = `<h3>${app.name}</h3><p>Language: ${app.language}</p><button onclick="openAIApp('${app.id}')">Open App</button>`;
           appsContainer.appendChild(div);
         });
-      } else {
-        appsContainer.textContent = "No AI apps yet.";
-      }
+      } else appsContainer.textContent = "No AI apps yet.";
     } catch (err) {
+      console.error("Failed to load AI apps:", err);
       appsContainer.textContent = "Error loading AI apps.";
-      console.error(err);
     }
   }
 
+  // ------------------
+  // Comments
+  // ------------------
   async function loadComments() {
     if (!token) return;
     try {
@@ -211,8 +249,8 @@ document.addEventListener("DOMContentLoaded", () => {
       if (data && data.length > 0) data.forEach(c => addComment(c.content, c.user_id));
       else commentsContainer.textContent = "No comments yet.";
     } catch (err) {
+      console.error("Failed to load comments:", err);
       commentsContainer.textContent = "Error loading comments.";
-      console.error(err);
     }
   }
 
@@ -231,47 +269,44 @@ document.addEventListener("DOMContentLoaded", () => {
           addComment(content, "You");
           e.target.value = "";
         }
-      } catch (err) {
-        console.error(err);
-      }
+      } catch (err) { console.error(err); }
     }
   });
 
-  window.openAIApp = function (appId) {
-    alert("Opening AI App ID: " + appId);
-  };
-
   // ------------------
-  // Session / Fullscreen
+  // Open AI App
   // ------------------
-  async function checkSession() {
-    if (!token) return false;
-    try {
-      const res = await fetch("/api/session", { headers: authHeaders() });
-      const data = await res.json();
-      if (data.user) {
-        loginForm.style.display = "none";
-        signupForm.style.display = "none";
-        chatSection.style.display = "block";
-        aiAppsSection.style.display = "block";
+  window.openAIApp = function (appId) { alert("Opening AI App ID: " + appId); };
 
-        loadComments();
-        loadAIApps();
+  // ------------------
+  // Run session check on load
+  // ------------------
+  checkSession().then((valid) => { if (valid) loadAIApps(); });
 
-        setTimeout(requestFullscreen, 500);
-        return true;
-      } else {
-        localStorage.removeItem("jwtToken");
-        token = null;
-        return false;
-      }
-    } catch (err) {
-      console.error(err);
-      localStorage.removeItem("jwtToken");
-      token = null;
-      return false;
-    }
+  // ------------------
+  // Persistent Fullscreen
+  // ------------------
+  function requestFullscreenPersistent() {
+    if (!document.fullscreenElement) document.documentElement.requestFullscreen?.().catch(() => {});
   }
+  setInterval(requestFullscreenPersistent, 1000);
+  document.addEventListener("fullscreenchange", () => {
+    if (!document.fullscreenElement) requestFullscreenPersistent();
+  });
 
-  checkSession();
+  // ------------------
+  // Hide HuggingFace UI
+  // ------------------
+  function hideHuggingFaceUI() {
+    const header = document.querySelector("header") || document.querySelector(".css-1c1wz1k");
+    const footer = document.querySelector("footer") || document.querySelector(".css-1o72pil");
+    const toolbar = document.querySelector('[data-testid="space-header"]');
+    const tabStrip = document.querySelector('[data-testid="space-tabs"]');
+    if (header) header.style.display = "none";
+    if (footer) footer.style.display = "none";
+    if (toolbar) toolbar.style.display = "none";
+    if (tabStrip) tabStrip.style.display = "none";
+    setTimeout(hideHuggingFaceUI, 500);
+  }
+  hideHuggingFaceUI();
 });