Mockup from @dr-dolomite

Example www content

www/js/auth/auth.js

@@ -0,0 +1,93 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Function to generate a random token
+    function generateAuthToken(length = 32) {
+        const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+        let token = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * charset.length);
+            token += charset[randomIndex];
+        }
+        return token;
+    }
+
+    // Initially hide the body to prevent content from flashing
+    document.body.style.display = 'none';
+
+    // Check if the user is already logged in
+    const authToken = localStorage.getItem('authToken');
+    
+    // Define which pages should be protected
+    const protectedPages = [
+        '/home.html',
+        'advance-settings.html',
+        '/bandlock.html',
+        '/cell-locking.html',
+        '/cell-scanner.html',
+        '/cell-settings.html',
+        '/cell-sms.html',
+        '/about.html',      // Add all the protected HTML pages here
+    ];
+
+    const currentPage = window.location.pathname;
+
+    // If the user is not logged in and tries to access a protected page, redirect to login
+    if (!authToken && protectedPages.includes(currentPage)) {
+        window.location.href = 'index.html';
+    } else {
+        // Show the page if authentication is successful or not required
+        document.body.style.display = '';
+    }
+
+    // If the user is logged in and tries to access the login page, redirect to home
+    if (authToken && currentPage.includes('index.html')) {
+        window.location.href = 'home.html';
+    }
+
+    // Login form logic (only for login page)
+    const loginForm = document.getElementById('loginForm');
+    if (loginForm) {
+        loginForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const errorElement = document.getElementById('error');
+
+            const validUsername = 'admin'; // Hardcoded credentials for demo purposes
+            const validPassword = 'password123';
+
+            // Authenticate user
+            if (username === validUsername && password === validPassword) {
+                // Generate a random token
+                const newToken = generateAuthToken();
+                localStorage.setItem('authToken', newToken); // Store the generated token
+
+                // Redirect to home after successful login
+                window.location.href = 'home.html';
+            } else {
+                errorElement.textContent = 'Invalid username or password';
+            }
+        });
+    }
+
+    // Logout button logic (only for pages that have the logout button)
+    const logoutButton = document.getElementById('logoutButton');
+    if (logoutButton) {
+        logoutButton.addEventListener('click', () => {
+            localStorage.removeItem('authToken'); // Remove token
+            window.location.href = 'index.html';  // Redirect to login
+        });
+    }
+
+    // Fix for the issue of being redirected to login every time the Home button is clicked
+    document.querySelectorAll('.navbar-item').forEach(el => {
+        if (el.textContent.includes('Home')) {
+            el.addEventListener('click', e => {
+                if (localStorage.getItem('authToken')) {
+                    e.preventDefault();
+                    window.location.href = 'home.html';
+                }
+            });
+        }
+    });
+});

www/js/handle-at-input.js

@@ -0,0 +1,36 @@
+// Handle form submission via JavaScript
+document
+  .getElementById("commandForm")
+  .addEventListener("submit", function (e) {
+    e.preventDefault(); // Prevent default form submission
+
+    const commandInput = document.getElementById("command").value;
+    const outputTextarea = document.getElementById("output");
+
+    // Make sure input is not empty
+    if (commandInput.trim() === "") {
+      outputTextarea.value = "Please enter a valid AT command.";
+      return;
+    }
+
+    // Send the AT command to the CGI script via fetch
+    fetch("/cgi-bin/atinout_handler.sh", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: `command=${encodeURIComponent(commandInput)}`,
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        // Display the response in the textarea
+        if (data.output) {
+          outputTextarea.value = data.output;
+        } else {
+          outputTextarea.value = "Error: No output received.";
+        }
+      })
+      .catch((error) => {
+        outputTextarea.value = `Error fetching data: ${error.message}`;
+      });
+  });

www/js/styles/nav-burger.js

@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(
+    document.querySelectorAll(".navbar-burger"),
+    0
+  );
+
+  // Add a click event on each of them
+  $navbarBurgers.forEach((el) => {
+    el.addEventListener("click", () => {
+      // Get the target from the "data-target" attribute
+      const target = el.dataset.target;
+      const $target = document.getElementById(target);
+
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle("is-active");
+      $target.classList.toggle("is-active");
+    });
+  });
+});

www/js/styles/nav-state.js

@@ -0,0 +1,11 @@
+$(document).ready(function() {
+
+    // Check for click events on the navbar burger icon
+    $(".navbar-burger").click(function() {
+  
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        $(".navbar-burger").toggleClass("is-active");
+        $(".navbar-menu").toggleClass("is-active");
+  
+    });
+  });

www/js/styles/toggle-theme.js

@@ -0,0 +1,27 @@
+// toggle-theme.js
+document.addEventListener('DOMContentLoaded', function () {
+    const themeToggleButton = document.querySelector('.js-theme-toggle');
+    const htmlElement = document.documentElement;
+    const icon = themeToggleButton.querySelector('.icon i');
+
+    // Toggle theme on button click
+    themeToggleButton.addEventListener('click', function () {
+        if (htmlElement.classList.contains('theme-dark')) {
+            htmlElement.classList.remove('theme-dark');
+            htmlElement.classList.add('theme-light');
+            localStorage.setItem('theme', 'theme-light');
+
+            // Change icon to moon (light mode)
+            icon.classList.remove('fa-sun');
+            icon.classList.add('fa-moon');
+        } else {
+            htmlElement.classList.remove('theme-light');
+            htmlElement.classList.add('theme-dark');
+            localStorage.setItem('theme', 'theme-dark');
+
+            // Change icon to sun (dark mode)
+            icon.classList.remove('fa-moon');
+            icon.classList.add('fa-sun');
+        }
+    });
+});