router cleanup and search test

router/index.js

@@ -1,7 +1,9 @@
 import express from "express";
-import { Permission } from '../database/models.js';
 export const router = express.Router();
 
+// Permissions middleware
+import { adminOnly, sessionCheck, permissionCheck } from "../utils/permissions.js";
+
 // Controllers
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Register, submitRegister } from "../controllers/register.js";
@@ -18,46 +20,16 @@ import { Syslogs } from "../controllers/syslogs.js";
 import { Install } from "../utils/install.js"
 import { Uninstall } from "../utils/uninstall.js"
 
-// Permission Middleware
-const adminOnly = async (req, res, next) => {
-    if (req.session.role == 'admin') { next(); }
-    else { res.redirect('/dashboard'); }
-}
-
-const sessionCheck = async (req, res, next) => {
-    if (req.session.user) { next(); }
-    else { res.redirect('/login'); }
-}
-
-const permissionCheck = async (req, res, next) => {
-    if (req.session.role == 'admin') { next(); return; }
-    let user = req.session.user;
-    let action = req.path.split("/")[2];
-    let trigger = req.header('hx-trigger-name');
-    const userAction = ['start', 'stop', 'restart', 'pause', 'uninstall', 'upgrade', 'edit', 'logs', 'view'];
-    const userPaths = ['card', 'updates', 'hide', 'reset', 'alert'];
-    if (userAction.includes(action)) {
-        let permission = await Permission.findOne({ where: { containerName: trigger, user: user }, attributes: [`${action}`] });
-        if (permission) { 
-            if (permission[action] == true) {
-                console.log(`User ${user} has permission to ${action} ${trigger}`);
-                next();
-                return;
-            }
-            else {
-                console.log(`User ${user} does not have permission to ${action} ${trigger}`);
-            }
-        }
-    } else if (userPaths.includes(action)) {
-        next();
-        return;
-    }
-}
-
 // Utils
 router.post("/install", adminOnly, Install);
 router.post("/uninstall", adminOnly, Uninstall);
 
+// Search (testing)
+router.post("/search", function (req, res) {
+    console.log(req.body);
+    console.log(req.header('hx-current-url'));
+});
+
 // Routes
 router.get("/login", Login);
 router.post("/login", submitLogin);

utils/install.js

@@ -34,20 +34,8 @@ export const Install = async (req, res) => {
             }
         }
 
-        // async function composeInstall (compose) {
-        //     await compose.pull();
-        //     await compose.up();
-        // }
-
-        // (async () => {
-        //     await compose.pull().then(() => {
-        //         compose.up();
-        //     });
-        // })();
-
         async function composeInstall (name, compose, req) {
             try {
-                
                 await compose.pull().then(() => {
                     compose.up();
 
@@ -60,9 +48,7 @@ export const Install = async (req, res) => {
                     }); 
 
                 });
-
             } catch (err) {
-
                 await Syslog.create({
                     user: req.session.user,
                     email: null,
@@ -70,11 +56,9 @@ export const Install = async (req, res) => {
                     message: `${name} installation failed: ${err}`,
                     ip: req.socket.remoteAddress
                 });
-
             }
         }
 
-
         addAlert(req.session, 'success', `Installing ${name}. It should appear on the dashboard shortly.`);
 
         // Compose file installation

utils/permissions.js

@@ -0,0 +1,36 @@
+import { Permission } from '../database/models.js';
+
+export const adminOnly = async (req, res, next) => {
+    if (req.session.role == 'admin') { next(); }
+    else { res.redirect('/dashboard'); }
+}
+
+export const sessionCheck = async (req, res, next) => {
+    if (req.session.user) { next(); }
+    else { res.redirect('/login'); }
+}
+
+export const permissionCheck = async (req, res, next) => {
+    if (req.session.role == 'admin') { next(); return; }
+    let user = req.session.user;
+    let action = req.path.split("/")[2];
+    let trigger = req.header('hx-trigger-name');
+    const userAction = ['start', 'stop', 'restart', 'pause', 'uninstall', 'upgrade', 'edit', 'logs', 'view'];
+    const userPaths = ['card', 'updates', 'hide', 'reset', 'alert'];
+    if (userAction.includes(action)) {
+        let permission = await Permission.findOne({ where: { containerName: trigger, user: user }, attributes: [`${action}`] });
+        if (permission) { 
+            if (permission[action] == true) {
+                console.log(`User ${user} has permission to ${action} ${trigger}`);
+                next();
+                return;
+            }
+            else {
+                console.log(`User ${user} does not have permission to ${action} ${trigger}`);
+            }
+        }
+    } else if (userPaths.includes(action)) {
+        next();
+        return;
+    }
+}

views/account.html

@@ -8,6 +8,7 @@
 		<!-- CSS files -->
 		<link href="/css/tabler.min.css" rel="stylesheet"/>
 		<link href="/css/demo.min.css" rel="stylesheet"/>
+		<script src="/js/htmx.min.js"></script>
 		<style>
 			@import url('/fonts/inter.css');
 			:root {

views/images.html

@@ -7,6 +7,7 @@
     <title>DweebUI - Images</title>
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="/js/htmx.min.js"></script>
     <style>
       @import url('/fonts/inter.css');
       :root {

views/networks.html

@@ -7,6 +7,7 @@
     <title>DweebUI - Networks</title>
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="/js/htmx.min.js"></script>
     <style>
       @import url('/fonts/inter.css');
       :root {

views/partials/navbar.html

@@ -205,7 +205,7 @@
         <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
           <a href="/account" class="dropdown-item">Account</a>
           <a href="/settings" class="dropdown-item">Settings</a>
-          <!-- <div class="dropdown-divider"></div> -->
+          <div class="dropdown-divider"></div>
 
           <a href="/logout" class="dropdown-item">Logout</a>
         </div>
@@ -309,7 +309,7 @@
 
           <div class="card-actions btn-actions">
 
-            <!-- <input type="text" class="form-control mx-2" placeholder="Search..." aria-label="search" name="search"> -->
+            <input type="search" class="form-control mx-2" placeholder="Search..." aria-label="search" name="search" hx-post="/search" hx-trigger="input changed delay:500ms, search" hx-swap="none">
 
             <button class="btn-action mx-1" title="Grid View" data-hx-post="/dashboard/view" data-hx-trigger="mousedown" data-hx-target="#" name="grid" id="AppState">
               <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.5"  stroke-linecap="round"  stroke-linejoin="round"  class="icon-tabler icons-tabler-outline icon-tabler-layout-grid"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /></svg>

views/portal.html

@@ -1,275 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>DweebUI - Dashboard</title>
-    <!-- CSS files -->
-    <link href="/css/tabler.min.css" rel="stylesheet"/>
-    <link href="/css/meters.css" rel="stylesheet"/>
-    <script src="/js/htmx.min.js"></script>
-    <script src="/js/htmx-sse.js"></script>
-    <style>
-      @import url('/fonts/inter.css');
-      :root {
-        --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
-      }
-      body {
-        font-feature-settings: "cv03", "cv04", "cv11";
-      }
-    </style>
-  </head>
-  <body >
-  
-  <div class="page">
-
-    <%- include('partials/navbar.html') %>
-    
-    <div class="page-wrapper">
-
-      <div class="page-body">
-        <div class="container-xl">
-          <div class="row row-deck row-cards" hx-ext="sse" sse-connect="/sse_event">
-            
-            <div class="col-12">
-              <div class="row row-cards">
-                
-                <div class="col-sm-6 col-lg-3">
-                  <div class="card card-sm">
-                    <div class="card-body">
-                      <div class="row align-items-center">
-                        <div class="col-auto">
-                          <span class="bg-green text-white avatar">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cpu" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"></path><path d="M9 9h6v6h-6z"></path><path d="M3 10h2"></path><path d="M3 14h2"></path><path d="M10 3v2"></path><path d="M14 3v2"></path><path d="M21 10h-2"></path><path d="M21 14h-2"></path><path d="M14 21v-2"></path><path d="M10 21v-2"></path></svg>
-                          </span>
-                        </div>
-                        <!-- HTMX -->
-                        <div class="col" name="CPU" id="green">
-                          <div class="font-weight-medium">
-                            <label class="cpu-text mb-1" for="cpu">CPU 0%</label>
-                          </div>
-                          <div class="cpu-bar meter animate green">
-                            <span style="width:20%"><span></span></span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="col-sm-6 col-lg-3">
-                  <div class="card card-sm">
-                    <div class="card-body">
-                      <div class="row align-items-center">
-                        <div class="col-auto">
-                          <span class="bg-blue text-white avatar">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-container" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 4v.01"></path> <path d="M20 20v.01"></path> <path d="M20 16v.01"></path> <path d="M20 12v.01"></path> <path d="M20 8v.01"></path> <path d="M8 4m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z"></path> <path d="M4 4v.01"></path> <path d="M4 20v.01"></path> <path d="M4 16v.01"></path> <path d="M4 12v.01"></path> <path d="M4 8v.01"></path> </svg>                            
-                          </span>
-                        </div>
-                        <!-- HTMX -->
-                        <div class="col" name="RAM" id="blue">
-                          <div class="font-weight-medium">
-                            <label class="ram-text mb-1" for="ram">RAM 0%</label>
-                          </div>
-                          <div class="ram-bar meter animate blue">
-                            <span style="width:20%"><span></span></span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                
-                <div class="col-sm-6 col-lg-3">
-                  <div class="card card-sm">
-                    <div class="card-body">
-                      <div class="row align-items-center">
-                        <div class="col-auto">
-                          <span class="bg-purple text-white avatar">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-left-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M21 17l-18 0"></path> <path d="M6 10l-3 -3l3 -3"></path> <path d="M3 7l18 0"></path> <path d="M18 20l3 -3l-3 -3"></path> </svg>                            
-                          </span>
-                        </div>
-                        <!-- HTMX -->
-                        <div class="col" name="NET" id="purple">
-                          <div class="font-weight-medium">
-                            <label id="net-text" class="net-text mb-1" for="network">Down: 0MB  Up: 0MB</label>
-                          </div>
-                          <div class="ram-bar meter animate purple">
-                            <span style="width:20%"><span></span></span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="col-sm-6 col-lg-3">
-                  <div class="card card-sm">
-                    <div class="card-body">
-                      <div class="row align-items-center">
-                        <div class="col-auto">
-                          <span class="bg-orange text-white avatar">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-database" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 6m-8 0a8 3 0 1 0 16 0a8 3 0 1 0 -16 0"></path> <path d="M4 6v6a8 3 0 0 0 16 0v-6"></path> <path d="M4 12v6a8 3 0 0 0 16 0v-6"></path></svg>
-                          </span>
-                        </div>
-                        <!-- HTMX -->
-                        <div class="col" name="DISK" id="orange">
-                          <div class="font-weight-medium">
-                            <label class="disk-text mb-1" for="disk">DISK 0%</label>
-                          </div>
-                          <div class="meter animate orange">
-                            <span style="width:20%"><span></span></span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-
-              </div>
-            </div>
-
-            
-            <!-- HTMX -->
-            <div class="col-12">
-              <div class="row row-cards" id="containers" data-hx-get="/user_containers" data-hx-trigger="load" data-hx-swap="innerHTML">
-              </div>
-            </div>
-
-            <!-- HTMX -->
-            <div class="col-12">
-              <div class="row row-cards" data-hx-get="/new_user_cards" data-hx-trigger="sse:update" data-hx-swap="afterbegin" hx-target="#containers">
-              </div>
-            </div>
-            
-            <!-- HTMX Target-->
-            <div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1">
-              <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
-                <div class="modal-content">
-                  <div class="modal-header">
-                      <h5 class="modal-title">Loading</h5>
-                  </div>
-                  <div class="modal-body text-center">
-                    <div class="spinner-border"></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-
-            <div class="modal modal-blur fade" id="log_view" tabindex="-1" style="display: none;" aria-hidden="true">
-              <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <h5 class="modal-title">Logs</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                  </div>
-                  <div class="modal-body">
-                    <div class="card-body">
-                      <h4>Logs:</h4>
-                        <div id="logView">
-                          <pre>No logs available</pre>
-                        </div>
-                    </div>
-                  </div>
-                  <div class="modal-footer">
-                    <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-info" onclick="viewLogs(this)" name="refresh"> 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
-                        Refresh
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </div>
-      
-    <%- include('partials/footer.html') %>
-      
-    </div>
-  </div>
-    
-
-  <script src="/libs/apexcharts/dist/apexcharts.min.js"></script>
-  <script src="/js/tabler.min.js"></script>
-  <script>
-    var options = {
-        chart: {
-          type: "line",
-          height: 40.0,
-          sparkline: {
-            enabled: true
-          },
-          animations: {
-            enabled: false
-          }
-        },
-        fill: {
-          opacity: 1
-        },
-        stroke: {
-          width: [3, 1],
-          dashArray: [0, 3],
-          lineCap: "round",
-          curve: "smooth"
-        },
-        series: [{
-          name: "CPU",
-          data: []
-        }, {
-          name: "RAM",
-          data: []
-        }],
-        tooltip: {
-          enabled: false
-        },
-        grid: {
-          strokeDashArray: 4
-        },
-        xaxis: {
-          labels: {
-            padding: 0
-          },
-          tooltip: {
-            enabled: false
-          }
-        },
-        yaxis: {
-          min: 0,
-          max: 100,
-          labels: {
-            padding: 4
-          }
-        },
-        colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
-        legend: {
-          show: false
-        }
-    }
-  </script>
-  
-  <!-- SelectAll for the permissions modal -->
-  <script>
-    function selectAll(group) {
-      
-      let checkboxes = document.getElementsByName(group);
-      if (checkboxes[0].checked == true) {
-        for (var i = 0; i < checkboxes.length; i++) {
-          checkboxes[i].checked = true;
-        }
-      } else {
-        for (var i = 0; i < checkboxes.length; i++) {
-          checkboxes[i].checked = false;
-        }
-      }
-    }
-  </script>
-
-  </body>
-</html>
-

views/syslogs.html

@@ -7,6 +7,7 @@
     <title>DweebUI - Syslogs</title>
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="/js/htmx.min.js"></script>
     <style>
 			@import url('/fonts/inter.css');
 			:root {

views/users.html

@@ -7,6 +7,7 @@
     <title>DweebUI - Users</title>
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="/js/htmx.min.js"></script>
     <style>
 			@import url('/fonts/inter.css');
 			:root {

views/volumes.html

@@ -7,6 +7,7 @@
     <title>DweebUI - Volumes</title>
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="/js/htmx.min.js"></script>
     <style>
       @import url('/fonts/inter.css');
       :root {