Updates to permissions modal

README.md

@@ -4,9 +4,9 @@
 <p align="center">
     <a href="#"><img src="https://img.shields.io/github/stars/lllllllillllllillll/DweebUI?style=flat"/></a>
     <a href="https://github.com/lllllllillllllillll"><img src="https://img.shields.io/github/commit-activity/y/lllllllillllllillll/DweebUI"/></a>
-    <a href="#"><img src="https://img.shields.io/docker/pulls/lllllllillllllillll/dweebui"/></a>
-    <a href="#"><img src="https://img.shields.io/github/languages/top/lllllllillllllillll/DweebUI"/></a>
-    <a href="#"><img src="https://img.shields.io/github/license/lllllllillllllillll/DweebUI"/></a>
+    <a href="https://hub.docker.com/r/lllllllillllllillll/dweebui"><img src="https://img.shields.io/docker/pulls/lllllllillllllillll/dweebui"/></a>
+    <a href="https://github.com/lllllllillllllillll/DweebUI"><img src="https://img.shields.io/github/languages/top/lllllllillllllillll/DweebUI"/></a>
+    <a href="https://github.com/lllllllillllllillll/DweebUI/blob/main/LICENSE"><img src="https://img.shields.io/github/license/lllllllillllllillll/DweebUI"/></a>
     <a href="https://www.reddit.com/r/dweebui"><img src="https://img.shields.io/badge/reddit-orange"/></a>
     <a href="https://www.buymeacoffee.com/lllllllillllllillll"><img src="https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?logo=buy-me-a-coffee"/></a>
 </p>
@@ -22,7 +22,6 @@
 ## Features
 * [x] Dashboard provides server metrics, container metrics, and container controls, on a single page.
 * [x] View container logs.
-* [x] View container logs.
 * [ ] Update containers (planned).
 * [x] Manage your Docker networks, images, and volumes.
 * [x] Light/Dark Mode.

controllers/dashboard.js

@@ -9,6 +9,8 @@ let hidden = '';
 
 // The actual page
 export const Dashboard = (req, res) => {
+
+    if (!req.session.user) { res.redirect("/logout"); return; }
     
     res.render("dashboard", {
         name: req.session.user,
@@ -320,80 +322,6 @@ export const Logs = (req, res) => {
     });
 }
 
-export const Modals = async (req, res) => {
-    let name = req.header('hx-trigger-name');
-    let id = req.header('hx-trigger');
-    let title = name.charAt(0).toUpperCase() + name.slice(1);
-
-    if (id == 'permissions') {
-
-        let permissions_modal = `
-        <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
-          <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">${title} Permissions</h5>
-            </div>
-            <div class="modal-body">
-                <form action="" id="permissions_modal" method="POST">
-                    <div class="accordion" id="modal-accordion">
-                        PermissionsList
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <div class="row">
-                
-                <div class="col">
-                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
-                </div>
-                <div class="col">
-                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Update</button>
-                </div>
-                </div>
-              </div>
-            </div>
-          </div>`;
-
-        let permissions_list = '';
-        let users = await User.findAll({ attributes: ['username', 'UUID']});
-
-        for (let i = 0; i < users.length; i++) {
-            let user_permissions = readFileSync('./views/modals/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});
-            }
-            
-            user_permissions = user_permissions.replace(/UserEntry/g, i);
-            user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
-
-            permissions_list += user_permissions;
-        }
-
-        permissions_modal = permissions_modal.replace(/PermissionsList/g, permissions_list);
-        res.send(permissions_modal);
-        return;
-    }
-
-
-
-    if (id == 'uninstall') {
-        let 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;
-    }
-
-    let modal = readFileSync('./views/modals/details.html', 'utf8');
-    let details = await containerInfo(name);
-
-    modal = modal.replace(/AppName/g, details.name);
-    modal = modal.replace(/AppImage/g, details.image);
-    res.send(modal);
-}
-
 export const Action = async (req, res) => {
     let name = req.header('hx-trigger-name');
     let state = req.header('hx-trigger');
@@ -444,4 +372,132 @@ export const Action = async (req, res) => {
         hidden = hidden.map((container) => container.name);
         res.send("ok");
     }   
+}
+
+
+export const Modals = async (req, res) => {
+    let name = req.header('hx-trigger-name');
+    let id = req.header('hx-trigger');
+    let title = name.charAt(0).toUpperCase() + name.slice(1);
+
+    if (id == 'permissions') {
+        let permissions_list = '';
+        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});
+            }
+            
+            user_permissions = user_permissions.replace(/EntryNumber/g, i);
+            user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
+            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;
+    }
+
+
+
+    if (id == 'uninstall') {
+        let 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;
+    }
+
+    let modal = readFileSync('./views/modals/details.html', 'utf8');
+    let details = await containerInfo(name);
+
+    modal = modal.replace(/AppName/g, details.name);
+    modal = modal.replace(/AppImage/g, details.image);
+    res.send(modal);
+}
+
+
+export const UpdatePermissions = async (req, res) => {
+
+    let user = req.body.username;
+    let container = req.body.container;
+    let id = req.header('hx-trigger');
+    
+    console.log(`${req.session.user} is updating permissions for: ${user} on ${container}`);
+
+    Object.keys(req.body).forEach(async function(key) {
+        if (key != 'username' && key != 'container') {
+            let permissions = req.body[key];
+
+            if (permissions.includes('uninstall')){
+                await Permission.update({ uninstall: true }, { where: {containerName: container, user: user}});
+            }   
+            else {
+                await Permission.update({ uninstall: false }, { where: {containerName: container, user: user}});
+            }
+
+            if (permissions.includes('edit')){
+                await Permission.update({ edit: true }, { where: {containerName: container, user: user}});
+            }   
+            else {
+                await Permission.update({ edit: false }, { where: {containerName: container, user: user}});
+            }
+
+            if (permissions.includes('upgrade')){
+                await Permission.update({ upgrade: true }, { where: {containerName: container, user: user}});
+            }   
+            else {
+                await Permission.update({ upgrade: false }, { where: {containerName: container, user: user}});
+            }
+            
+            if (permissions.includes('start')){
+                await Permission.update({ start: true }, { where: {containerName: container, user: user}});
+            }   else {
+                await Permission.update({ start: false }, { where: {containerName: container, user: user}});
+            }
+
+            if (permissions.includes('stop')){
+                await Permission.update({ stop: true }, { where: {containerName: container, user: user}});
+            }   else {
+                await Permission.update({ stop: false }, { where: {containerName: container, user: user}});
+            }
+
+            if (permissions.includes('pause')){
+                await Permission.update({ pause: true }, { where: {containerName: container, user: user}});
+            }   else {
+                await Permission.update({ pause: false }, { where: {containerName: container, user: user}});
+            }
+
+            if (permissions.includes('restart')){
+                await Permission.update({ restart: true }, { where: {containerName: container, user: user}});
+            }   else {
+                await Permission.update({ restart: false }, { where: {containerName: container, user: user}});
+            }
+
+            if (permissions.includes('logs')){
+                await Permission.update({ logs: true }, { where: {containerName: container, user: user}});
+            }
+            else {
+                await Permission.update({ logs: false }, { 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;
+    }
 }

router/index.js

@@ -1,10 +1,12 @@
 import express from "express";
+import { Permission, User } from '../database/models.js';
+
 export const router = express.Router();
 
 // Controllers
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Register, submitRegister } from "../controllers/register.js";
-import { Dashboard, Logs, Modals, Stats, Chart, SSE, Card, updateCards, Containers, Action } from "../controllers/dashboard.js";
+import { Dashboard, Logs, Modals, Stats, Chart, SSE, Card, updateCards, Containers, Action, UpdatePermissions } from "../controllers/dashboard.js";
 import { Apps, appSearch, InstallModal, ImportModal, LearnMore } from "../controllers/apps.js";
 import { Users } from "../controllers/users.js";
 import { Images, removeImage } from "../controllers/images.js";
@@ -38,6 +40,7 @@ router.get("/sse_event", auth, SSE);
 router.get("/containers", auth, Containers);
 router.get("/card", auth, Card);
 router.get("/new_cards", auth, updateCards);
+router.post("/updatePermissions", auth, UpdatePermissions);
 
 router.get("/images", auth, Images);
 router.post("/removeImage", auth, removeImage);
@@ -80,3 +83,4 @@ import { Uninstall } from "../functions/uninstall.js"
 
 router.post("/install", auth, Install);
 router.post("/uninstall", auth, Uninstall);
+

views/modals/permissions.html

@@ -1,161 +1,25 @@
-<div class="accordion-item mb-3" style="border: 1px solid grey;">
-    <h2 class="accordion-header" id="heading-UserEntry">
-      <button class="accordion-button collapsed row" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-UserEntry" aria-expanded="false">
-        <span class="avatar avatar-sm bg-green-lt col-3 text-start">JD</span>
-          <div class="col text-end" style="margin-right: 10px;">PermissionsUsername</div>
-      </button>
-    </h2>
-    <div id="collapse-UserEntry" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
-      <div class="accordion-body pt-0">
-
-
-        <div class="">
-          <div class="">
-
-            <div class="row mb-3">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    All
-                  </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="select" onclick="selectAll('select')">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Uninstall
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Edit
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Upgrade
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Start
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Stop
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Pause
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Restart
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-
-            <div class="row mb-4">
-              <div class="col-9">
-                <label class="row text-start">
-                  <span class="col">
-                    Logs
-                  </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="select">
-                </label>
-              </div>
-            </div>
-
-            <div class="row mb-2">
-              <button class="btn" type="submit" formaction="/updatePermissions">Update</button>
+<div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
+    <div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title">PermissionsTitle Permissions</h5>
+    </div>
+    <div class="modal-body">
+        
+            <div class="accordion" id="modal-accordion">
+                PermissionsList
             </div>
 
-
-          </div>
+    </div>
+    <div class="modal-footer">
+        <div class="row">
+        
+        <div class="col">
+            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
+        </div>
+        <div class="col">
+            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Update</button>
+        </div>
+        </div>
         </div>
-
-      </div>
     </div>
-  </div>
+</div>

views/partials/user_permissions.html

@@ -0,0 +1,164 @@
+<div class="accordion-item mb-3" style="border: 1px solid grey;">
+    <h2 class="accordion-header" id="heading-EntryNumber">
+      <button class="accordion-button collapsed row" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-EntryNumber" aria-expanded="false">
+        <span class="avatar avatar-sm bg-green-lt col-3 text-start">JD</span>
+          <div class="col text-end" style="margin-right: 10px;">PermissionsUsername</div>
+      </button>
+    </h2>
+    <div id="collapse-EntryNumber" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+      <div class="accordion-body pt-0">
+
+
+        <div class="">
+          <div class="">
+            <form id="updatePermissionsEntryNumber">
+              <div class="row mb-3">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      All
+                    </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" onclick="selectAll('selectEntryNumber')">
+                  </label>
+                </div>
+              </div>
+
+              <input type="hidden" name="username" value="PermissionsUsername">
+              <input type="hidden" name="container" value="PermissionsContainer">
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Uninstall
+                    </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="uninstall">
+                  </label>
+                </div>
+              </div>
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Edit
+                    </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="edit">
+                  </label>
+                </div>
+              </div>
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Upgrade
+                    </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="upgrade">
+                  </label>
+                </div>
+              </div>
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Start
+                    </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="start">
+                  </label>
+                </div>
+              </div>
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Stop
+                    </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="stop">
+                  </label>
+                </div>
+              </div>
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Pause
+                    </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="pause">
+                  </label>
+                </div>
+              </div>
+
+              <div class="row mb-2">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Restart
+                    </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="restart">
+                  </label>
+                </div>
+              </div>
+
+
+              <div class="row mb-4">
+                <div class="col-9">
+                  <label class="row text-start">
+                    <span class="col">
+                      Logs
+                    </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="logs">
+                  </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>
+
+            </form>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>