csp removed sensor wip

Sean/server.js

@@ -10,17 +10,13 @@ const otpGenerator = require('otp-generator');
 const { body, validationResult } = require('express-validator');
 const validator = require('validator');
 const { format } = require('date-fns');
-const helmet = require('helmet');
+
 const { Sequelize } = require('sequelize');
 const { transporter } = require("./modules/nodeMailer");
 const { sequelize, User } = require("./modules/mysql");
 const userLogs= require('./models/userLogs')(sequelize); // Adjust the path based on your project structure
 const app = express();
 
-const nonce = crypto.randomBytes(16).toString('base64');
-  
-console.log('Nonce:', nonce);
-
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
 app.use(cookieParser());
@@ -30,17 +26,7 @@ require("dotenv").config();
 app.use(bodyParser.urlencoded({ extended: true }));
 
 app.set("view engine", "ejs");
-app.use(
+
-	helmet.contentSecurityPolicy({
-	  directives: {
-		defaultSrc: ["'self'",`'nonce-${nonce}'`],
-		scriptSrc: ["'self'",`'nonce-${nonce}'`,"'strict-dynamic'", 'cdn.jsdelivr.net', 'fonts.googleapis.com', 'stackpath.bootstrapcdn.com', 'code.jquery.com', 'cdnjs.cloudflare.com'],
-		styleSrc: ["'self'",`'nonce-${nonce}'`, 'cdn.jsdelivr.net', 'fonts.googleapis.com'],
-		imgSrc: ["'self'"],
-		fontSrc: ["'self'", 'fonts.gstatic.com'],
-	  },
-	})
-  );
 
 app.use(session({
     secret: process.env.key,
@@ -294,9 +280,8 @@ app.post("/verify-otp", [
 			  });
 	
 			const currentUsername = req.session.username;
-	
 			// Render the inusers page with JSON data
-			res.render("inusers", { nonce: nonce, allUsers, csrfToken: csrfTokenSession, currentUsername });
+			res.render("inusers", {allUsers, csrfToken: csrfTokenSession, currentUsername });
 		} catch (error) {
 			console.error("Error fetching all users:", error);
 			res.status(500).send("Internal Server Error");
@@ -814,6 +799,24 @@ app.get('/api/getLogs', async (req, res) => {
     }
 });
 
+app.get("/locations", isAuthenticated, async (req, res) => {
+	try {
+		// Render the inusers page with JSON data
+		res.render("locations");
+	} catch (error) {
+		console.error("Error fetching all users:", error);
+		res.status(500).send("Internal Server Error");
+	}
+});
+app.get("/sensors", isAuthenticated, async (req, res) => {
+	try {
+		// Render the inusers page with JSON data
+		res.render("sensors");
+	} catch (error) {
+		console.error("Error fetching all users:", error);
+		res.status(500).send("Internal Server Error");
+	}
+});
 app.use(express.static("views"));
 
 app.listen(PORT, () => {

Sean/views/home.ejs

@@ -20,7 +20,8 @@
   <nav>
     <a href="/inusers">In-House Users</a>
     <a href="#">Users</a>
-    <a href="#">Sensors</a>
+    <a href="/sensors">Sensors</a>
+    <a href="/locations">Locations</a>
     <a href="/logout">Logout</a>
   </nav>
 

Sean/views/inusers.ejs

@@ -173,21 +173,19 @@
       
     </div>
     
-    <script nonce="<%= nonce %>">
+    <script >
       const allUsers = <%- JSON.stringify(allUsers) %>;
       const currentUsername = '<%= currentUsername %>';
-      const nonce = "<%= nonce %>"
-      console.log('Nonce:', nonce);
     </script>
  
-  <script src="https://code.jquery.com/jquery-3.6.4.min.js" nonce="<%= nonce %>"></script>
+  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" nonce="<%= nonce %>" ></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js" nonce="<%= nonce %>"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" nonce="<%= nonce %>"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js" nonce="<%= nonce %>"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" nonce="<%= nonce %>"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js" nonce="<%= nonce %>"></script>
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
-  <script src="inusers.js" nonce="<%= nonce %>"></script>
+  <script src="inusers.js"></script>
  
 
 </body>

Sean/views/location.js

@@ -0,0 +1,92 @@
+$(document).ready(function () {
+    // Function to fetch and display locations
+    function fetchLocations() {
+        // Make a GET request to retrieve all locations
+        fetch('/api/v0/location', {
+            method: 'GET',
+            headers: {
+                'Authorization': '2-eb0c08b0-250a-4249-8a87-11141e2ff8fb'
+            },
+        })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+            })
+            .then(locations => {
+                // Clear existing table rows
+                $('#locationTableBody').empty();
+
+                // Populate the table with location information
+                locations.forEach(location => {
+                    $('#locationTableBody').append(`
+                        <tr>
+                            <td>${location.id}</td>
+                            <td>${location.name}</td>
+                            <td>${location.description}</td>
+                        </tr>
+                    `);
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching locations:', error);
+                // Handle error as needed
+            });
+    }
+    // Call the fetchLocations function when the page loads
+    fetchLocations();
+});
+
+$(document).ready(function () {
+    $('#allLocationLink').on('click', function () {
+      $('#locationContainer').show();
+      $('#createLocationForm').hide();
+    });
+    $('#addLocationLink').on('click', function () {
+        $('#locationContainer').hide();
+        $('#createLocationForm').show();
+      });
+  });
+
+
+$('#locationForm').on('submit', function (e) {
+    e.preventDefault();
+
+    const location = $('#location').val();
+    const user = req.session.jobTitle
+    const description = $('#description').val();
+   
+    fetch('/api/v0/location/new', {
+      method: 'POST',
+      headers: {
+          'Content-Type': 'application/json',
+          'Authorization': '2-eb0c08b0-250a-4249-8a87-11141e2ff8fb'
+      },
+      body: JSON.stringify({
+          name: location,
+          added_by: user,
+          description: description
+      }),
+  })
+  .then(response => {
+    if (response.ok) {
+        // Status 201 indicates successful creation
+        return response.json();
+    } else {
+        return response.json().then(data => {
+            throw new Error(data.message || `HTTP error! Status: ${response.status}`);
+        });
+    }
+})
+.then(data => {
+    console.log(`Location added successfully. Message: ${data.message}`);
+    alert('Location added successfully!');
+    resetFormFields();
+})
+.catch(error => {
+    console.error('Location not added successfully', error);
+    // Handle error as needed
+});
+  });

Sean/views/locations.ejs

@@ -0,0 +1,73 @@
+<!-- views/location.ejs -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Home</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
+</head>
+
+<body>
+  
+  <header>
+    <h1>ECOSAVER MANAGEMENT</h1>
+</header>
+
+  <nav>
+    <a href="#" id="allLocationLink">All Locations</a>
+    <a href="#" id="addLocationLink">Add Locations</a>
+    <a href="#">Update Locations</a>
+    <a href="#">Delete Locations</a>
+    <a href="/home" id="homeLink">Home</a>
+  </nav>
+
+  <div id="locationContainer">
+    <table class="nice-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Location</th>
+          <th>Descriptions</th>
+        </tr>
+      </thead>
+      <tbody id="locationTableBody"></tbody>
+    </table>
+  </div>
+
+  <div id="createLocationForm" class="location-creation-container" style="display: none;">
+    <h3>Add Location</h3>
+    <div class="content">
+      <form action="/api/v0/location/new" id="locationForm" method="post">
+        <div class="Location-details">
+          <div class="input-box">
+            <span class="details">Location Name</span>
+            <input type="text" name="location"  id="location" placeholder="Enter Location name" required>
+          </div>
+          <div class="input-box">
+            <span class="details">Description</span>
+            <input type="text" name="description" id="description" placeholder="Enter the description here" required>
+          </div>
+        </div>
+        <div class="button">
+          <input type="submit" value="submit">
+        </div>
+      </form>
+    </div>
+  </div>
+
+
+
+  <main>
+    <h2>Welcome to the Location</h2>
+  </main>
+  <footer>
+    Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
+</footer>
+<script src="location.js"></script>
+</body>
+
+</html>

Sean/views/sensor.js

@@ -0,0 +1,160 @@
+$(document).ready(function () {
+    $('#allSensorLink').on('click', function () {
+      $('#sensorContainer').show();
+      $('#createSensorForm').hide();
+    });
+    $('#addSensorLink').on('click', function () {
+        $('#sensorContainer').hide();
+        $('#createSensorForm').show();
+      });
+  });
+    let locationsArray = [];
+
+    // Function to fetch and store locations in the array
+    function fetchLocations() {
+        // Make a GET request to retrieve all locations
+        fetch('/api/v0/location', {
+            method: 'GET',
+        })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+            })
+            .then(locations => {
+                // Reset the array
+                locationsArray = [];
+
+                // Populate the array with location information
+                locations.forEach(location => {
+                    // Store in the array
+                    locationsArray.push({
+                        id: location.id,
+                        location: location.name,
+                    });
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching locations:', error);
+                // Handle error as needed
+            });
+    }
+    // Call the fetchLocations function when the page loads
+    fetchLocations();
+
+    // Function to fetch sensor data and populate the table
+    function fetchAndPopulateSensorTable() {
+        // Fetch sensor data from the API
+        fetch('/api/v0/sensor', {
+            method: 'GET',
+            headers: {
+                'Authorization': '1-1ec4ce9d-bcff-46c4-a023-c34171b9ca51'
+            },
+        })
+            .then(response => response.json())
+            .then(sensorData => {
+                // Get the table body
+                const tableBody = document.getElementById('sensorTableBody');
+
+                // Clear existing rows
+                tableBody.innerHTML = '';
+
+                // Iterate through each sensor data
+                sensorData.forEach(sensor => {
+                    // Find the corresponding location object
+                    const location = locationsArray.find(loc => loc.id === sensor.location);
+
+                    // Create a new row
+                    const row = tableBody.insertRow();
+
+                    // Insert cells with sensor data
+                    row.insertCell(0).textContent = sensor.id;
+                    row.insertCell(1).textContent = sensor.sensorname;
+                    row.insertCell(2).textContent = sensor.added_by;
+                    row.insertCell(3).textContent = sensor.mac_address;
+                    row.insertCell(4).textContent = sensor.description;
+
+                    // Insert location cell with corresponding location name
+                    const locationCell = row.insertCell(5);
+                    locationCell.textContent = location ? location.location : 'Unknown';
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching sensor data:', error);
+            });
+    }
+
+    // Call the function to fetch and populate the table
+    fetchAndPopulateSensorTable();
+
+$('#sensorForm').on('submit', function (e) {
+    e.preventDefault();
+
+    const id = $('#id').val();
+    const sensor = $('#sensor').val();
+    const user = req.session.jobTitle
+    const macAddress = $('#macAddress').val();
+    const description = $('#description').val();
+    const location = $('#location').val();
+   
+    fetch('/api/v0/location/new', {
+      method: 'POST',
+      headers: {
+          'Content-Type': 'application/json',
+          'Authorization': '2-eb0c08b0-250a-4249-8a87-11141e2ff8fb'
+      },
+      body: JSON.stringify({
+          id: id,
+          sensorname: sensor,
+          added_by: user,
+          mac_address: macAddress,
+          description: description,
+          location: location
+      }),
+  })
+  .then(response => {
+    if (response.ok) {
+        // Status 201 indicates successful creation
+        return response.json();
+    } else {
+        return response.json().then(data => {
+            throw new Error(data.message || `HTTP error! Status: ${response.status}`);
+        });
+    }
+})
+.then(data => {
+    console.log(`Sensor added successfully. Message: ${data.message}`);
+    alert('Sensor added successfully!');
+    resetFormFields();
+})
+.catch(error => {
+    console.error('Location not added successfully', error);
+    // Handle error as needed
+});
+  });
+
+  function populateLocationDropdown() {
+    const locationDropdown = document.getElementById('locationDropdown');
+
+    // Clear existing options
+    locationDropdown.innerHTML = '';
+
+    // Add a default option
+    const defaultOption = document.createElement('option');
+    defaultOption.text = 'Select a Location';
+    defaultOption.value = '';
+    locationDropdown.add(defaultOption);
+
+    // Add locations as options
+    locationsArray.forEach(location => {
+        const option = document.createElement('option');
+        option.text = location.location;
+        option.value = location.id;
+        locationDropdown.add(option);
+    });
+}
+
+// Call the function to populate the dropdown when the page loads
+populateLocationDropdown();

Sean/views/sensors.ejs

@@ -0,0 +1,87 @@
+<!-- views/sensor.ejs -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Home</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
+</head>
+
+<body>
+  
+  <header>
+    <h1>ECOSAVER MANAGEMENT</h1>
+</header>
+
+  <nav>
+    <a href="#" id="allSensorLink">All Sensor</a>
+    <a href="#"id="addSensorLink">Add Sensor</a>
+    <a href="#">Update Sensor</a>
+    <a href="#">Delete Sensor</a>
+    <a href="/home" id="homeLink">Home</a>
+  </nav>
+
+  <main>
+    <h2>Welcome to the Sensor Page</h2>
+  </main>
+  <div id="sensorContainer">
+    <table class="nice-table">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Sensor Name</th>
+                <th>Added By</th>
+                <th>Mac Address</th>
+                <th>Description</th>
+                <th>Location</th>
+            </tr>
+        </thead>
+        <tbody id="sensorTableBody"></tbody>
+    </table>
+</div>
+
+<div id="createSensorForm" class="sensor-creation-container" style="display: none;">
+    <h3>Add Sensor</h3>
+    <div class="content">
+        <form action="/api/v0/sensor/update" id="sensorForm" method="post">
+            <div class="Sensor-details">
+                <div class="input-box">
+                    <span class="details">ID</span>
+                    <input type="text" name="id" id="id" placeholder="Enter an ID Number" required>
+                </div>
+                <div class="input-box">
+                    <span class="details">Sensor Name</span>
+                    <input type="text" name="sensor" id="sensor" placeholder="Enter Sensor name" required>
+                </div>
+                <div class="input-box">
+                    <span class="details">Mac Address</span>
+                    <input type="text" name="macAddress" id="macAddress" placeholder="Enter the Mac Address" required>
+                </div>
+                <div class="input-box">
+                    <span class="details">Description</span>
+                    <input type="text" name="description" id="description" placeholder="Enter the description here" required>
+                </div>
+                <div class="input-box">
+                    <span class="details">Location</span>
+                    <select name="location" id="locationDropdown" required>
+                        
+                    </select>
+                </div>
+            </div>
+            <div class="button">
+                <input type="submit" value="Submit">
+            </div>
+        </form>
+    </div>
+</div>
+
+  <footer>
+    Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
+</footer>
+</body>
+<script src="sensor.js"></script>
+</html>

Sean/views/style.css

@@ -556,4 +556,5 @@ footer {
 	font-weight: bold; /* Make condition labels bold */
   }
   
+