DRF JWT Auth PR (#146) 4darsh-Dev/api-jwt-test

Added JWT Token Authentication with django API

cognigaurd-web-extension/content.js

@@ -2,7 +2,6 @@
 // This script will be injected into all web pages
 
 
-
 // Send message to background script
 chrome.runtime.sendMessage({ url: window.location.href }, function(response) {
     console.log(response.result);

cognigaurd-web-extension/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "CogniGuard",
-    "version": "0.1.0",
+    "version": "0.0.2",
     "description": "Detects dark patterns on websites.",
     "permissions": [
       "activeTab",

cognigaurd-web-extension/popup.css

@@ -177,12 +177,37 @@
 }
 
 @layer scan-result {
-    .scan-result-box{
-        width:100%;
-        padding : 12px 24px;
-        height:235px;
-        overflow: hidden;
-
+    .scan-result-box {
+        width: 100%;
+        padding: 12px 24px;
+        height: 235px;
+        overflow-y: auto;  /* Change this line */
+        max-height: 235px; /* Add this line */
+    }
+
+    /* Add these new styles */
+    .scan-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .scan-item {
+        margin-bottom: 10px;
+        padding: 10px;
+        border: 1px solid #e0e0e0;
+        border-radius: 4px;
+        background-color: #f9f9f9;
+    }
+
+    .scan-item strong {
+        color: #333;
+    }
+
+    .scan-item small {
+        color: #666;
+        display: block;
+        margin-top: 5px;
     }
 
     .scan-result-box h2 {
@@ -192,23 +217,7 @@
         margin-bottom: 12px;
 
     }
-    .scan-list{
-        list-style-type: none;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .scan-items{
-        font-family: var(--sans);
-        font-size: 12px;
-        color: var(--primary-color);
-        padding: 4px 12px;
-        border-radius: 6px;
-        background-color: var(--white);
-        border: 2px solid var(--primary-color);
-        text-align: center;
-    }
+
 
     #report-btn{
         font-family: var(--sans);
@@ -278,3 +287,10 @@
 
 }
 
+
+#token-input {
+    width: 100%;
+    margin: 2rem 0;
+    height: 2.5rem;
+    padding: 6px;
+}

cognigaurd-web-extension/popup.html

@@ -42,15 +42,34 @@
     </section>
 
     <section id="scan-results">
-
 
       <div class="scan-result-box">
+
 
-        <a id="report-btn" href="http://127.0.0.1:8000/report-dp">Report Dark Patterns</a>
+
+        <a id="report-btn" href="https://cogniguard.onionreads.com/report-dp">Report Dark Patterns</a>
+
+        <div id="progress-area" style="display: none;">
+          <h3>Processing URL</h3>
+          <p id="status-message">Initializing...</p>
+          <progress id="progress-bar" value="0" max="100"></progress>
+        </div>
+
+        <input type="text" id="token-input" placeholder="Enter your API token">
+
+        <div id="result"></div>
+
+
+
+
+
       </div>
 
     </section>
 
+
+
+
 
     <section id="tp-score">
       <div class="tp-box">

cognigaurd-web-extension/popup.js

@@ -3,7 +3,7 @@
 console.log("CogniGuard Popup working!");
 
 // api endpoint
-const apiUrl = "http://127.0.0.1:8000/api/";
+const apiUrl = "https://cogniguard.onionreads.com/api/";
 
 // Function to fetch transparency score
 const fetchTransparencyScore = () => {
@@ -27,77 +27,141 @@ const fetchTransparencyScore = () => {
     });
 };
 
-// Sending the url to the api
-function sendUrlToAPI(url) {
-  // Construct the Basic Auth header
-
-  // Checking for erroneous url
-  // url = encodeURIComponent(url);
-  console.log(url);
-
-  var username = 'cogni';
-  var password = 'Mycogni@420';
-  var credentials = username + ':' + password;
-  var base64Credentials = btoa(credentials);
-
-  // Make an AJAX request to your Django Rest Framework API
-  fetch(apiUrl + 'dp-request/', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': 'Basic ' + base64Credentials
-    },
-    body: JSON.stringify({ url: url })
-
-  })
-    .then(response => {
-      if (response.ok) {
-        console.log('URL sent successfully');
-        // Handle success as needed
-        let respondseJson = response.json();
-        console.log(respondseJson);
-        // Display the dark patterns
-        displayDp(respondseJson, respondseJson.length);
-
-
-      } else {
-        console.error('Failed to send URL');
-        // Handle error as needed
-      }
-    })
-    .catch(error => {
-      console.error('Error:', error);
-      // Handle error as needed
-    });
-
-
-}
-
-
-
-
-
-
-// Displaying dark patterns
-let scanResultBox = document.getElementsByClassName("scan-result-box")[0];
-const displayDp = (response, length) => {
-  let head = document.createElement('h2');
-  head.innerText = "What we have found so far:";
-  scanResultBox.appendChild(head);
-
-  let scanList = document.createElement("ul");
-  scanList.classList.add("scan-list");
-  scanResultBox.appendChild(scanList);
+// // Sending the url to the api
+let progressArea = document.getElementById("progress-area");
+let statusMessage = document.getElementById("status-message");
+let progressBar = document.getElementById("progress-bar");
+
+
+
+document.addEventListener('DOMContentLoaded', function() {
+  const tokenInput = document.getElementById('token-input');
+  const analyzeBtn = document.getElementById('analyze-btn');
+  const resultDiv = document.getElementById('result');
+
+  analyzeBtn.addEventListener('click', function() {
+      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+          const url = tabs[0].url;
+          const token = tokenInput.value;
+
+          if (!token) {
+              resultDiv.innerHTML = `<p>Please enter your API token.<p> <br> <a href="https://cogniguard.onionreads.com/" target="_blank"><strong>Get your API token </strong></a>`;
+              return;
+          }
+
+            // Show progress area and reset progress
+          progressArea.style.display = 'block';
+          updateProgress("Sending URL for analysis...", 10);
+
+          fetch('https://cogniguard.onionreads.com/api/analyze-url/', {
+              method: 'POST',
+              headers: {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${token}`
+              },
+              body: JSON.stringify({ url: url })
+          })
+          .then(response => {
+              if (!response.ok) {
+                  throw new Error('Network response was not ok');
+              }
+              return response.json();
+          })
+          .then(data => {
+              if (data.status === 'processing') {
+                updateProgress("Analysis started. Waiting for results...", 20);
+                pollForResults(data.task_id, token);
+              } else {
+                  displayResults(data.data);
+              }
+          })
+          .catch(error => {
+              console.error('Error:', error);
+              resultDiv.textContent = 'Error analyzing URL. Please try again.';
+          });
+
+//     
+      });
+  });
 
-  let responseArr = [];
+  function pollForResults(taskId, token) {
+      resultDiv.textContent = 'Processing...';
+      const pollInterval = setInterval(() => {
+          fetch(`https://cogniguard.onionreads.com/api/task-status/${taskId}/`, {
+              method: 'GET',
+              headers: {
+                  'Authorization': `Bearer ${token}`
+              }
+          })
+          .then(response => response.json())
+          .then(data => {
+              if (data.status === 'completed') {
+                  clearInterval(pollInterval);
+                  displayResults(data.data);
+              } else if (data.status === 'failed') {
+                  clearInterval(pollInterval);
+                  resultDiv.textContent = 'Analysis failed. Please try again.';
+              }
+          })
+          .catch(error => {
+              clearInterval(pollInterval);
+              console.error('Error polling for results:', error);
+              resultDiv.textContent = 'Error checking results. Please try again.';
+          });
+      }, 5000);
+  }
 
-  for (let i = 0; i < length; i++) {
-    let scanItems = document.createElement("li");
-    scanItems.classList.add("scan-items");
-    scanItems.innerText = `${responseArr[0]}`;
-    scanList.appendChild(scanItems);
+  function updateProgress(message, percentage) {
+          statusMessage.textContent = message;
+          progressBar.value = percentage;
+        }
+
+
+  function displayResults(results) {
+
+
+        const scanResultBox = resultDiv;
+          if (!scanResultBox) {
+              console.error('scanResultBox not found');
+              return;
+          }
+
+          // Clear previous results
+          scanResultBox.innerHTML = '';
+
+          let head = document.createElement('h2');
+          head.innerText = "Analysis Results:";
+          scanResultBox.appendChild(head);
+
+          let scanList = document.createElement("ul");
+          scanList.classList.add("scan-list");
+          scanResultBox.appendChild(scanList);
+
+          const response = results;
+          if (response && response.length > 0) {
+              response.forEach(item => {
+                  let scanItem = document.createElement("li");
+                  scanItem.classList.add("scan-item");
+                  scanItem.innerHTML = `
+                      <strong>${item.dark_pattern_label}</strong>
+                      <p>${item.dark_text}</p>
+                      <small>URL: ${item.website_url}</small>
+                  `;
+                  scanList.appendChild(scanItem);
+              });
+          } else {
+              let noResultItem = document.createElement("li");
+              noResultItem.classList.add("scan-item");
+              noResultItem.innerText = "No dark patterns found.";
+              scanList.appendChild(noResultItem);
+          }
+
+          // Hide progress area after displaying results
+          if (progressArea) {
+              progressArea.style.display = 'none';
+          }
   }
-};
+});
 
 
 
@@ -117,7 +181,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
 
   // Base url
-  let baseUrl = "http://127.0.0.1:8000/";
+  let baseUrl = "https://cogniguard.onionreads.com/";
   let reportBtn = document.getElementById("report-btn");
 
   reportBtn.addEventListener("click", function () {
@@ -139,15 +203,15 @@ document.addEventListener('DOMContentLoaded', function () {
 
   let tandcBtn = document.getElementById("tandc-btn");
   tandcBtn.addEventListener("click", function () {
-    let newTabUrl = baseUrl + "terms-conditions/";
+    let newTabUrl = baseUrl + "terms-of-use/";
 
     chrome.tabs.create({ url: newTabUrl });
 
   })
 
   let knowDp = document.getElementById("know-dp");
   knowDp.addEventListener("click", () => {
-    let newTabUrl = baseUrl + "know-dp/";
+    let newTabUrl = baseUrl + "know-about-dp/";
 
     chrome.tabs.create({ url: newTabUrl });
   })

django-web-app/.gitignore

@@ -1,2 +1,4 @@
 .env
 myenv/
+gunicorn.service
+cogniguard/tempCodeRunnerFile.py