Updates to permissions modal

This commit is contained in:
lllllllillllllillll 2024-03-24 14:09:53 -07:00
parent 167dd8917e
commit 365cdde0cc
5 changed files with 326 additions and 239 deletions

View file

@ -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.

View file

@ -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;
}
}

View file

@ -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);

View file

@ -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>
</div>
</div>
</div>
<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>
<div class="modal-body">
<div class="accordion" id="modal-accordion">
PermissionsList
</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>

View file

@ -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>