NovelBin/ChromeExtension/popup.js

document.addEventListener('DOMContentLoaded', function() {
    // Authentication elements
    const authSection = document.getElementById('authSection');
    const loginSection = document.getElementById('loginSection');
    const registerSection = document.getElementById('registerSection');
    const loginBtn = document.getElementById('loginBtn');
    const loginUsernameInput = document.getElementById('loginUsername');
    const loginPasswordInput = document.getElementById('loginPassword');
    const showRegisterLink = document.getElementById('showRegisterLink');
    const registerBtn = document.getElementById('registerBtn');
    const registerUsernameInput = document.getElementById('registerUsername');
    const registerPasswordInput = document.getElementById('registerPassword');
    const registerConfirmPasswordInput = document.getElementById('registerConfirmPassword');
    const showLoginLink = document.getElementById('showLoginLink');
  
    // Recorder and list elements
    const recorderSection = document.getElementById('recorderSection');
    const autoRecordToggle = document.getElementById('autoRecordToggle');
    const allowedPrefixesInput = document.getElementById('allowedPrefixes');
    const logoutBtn = document.getElementById('logoutBtn');
    const openResizableBtn = document.getElementById('openResizableBtn');
    const chapterListSection = document.getElementById('chapterListSection');
    const searchQueryInput = document.getElementById('searchQuery');
    const excludeWordsInput = document.getElementById('excludeWords');
    const chapterListElement = document.getElementById('chapterList');
    const statusDiv = document.getElementById('status');
  
    // Load stored allowedPrefixes from chrome.storage
    chrome.storage.local.get('allowedPrefixes', function(result) {
      if (result.allowedPrefixes) {
        allowedPrefixesInput.value = result.allowedPrefixes;
      }
    });
    allowedPrefixesInput.addEventListener('change', function() {
      const allowedPrefixes = allowedPrefixesInput.value.trim();
      chrome.storage.local.set({ allowedPrefixes: allowedPrefixes });
    });
  
    // Toggle between login and registration views
    showRegisterLink.addEventListener('click', function(e) {
      e.preventDefault();
      loginSection.style.display = "none";
      registerSection.style.display = "block";
    });
    showLoginLink.addEventListener('click', function(e) {
      e.preventDefault();
      registerSection.style.display = "none";
      loginSection.style.display = "block";
    });
  
    // Check login status on load
    fetch("http://192.168.0.226:25570/api/status", {
      method: "GET",
      credentials: "include"
    })
      .then(response => response.json())
      .then(data => {
        if (data.loggedIn) {
          authSection.style.display = "none";
          recorderSection.style.display = "block";
          chapterListSection.style.display = "block";
          statusDiv.textContent = "Logged in as " + data.username;
        } else {
          authSection.style.display = "block";
          recorderSection.style.display = "none";
          chapterListSection.style.display = "none";
        }
      })
      .catch(err => {
        console.error("Error checking login status:", err);
      });
  
    // Login handler
    loginBtn.addEventListener('click', function() {
      const username = loginUsernameInput.value.trim();
      const password = loginPasswordInput.value.trim();
      if (!username || !password) {
        statusDiv.textContent = "Please enter username and password.";
        return;
      }
      chrome.runtime.sendMessage({ action: "login", username, password }, (response) => {
        console.log("Login response:", response);
        if (response.success) {
          statusDiv.textContent = response.message;
          authSection.style.display = "none";
          recorderSection.style.display = "block";
          chapterListSection.style.display = "block";
        } else {
          statusDiv.textContent = response.message || "Login failed.";
        }
      });
    });
  
    // Registration handler
    registerBtn.addEventListener('click', function() {
      const username = registerUsernameInput.value.trim();
      const password = registerPasswordInput.value.trim();
      const confirmPassword = registerConfirmPasswordInput.value.trim();
      if (!username || !password || !confirmPassword) {
        statusDiv.textContent = "Please fill in all registration fields.";
        return;
      }
      if (password !== confirmPassword) {
        statusDiv.textContent = "Passwords do not match.";
        return;
      }
      chrome.runtime.sendMessage({ action: "register", username, password }, (response) => {
        console.log("Registration response:", response);
        if (response.success) {
          statusDiv.textContent = response.message;
          authSection.style.display = "none";
          recorderSection.style.display = "block";
          chapterListSection.style.display = "block";
        } else {
          statusDiv.textContent = response.message || "Registration failed.";
        }
      });
    });
  
    // Auto record toggle handler
    autoRecordToggle.addEventListener('change', function(e) {
      if (e.target.checked) {
        const allowedPrefixes = allowedPrefixesInput.value.trim();
        chrome.runtime.sendMessage({ action: "startAutoRecord", interval: 10000, allowedPrefixes }, (response) => {
          statusDiv.textContent = response.message || response.error;
        });
      } else {
        chrome.runtime.sendMessage({ action: "stopAutoRecord" }, (response) => {
          statusDiv.textContent = response.message || response.error;
        });
      }
    });
  
    // Open resizable window button
    openResizableBtn.addEventListener('click', function() {
      chrome.windows.create({
        url: chrome.runtime.getURL("popup.html"),
        type: "popup",
        width: 600,
        height: 600
      });
    });
  
    // Logout handler
    logoutBtn.addEventListener('click', function() {
      window.location.href = "http://192.168.0.226:25570/logout";
    });
  
    // Function to update the chapter list
    function updateChapterList() {
      fetch("http://192.168.0.226:25570/logs", {
        method: "GET",
        credentials: "include"
      })
        .then(response => response.json())
        .then(data => {
          let chapters = data.updates || [];
          // Sort alphabetically by URL
          chapters.sort((a, b) => a.url.localeCompare(b.url));
          // Filter by search query (case-insensitive)
          const searchQuery = searchQueryInput.value.trim().toLowerCase();
          if (searchQuery) {
            chapters = chapters.filter(item => item.url.toLowerCase().includes(searchQuery));
          }
          // Filter out entries with excluded words
          const excludeWordsStr = excludeWordsInput.value.trim().toLowerCase();
          if (excludeWordsStr) {
            const excludeWords = excludeWordsStr.split(",").map(s => s.trim()).filter(s => s.length > 0);
            if (excludeWords.length > 0) {
              chapters = chapters.filter(item => {
                for (const word of excludeWords) {
                  if (item.url.toLowerCase().includes(word)) {
                    return false;
                  }
                }
                return true;
              });
            }
          }
          // Update the chapter list UI
          chapterListElement.innerHTML = "";
          chapters.forEach(item => {
            const li = document.createElement("li");
            li.textContent = item.url + " (" + new Date(item.timestamp).toLocaleTimeString() + ")";
            chapterListElement.appendChild(li);
          });
        })
        .catch(err => {
          console.error("Error fetching logs:", err);
        });
    }
  
    setInterval(updateChapterList, 5000);
    searchQueryInput.addEventListener('input', updateChapterList);
    excludeWordsInput.addEventListener('input', updateChapterList);
  });