Multi-user dashboard

controllers/apps.js

@@ -28,6 +28,9 @@ let alert = '';
 
 export const Apps = (req, res) => {
   let page = Number(req.params.page) || 1;
+  
+  console.log(req.params);
+
   let list_start = (page-1)*28;
   let list_end = (page*28);
   let last_page = Math.ceil(templates.length/28);
@@ -83,6 +86,7 @@ export const Apps = (req, res) => {
 
 export const AppTemplate = (req, res) => {
   let templateTest = Number(req.params.template) || 'template.json';
+  console.log(templateTest);
   let page = Number(req.params.page) || 1;
   let list_start = (page-1)*28;
   let list_end = (page*28);

controllers/dashboard.js

@@ -1,22 +1,26 @@
 import { Readable } from 'stream';
-import { Permission, Container, User } from '../database/models.js';
+import { Permission, User } from '../database/models.js';
 import { docker } from '../server.js';
 import { dockerContainerStats } from 'systeminformation';
 import { readFileSync } from 'fs';
 import { currentLoad, mem, networkStats, fsSize } from 'systeminformation';
+import { Op } from 'sequelize';
 
 let hidden = '';
+let alert = '';
+let [ cardList, newCards, stats ] = [ '', '', {}];
 
 // The page
 export const Dashboard = (req, res) => {
     let name = req.session.user;
     let role = req.session.role;
+    alert = req.session.alert;
     
     res.render("dashboard", {
         name: name,
         avatar: name.charAt(0).toUpperCase(),
         role: role,
-        alert: ''
+        alert: alert,
     });
 }
 
@@ -34,15 +38,10 @@ export const DashboardAction = async (req, res) => {
             let permissions_modal = readFileSync('./views/modals/permissions.html', 'utf8');
             permissions_modal = permissions_modal.replace(/PermissionsTitle/g, title);
             let users = await User.findAll({ attributes: ['username', 'UUID']});
-
             for (let i = 0; i < users.length; i++) {
                 let user_permissions = readFileSync('./views/partials/user_permissions.html', 'utf8');
                 let exists = await Permission.findOne({ where: {containerName: name, user: users[i].username}});
-                
+                if (!exists) { const newPermission = await Permission.create({ containerName: name, user: users[i].username, userID: users[i].UUID}); }
-                if (!exists) {
-                    const newPermission = await Permission.create({ containerName: name, user: users[i].username, userID: users[i].UUID});
-                }
-                
                 let permissions = await Permission.findOne({ where: {containerName: name, user: users[i].username}});
                 if (permissions.uninstall == true) { user_permissions = user_permissions.replace(/data-UninstallCheck/g, 'checked'); }
                 if (permissions.edit == true) { user_permissions = user_permissions.replace(/data-EditCheck/g, 'checked'); }
@@ -52,7 +51,7 @@ export const DashboardAction = async (req, res) => {
                 if (permissions.pause == true) { user_permissions = user_permissions.replace(/data-PauseCheck/g, 'checked'); }
                 if (permissions.restart == true) { user_permissions = user_permissions.replace(/data-RestartCheck/g, 'checked'); }
                 if (permissions.logs == true) { user_permissions = user_permissions.replace(/data-LogsCheck/g, 'checked'); }
-
+                if (permissions.view == true) { user_permissions = user_permissions.replace(/data-ViewCheck/g, 'checked'); }
                 user_permissions = user_permissions.replace(/EntryNumber/g, i);
                 user_permissions = user_permissions.replace(/EntryNumber/g, i);
                 user_permissions = user_permissions.replace(/EntryNumber/g, i);
@@ -62,17 +61,14 @@ export const DashboardAction = async (req, res) => {
                 user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
                 user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
                 user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
-
                 permissions_list += user_permissions;
             }
-
             permissions_modal = permissions_modal.replace(/PermissionsList/g, permissions_list);
             res.send(permissions_modal);
             return;
         case 'uninstall':
             modal = readFileSync('./views/modals/uninstall.html', 'utf8');
             modal = modal.replace(/AppName/g, name);
-            // let containerPermissions = await Permission.findAll({ where: {containerName: name}});
             res.send(modal);
             return;
         case 'details':
@@ -82,15 +78,13 @@ export const DashboardAction = async (req, res) => {
             modal = modal.replace(/AppImage/g, details.image);
             res.send(modal);
             return;
-        case 'containers':
-            res.send(cardList);
-            return;
         case 'updates':
             res.send(newCards);
             newCards = '';
             return;
         case 'card':
-            if (hidden.includes(name) || !containersArray.find(c => c.container === name)) {
+            await userCards(req.session);
+            if (!req.session.container_list.find(c => c.container === name)) {
                 res.send('');
                 return;
             } else {
@@ -109,118 +103,60 @@ export const DashboardAction = async (req, res) => {
                     logString += chunk.toString('utf8');
                 });
                 readableStream.on('end', function () {
-                    res.send(`<pre>${logString}</pre> `);
+                    res.send(`<pre>${logString}</pre>`);
                 });
             });
             return;
         case 'hide':
-            let exists = await Container.findOne({ where: {name: name}});
+            let user = req.session.user;
-            if (!exists) {
+            let exists = await Permission.findOne({ where: {containerName: name, user: user}});
-                const newContainer = await Container.create({ name: name, visibility: false, });
+            if (!exists) { const newPermission = await Permission.create({ containerName: name, user: user, hide: true, userID: req.session.UUID}); }
-            } else {
+            else { exists.update({ hide: true }); }
-                exists.update({ visibility: false });
+            hidden = await Permission.findAll({ where: {user: user, hide: true}}, { attributes: ['containerName'] });
-            }
+            hidden = hidden.map((container) => container.containerName);
-            hidden = await Container.findAll({ where: {visibility:false}});
-            hidden = hidden.map((container) => container.name);
             res.send("ok");
             return;
         case 'reset':
-            await Container.update({ visibility: true }, { where: {} });
+            await Permission.update({ hide: false }, { where: { user: req.session.user } });
-            hidden = await Container.findAll({ where: {visibility:false}});
-            hidden = hidden.map((container) => container.name);
             res.send("ok");
             return;
-
-
     }
 
     function status (state) {
-        let status = `<span class="text-yellow align-items-center lh-1">
+        return(`<span class="text-yellow align-items-center lh-1"><svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-point-filled" 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 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path></svg>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-point-filled" 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 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path></svg>
                         ${state}
-                    </span>`;
+                </span>`);
-        return status;
     }
 
-    // Start
+    // Container actions
     if ((action == 'start') && (value == 'stopped')) {
         docker.getContainer(name).start();
         res.send(status('starting'));
     } else if ((action == 'start') && (value == 'paused')) {
         docker.getContainer(name).unpause();
         res.send(status('starting'));
-    // Stop
     } else if ((action == 'stop') && (value != 'stopped')) {
         docker.getContainer(name).stop();
         res.send(status('stopping'));
-    // Pause
     } else if ((action == 'pause') && (value == 'paused')) {
         docker.getContainer(name).unpause();
         res.send(status('starting'));
     }   else if ((action == 'pause') && (value == 'running')) {
         docker.getContainer(name).pause();
         res.send(status('pausing'));
-    // Restart
     } else if (action == 'restart') {
         docker.getContainer(name).restart();
         res.send(status('restarting'));
     } 
 }
 
-// Server metrics (CPU, RAM, TX, RX, DISK)
-export const Stats = async (req, res) => {
-    let name = req.header('hx-trigger-name');
-    let color = req.header('hx-trigger');
-    let value = 0;
-    switch (name) {
-        case 'CPU': 
-            await currentLoad().then(data => { 
-                value = Math.round(data.currentLoad); 
-            });
-            break;
-        case 'RAM': 
-            await mem().then(data => { 
-                value = Math.round((data.active / data.total) * 100); 
-            });
-            break;
-        case 'NET':
-            let down = 0;
-            let up = 0;
-            let percent = 0;
-            await networkStats().then(data => {
-                down = Math.round(data[0].rx_bytes / (1024 * 1024));
-                up = Math.round(data[0].tx_bytes / (1024 * 1024));
-                // percent of download vs max download if max download was 1GB
-                percent = Math.round((down / 1000) * 100);
-            });
-            let net = `<div class="font-weight-medium">
-                        <label class="cpu-text mb-1">Down:${down}MB  Up:${up}MB</label>
-                        </div>
-                        <div class="cpu-bar meter animate ${color}">
-                            <span style="width:20%"><span></span></span>
-                        </div>`;           
-            res.send(net);
-            return;
-        case 'DISK':
-            await fsSize().then(data => { 
-                value = data[0].use; 
-            });
-            break;
-    }
-    let info = `<div class="font-weight-medium">
-                    <label class="cpu-text mb-1">${name} ${value}%</label>
-                </div>
-                <div class="cpu-bar meter animate ${color}">
-                    <span style="width:${value}%"><span></span></span>
-                </div>`;
-    res.send(info);
-}
-
 async function containerInfo (containerName) {
     let container = docker.getContainer(containerName);
     let info = await container.inspect();
     let image = info.Config.Image.split('/');
     let ports_list = [];
+    let external = 0;
+    let internal = 0;
     try {
         for (const [key, value] of Object.entries(info.HostConfig.PortBindings)) {
             let ports = {
@@ -231,20 +167,11 @@ async function containerInfo (containerName) {
             }
             ports_list.push(ports);
         }
-    } catch {
+    } catch {}
-        // no exposed ports
-    }
-
-    let external = 0;
-    let internal = 0;
     try {
         external = ports_list[0].external;
         internal = ports_list[0].internal;
-    }   catch {
+    } catch {}
-        // no exposed ports
-    }
-    
-
     let details = {
         name: containerName,
         image: image,
@@ -259,10 +186,11 @@ async function containerInfo (containerName) {
 }
 
 async function createCard (details) {
-    if (hidden.includes(details.name)) { return;}
     let shortname = details.name.slice(0, 10) + '...';
     let trigger = 'data-hx-trigger="load, every 3s"';
     let state = details.state;
+    let card  = readFileSync('./views/partials/containerFull.html', 'utf8');
+
     let state_color = '';
     switch (state) {
         case 'running':
@@ -283,7 +211,7 @@ async function createCard (details) {
             break;
     }
     // if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
-    let card  = readFileSync('./views/partials/containerFull.html', 'utf8');
+
     card = card.replace(/AppName/g, details.name);
     card = card.replace(/AppShortName/g, shortname);
     card = card.replace(/AppIcon/g, details.service);
@@ -297,80 +225,156 @@ async function createCard (details) {
     return card;
 }
 
+async function userCards (session) {
+    session.container_list = [];
+    // check what containers the user wants hidden
+    let hidden = await Permission.findAll({ where: {user: session.user, hide: true}}, { attributes: ['containerName'] });
+    hidden = hidden.map((container) => container.containerName);
+    // check what containers the user has permission to view
+    let visable = await Permission.findAll({ where: { user: session.user, [Op.or]: [{ uninstall: true }, { edit: true }, { upgrade: true }, { start: true }, { stop: true }, { pause: true }, { restart: true }, { logs: true }, { view: true }] } });
+    visable = visable.map((container) => container.containerName);
+    // get all containers
+    let containers = await docker.listContainers({ all: true });
+    // loop through containers
+    for (let i = 0; i < containers.length; i++) {
+        let container_name = containers[i].Names[0].replace('/', '');
+        // skip hidden containers
+        if (hidden.includes(container_name)) { continue; }
+        // admin can see all containers that they don't have hidden
+        if (session.role == 'admin') { session.container_list.push({ container: container_name, state: containers[i].State }); }
+        // user can see any containers that they have any permissions for
+        else if (visable.includes(container_name)){ session.container_list.push({ container: container_name, state: containers[i].State }); }
+    }
+    // create a sent list if it doesn't exist
+    if (!session.sent_list) { session.sent_list = []; }
+    if (!session.update_list) { session.update_list = []; }
+    if (!session.new_cards) { session.new_cards = []; }
+}
 
-let [ cardList, newCards, containersArray, sentArray, updatesArray ] = [ '', '', [], [], [] ];
+async function updateDashboard (session) {
+    let container_list = session.container_list;
+    let sent_list = session.sent_list;
+    session.new_cards = [];
+    session.update_list = [];
+    // loop through the containers list
+    container_list.forEach(info => {
+        let { container, state } = info;
+        let sent = sent_list.find(c => c.container === container);
+        if (!sent) { session.new_cards.push(container);}
+        else if (sent.state !== state) { session.update_list.push(container); }
+    });
+    // loop through the sent list to see if any containers have been removed
+    sent_list.forEach(info => {
+        let { container } = info;
+        let exists = container_list.find(c => c.container === container);
+        if (!exists) { session.update_list.push(container); }
+    });
+}
 
 // HTMX server-side events
 export const SSE = async (req, res) => {
+    // set the headers for server-sent events
     res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
-
+    // check for container changes every 500ms
     let eventCheck = setInterval(async () => {
-        // builds array of containers and their states
+        await userCards(req.session);
-        containersArray = [];
+        // check if the cards displayed are the same as what's in the session
-        await docker.listContainers({ all: true }).then(containers => {
+        if ((JSON.stringify(req.session.container_list) === JSON.stringify(req.session.sent_list))) { return; }
-            containers.forEach(container => {
+        await updateDashboard(req.session); 
-                let name = container.Names[0].replace('/', '');
-                if (!hidden.includes(name)) { // if not hidden
-                    containersArray.push({ container: name, state: container.State });
-                } 
-            });
-        });
 
-        if ((JSON.stringify(containersArray) !== JSON.stringify(sentArray))) {
+        for (let i = 0; i < req.session.new_cards.length; i++) {
-            cardList = '';
+            let details = await containerInfo(req.session.new_cards[i]);
-            newCards = '';
+            let card = await createCard(details);
-            containersArray.forEach(container => {
+            newCards += card;
-                const { container: containerName, state } = container;
+            req.session.alert = '';
-                const existingContainer = sentArray.find(c => c.container === containerName);
-                if (!existingContainer) {
-                    containerInfo(containerName).then(details => {
-                        createCard(details).then(card => {
-                            newCards += card;
-                        });
-                    });
-                    res.write(`event: update\n`);
-                    res.write(`data: 'update cards'\n\n`);
-                } else if (existingContainer.state !== state) {
-                    updatesArray.push(containerName);
-                }
-                containerInfo(containerName).then(details => {
-                    createCard(details).then(card => {
-                        cardList += card;
-                    });
-                });
-            });
-
-            sentArray.forEach(container => {
-                const { container: containerName } = container;
-                const existingContainer = containersArray.find(c => c.container === containerName);
-                if (!existingContainer) {
-                    updatesArray.push(containerName);
-                }
-            });
-
-            for (let i = 0; i < updatesArray.length; i++) {
-                res.write(`event: ${updatesArray[i]}\n`);
-                res.write(`data: 'update cards'\n\n`);
-            }
-            updatesArray = [];
-            sentArray = containersArray.slice();
         }
-
+        for (let i = 0; i < req.session.update_list.length; i++) {
+            res.write(`event: ${req.session.update_list[i]}\n`);
+            res.write(`data: 'update cards'\n\n`);
+        }
+        res.write(`event: update\n`);
+        res.write(`data: 'update cards'\n\n`);
+        req.session.sent_list = req.session.container_list.slice();
     }, 500);
-
-
     req.on('close', () => {
         clearInterval(eventCheck);
     });
 };
 
-let stats = {};
+// Server metrics (CPU, RAM, TX, RX, DISK)
+export const Stats = async (req, res) => {
+    let name = req.header('hx-trigger-name');
+    let color = req.header('hx-trigger');
+    let value = 0;
+    switch (name) {
+        case 'CPU': 
+            await currentLoad().then(data => { value = Math.round(data.currentLoad); });
+            break;
+        case 'RAM': 
+            await mem().then(data => { value = Math.round((data.active / data.total) * 100); });
+            break;
+        case 'NET':
+            let [down, up, percent] = [0, 0, 0];
+            await networkStats().then(data => { down = Math.round(data[0].rx_bytes / (1024 * 1024)); up = Math.round(data[0].tx_bytes / (1024 * 1024)); percent = Math.round((down / 1000) * 100); });
+            let net = `<div class="font-weight-medium"><label class="cpu-text mb-1">Down:${down}MB  Up:${up}MB</label></div>
+                        <div class="cpu-bar meter animate ${color}"><span style="width:20%"><span></span></span></div>`;           
+            res.send(net);
+            return;
+        case 'DISK':
+            await fsSize().then(data => { value = data[0].use; });
+            break;
+    }
+    let info = `<div class="font-weight-medium"> <label class="cpu-text mb-1">${name} ${value}%</label></div>
+                <div class="cpu-bar meter animate ${color}"> <span style="width:${value}%"><span></span></span> </div>`;
+    res.send(info);
+}
+
+// Imported by utils/install.js
+export async function addAlert (session, name) {
+    session.alert = `<div class="alert alert-success alert-dismissible mb-0 py-2" role="alert">
+    <div class="d-flex">
+      <div class="spinner-border text-info nav-link">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <div>
+        Installing ${name}. It should appear on the dashboard shortly.
+      </div>
+    </div>
+    <a class="btn-close" data-bs-dismiss="alert" aria-label="close" style="padding-top: 0.5rem;"></a>
+  </div>`;
+}
+
+export const UpdatePermissions = async (req, res) => {
+    let { user, container } = req.body;
+    let id = req.header('hx-trigger');
+    await Permission.update({ uninstall: false, edit: false, upgrade: false, start: false, stop: false, pause: false, restart: false, logs: false }, { where: { containerName: container, user: user } });
+    Object.keys(req.body).forEach(async function(key) {
+        if (key != 'user' && key != 'container') {
+            let permissions = req.body[key];
+            if (permissions.includes('uninstall')) { await Permission.update({ uninstall: true }, { where: {containerName: container, user: user}}); }  
+            if (permissions.includes('edit')) { await Permission.update({ edit: true }, { where: {containerName: container, user: user}}); }   
+            if (permissions.includes('upgrade')) { await Permission.update({ upgrade: true }, { where: {containerName: container, user: user}}); }   
+            if (permissions.includes('start')) { await Permission.update({ start: true }, { where: {containerName: container, user: user}}); }   
+            if (permissions.includes('stop')) { await Permission.update({ stop: true }, { where: {containerName: container, user: user}}); }   
+            if (permissions.includes('pause')) { await Permission.update({ pause: true }, { where: {containerName: container, user: user}}); }   
+            if (permissions.includes('restart')) { await Permission.update({ restart: true }, { where: {containerName: container, user: user}}); }   
+            if (permissions.includes('logs')) { await Permission.update({ logs: true }, { where: {containerName: container, user: user}}); }
+            if (permissions.includes('view')) { await Permission.update({ view: true }, { where: {containerName: container, user: user}}); }
+        }  
+    });
+    if (id == 'submit') {
+        res.send('<button class="btn" type="button" id="confirmed" hx-post="/updatePermissions" hx-swap="outerHTML" hx-trigger="load delay:2s">Update ✔️</button>');
+        return;
+    } else if (id == 'confirmed') {
+        res.send('<button class="btn" type="button" id="submit" hx-post="/updatePermissions" hx-vals="#updatePermissions" hx-swap="outerHTML">Update  </button>');
+        return;
+    }
+}
+
 // Container charts
 export const Chart = async (req, res) => {
     let name = req.header('hx-trigger-name');
-    if (!stats[name]) {
+    if (!stats[name]) { stats[name] = { cpuArray: Array(15).fill(0), ramArray: Array(15).fill(0) }; }
-        stats[name] = { cpuArray: Array(15).fill(0), ramArray: Array(15).fill(0) };
-    }
     const info = await dockerContainerStats(name);
     stats[name].cpuArray.push(Math.round(info[0].cpuPercent));
     stats[name].ramArray.push(Math.round(info[0].memPercent));
@@ -385,72 +389,4 @@ export const Chart = async (req, res) => {
             }])
         </script>`
     res.send(chart);
-}
-
-export const UpdatePermissions = async (req, res) => {
-    let { user, container } = req.body;
-    let id = req.header('hx-trigger');
-
-    await Permission.update({ uninstall: false, edit: false, upgrade: false, start: false, stop: false, pause: false, restart: false, logs: false }, { where: { containerName: container, user: user } });
-    
-    Object.keys(req.body).forEach(async function(key) {
-        if (key != 'user' && key != 'container') {
-            let permissions = req.body[key];
-
-            if (permissions.includes('uninstall')) {
-                await Permission.update({ uninstall: true }, { where: {containerName: container, user: user}});
-            }  
-            if (permissions.includes('edit')) {
-                await Permission.update({ edit: true }, { where: {containerName: container, user: user}});
-            }   
-            if (permissions.includes('upgrade')) {
-                await Permission.update({ upgrade: true }, { where: {containerName: container, user: user}});
-            }   
-            if (permissions.includes('start')) {
-                await Permission.update({ start: true }, { where: {containerName: container, user: user}});
-            }   
-            if (permissions.includes('stop')) {
-                await Permission.update({ stop: true }, { where: {containerName: container, user: user}});
-            }   
-            if (permissions.includes('pause')) {
-                await Permission.update({ pause: true }, { where: {containerName: container, user: user}});
-            }   
-            if (permissions.includes('restart')) {
-                await Permission.update({ restart: true }, { where: {containerName: container, user: user}});
-            }   
-            if (permissions.includes('logs')) {
-                await Permission.update({ logs: true }, { where: {containerName: container, user: user}});
-            }
-        }  
-    });
-
-    let submit = '';
-    if (id == 'submit') {
-        submit = `<button class="btn" type="button" id="confirmed" hx-post="/updatePermissions" hx-swap="outerHTML" hx-trigger="load delay:2s">Update ✔️</button>`;
-        res.send(submit);
-        return;
-    } else if (id == 'confirmed') {
-        submit = `<button class="btn" type="button" id="submit" hx-post="/updatePermissions" hx-vals="#updatePermissions" hx-swap="outerHTML">Update  </button>`;
-        res.send(submit);
-        return;
-    }
-}
-
-// Gets imported by install.js
-export async function addCard (name, state) {
-    console.log(`Adding card for ${name}: ${state}`);
-
-    let details = {
-        name: name,
-        image: name,
-        service: name,
-        state: 'installing',
-        external_port: 0,
-        internal_port: 0,
-        ports: [],
-        link: 'localhost',
-    }
-    createCard(details).then(card => {
-        cardList += card;
-    });
 }

router/index.js

@@ -6,7 +6,7 @@ export const router = express.Router();
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Register, submitRegister } from "../controllers/register.js";
 import { Dashboard, DashboardAction, Stats, Chart, SSE, UpdatePermissions } from "../controllers/dashboard.js";
-import { Apps, appSearch, AppTemplate, InstallModal, ImportModal, LearnMore, Upload } from "../controllers/apps.js";
+import { Apps, appSearch, InstallModal, ImportModal, LearnMore, Upload } from "../controllers/apps.js";
 import { Users } from "../controllers/users.js";
 import { Images } from "../controllers/images.js";
 import { Networks, removeNetwork } from "../controllers/networks.js";
@@ -31,13 +31,12 @@ const sessionCheck = async (req, res, next) => {
 }
 
 const permissionCheck = async (req, res, next) => {
-    if (!req.session.user) { res.redirect('/login'); return; }
+    if (req.session.role == 'admin') { next(); return; }
-    else 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', 'hide', 'reset_view'];
+    const userAction = ['start', 'stop', 'restart', 'pause', 'uninstall', 'upgrade', 'edit', 'logs', 'view'];
-    const userPaths = ['card', 'containers', 'updates'];
+    const userPaths = ['card', 'updates', 'hide', 'reset'];
     if (userAction.includes(action)) {
         let permission = await Permission.findOne({ where: { containerName: trigger, user: user }, attributes: [`${action}`] });
         if (permission) { 
@@ -69,7 +68,7 @@ router.post("/register", submitRegister);
 
 router.get("/", sessionCheck, Dashboard);
 router.get("/dashboard", sessionCheck, Dashboard);
-router.post("/dashboard/:action", permissionCheck, DashboardAction);
+router.post("/dashboard/:action", sessionCheck, permissionCheck, DashboardAction);
 router.get("/sse", sessionCheck, SSE);
 router.post("/updatePermissions", adminOnly, UpdatePermissions);
 router.get("/stats", sessionCheck, Stats);
@@ -84,10 +83,10 @@ router.post("/removeVolume", adminOnly, removeVolume);
 router.get("/networks", adminOnly, Networks);
 router.post("/removeNetwork", adminOnly, removeNetwork);
 
-router.get("/apps", adminOnly, Apps);
+router.get("/apps/:page?/:template?", adminOnly, Apps);
-router.get("/apps/:page", adminOnly, Apps);
+
-router.get("/apps/template/:template", adminOnly, AppTemplate);
 router.post("/apps", adminOnly, appSearch);
+
 router.get("/install_modal", adminOnly, InstallModal)
 router.get("/import_modal", adminOnly, ImportModal)
 router.get("/learn_more", adminOnly, LearnMore)

utils/install.js

@@ -4,7 +4,7 @@ import { execSync } from "child_process";
 import { docker } from "../server.js";
 import DockerodeCompose from "dockerode-compose";
 import { Syslog } from "../database/models.js";
-import { addCard } from "../controllers/dashboard.js";
+import { addAlert } from "../controllers/dashboard.js";
 
 // This entire page hurts to look at. 
 export const Install = async (req, res) => {
@@ -21,7 +21,7 @@ export const Install = async (req, res) => {
 
         let docker_volumes = [];
 
-        addCard(name, 'installing');
+        addAlert(req.session, name);
 
         if (image.startsWith('https://')){
             mkdirSync(`./appdata/${name}`, { recursive: true });

views/dashboard.html

@@ -7,8 +7,8 @@
     <title>DweebUI - Dashboard</title>
     <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.min.js" defer></script>
-    <script src="/js/htmx-sse.js"></script>
+    <script src="/js/htmx-sse.js" defer></script>
     <style>
       @import url('/fonts/inter.css');
       :root {
@@ -138,10 +138,8 @@
               </div>
             </div>
 
-            
-            <!-- HTMX -->
             <div class="col-12">
-              <div class="row row-cards" id="containers" data-hx-post="/dashboard/containers" data-hx-trigger="load" data-hx-swap="innerHTML">
+              <div class="row row-cards" id="containers">
               </div>
             </div>
 
@@ -151,7 +149,7 @@
               </div>
             </div>
             
-            <!-- HTMX Target-->
+            <!-- HTMX Modal 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">

views/modals/permissions.html

@@ -14,11 +14,11 @@
         <div class="row">
         
         <div class="col">
-            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
+            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" name="reset_permissions" hx-post="/updatePermissions" hx-trigger="click" hx-confirm="Are you sure you want to reset permissions for this container?">Reset</button>
         </div>
-        <div class="col">
+        <!-- <div class="col">
             <button type="button" class="btn btn-primary" data-bs-dismiss="modal" disabled="">Update</button>
-        </div>
+        </div> -->
         </div>
         </div>
     </div>

views/partials/navbar.html

@@ -263,17 +263,6 @@
             </a>
           </li>
 
-          <li class="nav-item">
-            <a class="nav-link" href="/portal">
-              <span
-                class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from https://tabler-icons.io/i/user -->
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" 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 d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>              </span>
-              <span class="nav-link-title">
-                Portal
-              </span>
-            </a>
-          </li>
-
         </ul>
 
         <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">

views/partials/user_permissions.html

@@ -136,7 +136,7 @@
               </div>
 
 
-              <div class="row mb-4">
+              <div class="row mb-2">
                 <div class="col-9">
                   <label class="row text-start">
                     <span class="col">
@@ -151,6 +151,24 @@
                 </div>
               </div>
 
+
+              <div class="row mb-4">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      View
+                    </span>
+                  </label>
+                </div>
+                <div class="col-3">
+                  <label class="form-check form-check-single form-switch text-end">
+                    <input class="form-check-input" type="checkbox" name="selectEntryNumber" value="view" data-ViewCheck>
+                  </label>
+                </div>
+              </div>
+
+              
+
               <div class="row mb-2">
                 <button class="btn" type="button" id="submit" hx-post="/updatePermissions" hx-vals="#updatePermissionsEntryNumber" hx-swap="outerHTML">Update  </button>
               </div>