Working settings page.

CHANGELOG.md

@@ -6,7 +6,12 @@
 * Pushed new docker image with 'latest' tag.
 * Updated compose.yaml volume to /app/config.
 * Fixed container card links.
-* 
+* Moved 'Reset view' button.
+* New - 'Grid view' and 'List view' button (non-functioning).
+* Added try blocks to volumes, images, and networks pages to address GitHub issues.
+* Fixed HTTPS env.
+* New - One-click sign-in if NO_AUTH env is set to 'true' and you're connecting from localhost.
+* New (again) - PM2 to keep the app running if it encounters an error.
 
 ## v0.60 (June 9th 2024) - Permissions system and import templates
 * Converted JS template literals into HTML.

README.md

@@ -1,5 +1,5 @@
 <h3 align="center"><img width="150" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/public/img/logo.png"></h3>
-<h4 align="center">DweebUI Beta v0.60 ( :fire: Experimental :fire: )</h4>
+<h4 align="center">DweebUI Beta v0.70 ( :fire: Experimental :fire: )</h4>
 <h3 align="center">Free and Open-Source WebUI For Managing Your Containers.</h3>
 <p align="center">
     <a href=""><img src="https://img.shields.io/github/stars/lllllllillllllillll/DweebUI?style=flat"/></a>

controllers/settings.js

@@ -1,31 +1,88 @@
+import { read, readFileSync } from 'fs';  
 import { ServerSettings } from '../database/models.js';
 
-export const Settings = (req, res) => {
+
+export const Settings = async (req, res) => {
+
+    let settings = readFileSync('views/partials/settings.html', 'utf8');
+
+    let links = await ServerSettings.findOne({ where: {key: 'links'}});
+    if (links.value != 'localhost' && links.value != '') {
+        settings = settings.replaceAll('data-LinkMode', 'checked');
+        settings = settings.replaceAll('data-LinkValue', `value="${links.value}"`);
+    }
+
+    let registration = await ServerSettings.findOne({ where: {key: 'registration'}});
+    if (registration.value != 'off' && registration.value != '') {
+        settings = settings.replaceAll('data-UserReg', 'checked');
+        settings = settings.replaceAll('data-Passphrase', `value="${registration.value}"`);
+    }
+
+    async function hostInfo(host) {
+        let info = await ServerSettings.findOne({ where: {key: host}});
+        if (info.value != 'off' && info.value != '') {
+            let values = info.value.split(',');
+            return { tag: values[0], ip: values[1], port: values[2] };
+        }
+    }
+    
+    let host2 = await hostInfo('host2');
+    if (host2) {
+        settings = settings.replaceAll('data-Host2', 'checked');
+        settings = settings.replaceAll('data-Tag2', `value="${host2.tag}"`);
+        settings = settings.replaceAll('data-Ip2', `value="${host2.ip}"`);
+        settings = settings.replaceAll('data-Port2', `value="${host2.port}"`);
+    }
+    
+    let host3 = await hostInfo('host3');
+    if (host3) {
+        settings = settings.replaceAll('data-Host3', 'checked');
+        settings = settings.replaceAll('data-Tag3', `value="${host3.tag}"`);
+        settings = settings.replaceAll('data-Ip3', `value="${host3.ip}"`);
+        settings = settings.replaceAll('data-Port3', `value="${host3.port}"`);
+    }
+
+    let host4 = await hostInfo('host4');
+    if (host4) {
+        settings = settings.replaceAll('data-Host4', 'checked');
+        settings = settings.replaceAll('data-Tag4', `value="${host4.tag}"`);
+        settings = settings.replaceAll('data-Ip4', `value="${host4.ip}"`);
+        settings = settings.replaceAll('data-Port4', `value="${host4.port}"`);
+    }
+
 
     res.render("settings", {
         name: req.session.user,
         role: req.session.role,
         avatar: req.session.user.charAt(0).toUpperCase(),
         alert: '',
+        settings: settings,
     });
 }
 
 
-export const settingsAction = async (req, res) => {
-    let action = req.params.action;
-    let name = req.header('hx-trigger-name');
-    let value = req.header('hx-trigger');
-    let ip = req.body.ip;
+export const updateSettings = async (req, res) => {
 
-    if ((action == 'links') && (req.body.links == 'on')) {
+    let trigger = req.header('hx-trigger');
+    if (trigger == 'updated') {
+        let update = `<button class="btn btn-primary" id="submit" hx-trigger="click" hx-post="/settings" hx-swap="outerHTML" hx-target="#submit">
+						Update
+					</button>`
+        res.send(update);
+        return;
+    }
+
+    // Container links
+    let { link_mode, link } = req.body;
+    if (link_mode) {
         let exists = await ServerSettings.findOne({ where: {key: 'links'}});
         if (exists) {
-            const setting = await ServerSettings.update({value: ip}, {where: {key: 'links'}});
+            const setting = await ServerSettings.update({value: link}, {where: {key: 'links'}});
         } else {
-            const newSetting = await ServerSettings.create({ key: 'links', value: ip});
+            const newSetting = await ServerSettings.create({ key: 'links', value: link});
         }
         console.log('Custom links on');
-    }   else if ((action == 'links') && (!req.body.links)) {
+    }   else if (!link_mode) {
         let exists = await ServerSettings.findOne({ where: {key: 'links'}});
         if (exists) {
             const setting = await ServerSettings.update({value: 'localhost'}, {where: {key: 'links'}});
@@ -33,17 +90,17 @@ export const settingsAction = async (req, res) => {
         console.log('Custom links off');
     }
 
-
-    if ((action == 'registration') && (req.body.registration == 'on')) {
+    // User registration
+    let { user_registration, passphrase} = req.body;
+    if (user_registration) {
         let exists = await ServerSettings.findOne({ where: {key: 'registration'}});
         if (exists) {
-            const setting = await ServerSettings.update({value: req.body.secret}, {where: {key: 'registration'}});
+            const setting = await ServerSettings.update({value: passphrase}, {where: {key: 'registration'}});
         } else {
-            const newSetting = await ServerSettings.create({ key: 'registration', value: req.body.secret});
+            const newSetting = await ServerSettings.create({ key: 'registration', value: passphrase});
         }
         console.log('registration on');
-        
-    } else if ((action == 'registration') && (!req.body.registration)) {
+    } else if (!user_registration) {
         let exists = await ServerSettings.findOne({ where: {key: 'registration'}});
         if (exists) {
             const setting = await ServerSettings.update({value: 'off'}, {where: {key: 'registration'}});
@@ -51,5 +108,64 @@ export const settingsAction = async (req, res) => {
         console.log('registration off');
     }
 
-    res.send('ok');
+    // Host 2
+    let { host2, tag2, ip2, port2 } = req.body;
+    if (host2) {
+        let exists = await ServerSettings.findOne({ where: {key: 'host2'}});
+        if (exists) {
+            const setting = await ServerSettings.update({value: `${tag2},${ip2},${port2}`}, {where: {key: 'host2'}});
+        }   else {
+            const newSetting = await ServerSettings.create({ key: 'host2', value: `${tag2},${ip2},${port2}`});
+        }   
+        console.log('host2 on');
+    } else if (!host2) {
+        let exists = await ServerSettings.findOne({ where: {key: 'host2'}});
+        if (exists) {
+            const setting = await ServerSettings.update({value: 'off'}, {where: {key: 'host2'}});
+        }
+        console.log('host2 off');
+    }
+
+    // Host 3
+    let { host3, tag3, ip3, port3 } = req.body;
+    if (host3) {
+        let exists = await ServerSettings.findOne({ where: {key: 'host3'}});
+        if (exists) {
+            const setting = await ServerSettings.update({value: `${tag3},${ip3},${port3}`}, {where: {key: 'host3'}});
+        }   else {
+            const newSetting = await ServerSettings.create({ key: 'host3', value: `${tag3},${ip3},${port3}`});
+        }   
+        console.log('host3 on');
+    } else if (!host3) {
+        let exists = await ServerSettings.findOne({ where: {key: 'host3'}});
+        if (exists) {
+            const setting = await ServerSettings.update({value: 'off'}, {where: {key: 'host3'}});
+        }
+        console.log('host3 off');
+    }
+
+    // Host 4
+    let { host4, tag4, ip4, port4 } = req.body;
+    if (host4) {
+        let exists = await ServerSettings.findOne({ where: {key: 'host4'}});
+        if (exists) {
+            const setting = await ServerSettings.update({value: `${tag4},${ip4},${port4}`}, {where: {key: 'host4'}});
+        } else {
+            const newSetting = await ServerSettings.create({ key: 'host4', value: `${tag4},${ip4},${port4}`});
+        }
+        console.log('host4 on');
+    } else if (!host4) {
+        let exists = await ServerSettings.findOne({ where: {key: 'host4'}});
+        if (exists) {
+            const setting = await ServerSettings.update({value: 'off'}, {where: {key: 'host4'}});
+        }
+        console.log('host4 off');
+    }
+
+
+    let success = `<button class="btn btn-success" id="updated" hx-trigger="load delay:2s" hx-post="/settings" hx-swap="outerHTML" hx-target="#updated">
+					Update
+					</button>`
+
+    res.send(success);
 }

router/index.js

@@ -13,7 +13,7 @@ import { Networks, removeNetwork } from "../controllers/networks.js";
 import { Volumes, addVolume, removeVolume } from "../controllers/volumes.js";
 import { Account } from "../controllers/account.js";
 import { Variables } from "../controllers/variables.js";
-import { Settings, settingsAction } from "../controllers/settings.js";
+import { Settings, updateSettings } from "../controllers/settings.js";
 import { Supporters, Thanks } from "../controllers/supporters.js";
 import { Syslogs } from "../controllers/syslogs.js";
 import { Install } from "../utils/install.js"
@@ -99,7 +99,7 @@ router.get("/syslogs", adminOnly, Syslogs);
 router.get("/variables", adminOnly, Variables);
 
 router.get("/settings", adminOnly, Settings);
-router.post("/settings/:action", adminOnly, settingsAction);
+router.post("/settings", adminOnly, updateSettings);
 
 router.get("/account", sessionCheck, Account);
 router.get("/supporters", sessionCheck, Supporters);

views/partials/settings.html

@@ -0,0 +1,139 @@
+<div class="col d-flex flex-column">
+	<form id="settings">
+	<div class="card-body">
+		<h2 class="mb-4">Settings</h2>
+
+			
+		
+				<h3 class="mt-5">Container Links</h3>
+				<label class="text-muted mb-2">Choose the default behaviour for container links. Enter IP address or Domain before enabling.</label>
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<label class="form-check form-switch form-switch-lg">
+							<input class="form-check-input" type="checkbox" name="link_mode" data-LinkMode>
+							<span class="form-check-label form-check-label-on text-warning">
+								Custom
+							</span>
+							<span class="form-check-label form-check-label-off text-success">
+								Localhost
+							</span>
+						</label>
+					</div>
+					<div class="col-5">
+						<input type="text" class="form-control" name="link" placeholder="IP Address or Domain" data-LinkValue>
+					</div>
+				</div>
+
+				<h3 class="mt-5">User Registration</h3>
+				<label class="text-muted mb-2">Allow other users to register.</label>
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<label class="form-check form-switch form-switch-lg">
+							<input class="form-check-input" type="checkbox" name="user_registration" data-UserReg>
+							<span class="form-check-label form-check-label-on text-success">
+								Enabled
+							</span>
+							<span class="form-check-label form-check-label-off text-danger">
+								Disabled
+							</span>
+						</label>
+					</div>
+					<div class="col-5">
+						<input type="text" class="form-control" name="passphrase" placeholder="multiple-words-strong-passphrase" data-Passphrase>
+					</div>
+				</div>
+
+
+				<h3 class="mt-5">Remote Hosts</h3>
+				<label class="text-muted mb-2">Host #2</label>
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<label class="form-check form-switch form-switch-lg">
+							<input class="form-check-input" type="checkbox" name="host2" data-Host2>
+							<span class="form-check-label form-check-label-on text-success">
+								Enabled
+							</span>
+							<span class="form-check-label form-check-label-off text-danger">
+								Disabled
+							</span>
+						</label>
+					</div>
+					<div class="col-2">
+						<input type="text" class="form-control" name="tag2" placeholder="Tag" data-Tag2>
+					</div>
+					<div class="col-4">
+						<input type="text" class="form-control" name="ip2" placeholder="Host IP" data-Ip2>
+					</div>
+					<div class="col-2">
+						<input type="text" class="form-control" name="port2" placeholder="PORT" data-Port2>
+					</div>
+				</div>
+				
+				<label class="text-muted mb-2">Host #3</label>
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<label class="form-check form-switch form-switch-lg">
+							<input class="form-check-input" type="checkbox" name="host3" data-Host3>
+							<span class="form-check-label form-check-label-on text-success">
+								Enabled
+							</span>
+							<span class="form-check-label form-check-label-off text-danger">
+								Disabled
+							</span>
+						</label>
+					</div>
+					<div class="col-2">
+						<input type="text" class="form-control" name="tag3" placeholder="Tag" data-Tag3>
+					</div>
+					<div class="col-4">
+						<input type="text" class="form-control" name="ip3" placeholder="Host IP" data-Ip3>
+					</div>
+					<div class="col-2">
+						<input type="text" class="form-control" name="port3" placeholder="PORT" data-Port3>
+					</div>
+				</div>
+
+				<label class="text-muted mb-2">Host #4</label>
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<label class="form-check form-switch form-switch-lg">
+							<input class="form-check-input" type="checkbox" name="host4" data-Host4>
+							<span class="form-check-label form-check-label-on text-success">
+								Enabled
+							</span>
+							<span class="form-check-label form-check-label-off text-danger">
+								Disabled
+							</span>
+						</label>
+					</div>
+					<div class="col-2">
+						<input type="text" class="form-control" name="tag4" placeholder="Tag" data-Tag4>
+					</div>
+					<div class="col-4">
+						<input type="text" class="form-control" name="ip4" placeholder="Host IP" data-Ip4>
+					</div>
+					<div class="col-2">
+						<input type="text" class="form-control" name="port4" placeholder="PORT" data-Port4>
+					</div>
+				</div>
+
+				
+
+
+		
+	</div>
+
+
+	<div class="card-footer bg-transparent mt-auto">
+		<div class="btn-list justify-content-end">
+			<a href="#" class="btn">
+				Cancel
+			</a>
+			<button class="btn btn-primary" id="submit" hx-trigger="click" hx-post="/settings" hx-swap="outerHTML" hx-target="#submit">
+				Update
+			</button>
+		</div>
+	</div>
+	</form>
+
+</div>

views/settings.html

@@ -43,136 +43,18 @@
 							<div class="row g-0">
 								
 								<%- include('partials/sidebar.html') %>
-								
-								<div class="col d-flex flex-column">
-									<div class="card-body">
-										<h2 class="mb-4">Settings</h2>
-										
-										
-
-										<h3 class="mt-5">Container Links</h3>
-										<label class="text-muted mb-2">Choose the default behaviour for container links. Enter IP address or Domain before enabling.</label>
-										<div class="row align-items-center">
-											<div class="col-auto">
-												<label class="form-check form-switch form-switch-lg">
-													<input class="form-check-input" type="checkbox" id="submit" name="links" hx-trigger="click" hx-post="/settings/links" hx-swap="none" disabled>
-													<span class="form-check-label form-check-label-on text-warning">
-														Custom
-													</span>
-													<span class="form-check-label form-check-label-off text-success">
-														Localhost
-													</span>
-												</label>
-											</div>
-											<div class="col-6">
-												<input type="text" class="form-control" name="ip" placeholder="IP Address or Domain">
-											</div>
-										</div>
-
-										<h3 class="mt-5">User Registration</h3>
-										<label class="text-muted mb-2">Allow other users to register.</label>
-										<div class="row align-items-center">
-											<div class="col-auto">
-												<label class="form-check form-switch form-switch-lg">
-													<input class="form-check-input" type="checkbox" id="submit" name="registration" hx-trigger="click" hx-post="/settings/registration" hx-swap="none" disabled>
-													<span class="form-check-label form-check-label-on text-success">
-														Enabled
-													</span>
-													<span class="form-check-label form-check-label-off text-danger">
-														Disabled
-													</span>
-												</label>
-											</div>
-											<div class="col-6">
-												<input type="text" class="form-control" name="secret" placeholder="Registration Secret">
-											</div>
-										</div>
-
-
-										<h3 class="mt-5">Remote Hosts</h3>
-										<label class="text-muted mb-2">Host #2</label>
-										<div class="row align-items-center">
-											<div class="col-auto">
-												<label class="form-check form-switch form-switch-lg">
-													<input class="form-check-input" type="checkbox" id="submit" name="registration" hx-trigger="click" hx-post="/settings/registration" hx-swap="none" disabled>
-													<span class="form-check-label form-check-label-on text-success">
-														Enabled
-													</span>
-													<span class="form-check-label form-check-label-off text-danger">
-														Disabled
-													</span>
-												</label>
-											</div>
-											<div class="col-2">
-												<input type="text" class="form-control" name="secret" placeholder="Tag">
-											</div>
-											<div class="col-6">
-												<input type="text" class="form-control" name="secret" placeholder="Host IP">
-											</div>
-										</div>
-										
-										<label class="text-muted mb-2">Host #3</label>
-										<div class="row align-items-center">
-											<div class="col-auto">
-												<label class="form-check form-switch form-switch-lg">
-													<input class="form-check-input" type="checkbox" id="submit" name="registration" hx-trigger="click" hx-post="/settings/registration" hx-swap="none" disabled>
-													<span class="form-check-label form-check-label-on text-success">
-														Enabled
-													</span>
-													<span class="form-check-label form-check-label-off text-danger">
-														Disabled
-													</span>
-												</label>
-											</div>
-											<div class="col-2">
-												<input type="text" class="form-control" name="secret" placeholder="Tag">
-											</div>
-											<div class="col-6">
-												<input type="text" class="form-control" name="secret" placeholder="Host IP">
-											</div>
-										</div>
 
-										<label class="text-muted mb-2">Host #4</label>
-										<div class="row align-items-center">
-											<div class="col-auto">
-												<label class="form-check form-switch form-switch-lg">
-													<input class="form-check-input" type="checkbox" id="submit" name="registration" hx-trigger="click" hx-post="/settings/registration" hx-swap="none" disabled>
-													<span class="form-check-label form-check-label-on text-success">
-														Enabled
-													</span>
-													<span class="form-check-label form-check-label-off text-danger">
-														Disabled
-													</span>
-												</label>
-											</div>
-											<div class="col-2">
-												<input type="text" class="form-control" name="secret" placeholder="Tag">
-											</div>
-											<div class="col-6">
-												<input type="text" class="form-control" name="secret" placeholder="Host IP">
-											</div>
-										</div>
-
-									</div>
-									<div class="card-footer bg-transparent mt-auto">
-										<div class="btn-list justify-content-end">
-											<a href="#" class="btn">
-												Cancel
-											</a>
-											<a href="#" class="btn btn-primary">
-												Submit
-											</a>
-										</div>
-									</div>
-								</div>
+								<%- settings %>
+								
+								
 							</div>
+
 						</div>
 					</div>
 				</div>
 				<%- include('partials/footer.html') %>
 			</div>
 		</div>
-		<!-- Libs JS -->
 		<!-- Tabler Core -->
 		<script src="/js/tabler.min.js" defer></script>
 		<script src="/js/demo.min.js" defer></script>