updated README and minor fixes

CHANGELOG.md

@@ -9,6 +9,7 @@
 * Updated database models.
 * Persistent Database.
 * Install cards displayed on dashboard.
+* Updated docker compose to include HTTPS Env.
 
 ## v0.40 (Feb 26th 2024) - HTMX rewrite
 * Pages rewritten to use HTMX.

README.md

@@ -1,31 +1,27 @@
-# DweebUI
-DweebUI is a web interface for managing Docker, with a zero-config dashboard for controlling and monitoring your containers.
+<h3 align="center"><img width="150" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/public/images/logo.png"></h3>
+<h4 align="center">DweebUI Beta v0.50 ( :fire: Experimental :fire: )</h4>
+<h3 align="center">Free and Open-Source WebUI For Managing Your Containers.</h3>
 
-Alpha v0.50 ( :fire: Experimental :fire: )
 
-   
-[:warning: DweebUI is a management interface and should not be directly exposed to the internet :warning:](https://github.com/lllllllillllllillll/DweebUI/wiki/Exposing-DweebUI-to-the-Internet)
+<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://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>
 
-[![GitHub Stars](https://img.shields.io/github/stars/lllllllillllllillll/DweebUI)](https://github.com/lllllllillllllillll)
-[![GitHub Activity](https://img.shields.io/github/commit-activity/y/lllllllillllllillll/DweebUI)](https://github.com/lllllllillllllillll)
-[![Docker Pulls](https://img.shields.io/docker/pulls/lllllllillllllillll/dweebui)](https://hub.docker.com/repository/docker/lllllllillllllillll/dweebui)
-[![GitHub License](https://img.shields.io/github/license/lllllllillllllillll/DweebUI)](https://github.com/lllllllillllllillll/DweebUI/blob/main/LICENSE)
-[![Coffee](https://img.shields.io/badge/-buy_me_a%C2%A0coffee-gray?logo=buy-me-a-coffee)](https://www.buymeacoffee.com/lllllllillllllillll)
-
-* I started this as a personal project to get more familiar with Javascript and Node.js. 
-* I'm open to any contributions, but you may want to wait until I reach v1.0 first.
-* Please post issues and discussions so I know what bugs and features to focus on.
-
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/dashboard1.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/dashboard1.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/dashboard2.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/dashboard2.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/apps.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/apps.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/images.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/images.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/register.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/register.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/login.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/login.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/syslogs.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/syslogs.png" width="25%"/></a>
-<a href="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/volumes.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/volumes.png" width="25%"/></a>
 
+<h3 align="center"><img width="800" style="border-radius:5px;" alt="screenshot" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/dashboard1.png"></h3>
+<br/>
 
+## About
+* I started this as a personal project to get more familiar with Javascript and Node.js. There may be some rough edges and spaghetti code .
+* I'm open to any contributions but you may want to wait until I reach v1.0 first.
+* Please post issues and discussions so I know what bugs and features to focus on.
+* DweebUI is a management interface and should not be directly exposed to the internet
 
 ## Features
 * [x] Dashboard provides server metrics, container metrics, and container controls, on a single page.
@@ -57,6 +53,7 @@ services:
     environment:
       PORT: 8000
       SECRET: MrWiskers
+      HTTPS: false
     restart: unless-stopped
     ports:
       - 8000:8000

controllers/dashboard.js

@@ -78,13 +78,24 @@ async function containerInfo (containerName) {
     } catch {
         // no exposed ports
     }
+
+    let external = 0;
+    let internal = 0;
+    try {
+        external = ports_list[0].external;
+        internal = ports_list[0].internal;
+    }   catch {
+        // no exposed ports
+    }
+    
+
     let details = {
         name: containerName,
         image: image,
         service: image[image.length - 1].split(':')[0],
         state: info.State.Status,
-        external_port: ports_list[0]?.external || 0,
-        internal_port: ports_list[0]?.internal || 0,
+        external_port: external,
+        internal_port: internal,
         ports: ports_list,
         link: 'localhost',
     }
@@ -122,6 +133,8 @@ async function createCard (details) {
     card = card.replace(/AppIcon/g, details.service);
     card = card.replace(/AppState/g, state);
     card = card.replace(/StateColor/g, state_color);
+    card = card.replace(/ExternalPort/g, details.external_port);
+    card = card.replace(/InternalPort/g, details.internal_port);
     card = card.replace(/ChartName/g, details.name.replace(/-/g, ''));
     card = card.replace(/AppNameState/g, `${details.name}State`);
     card = card.replace(/data-trigger=""/, trigger);

docker-compose.yaml

@@ -6,6 +6,7 @@ services:
     environment:
       PORT: 8000
       SECRET: MrWiskers
+      HTTPS: false
     restart: unless-stopped
     ports:
       - 8000:8000

server.js

@@ -18,8 +18,8 @@ const sessionMiddleware = session({
     resave: false, 
     saveUninitialized: false, 
     cookie:{
-        secure:false, // Only set to true if you are using HTTPS.
-        httpOnly:false, // Only set to true if you are using HTTPS.
+        secure: process.env.HTTPS || false, // Only set to true if you are using HTTPS.
+        httpOnly: process.env.HTTPS || false, // Only set to true if you are using HTTPS.
         maxAge:3600000 * 8 // Session max age in milliseconds. 3600000 = 1 hour.
     }
 });

views/account.html

@@ -21,7 +21,7 @@
 	<body >
 		<div class="page">
 			<!-- Navbar -->
-			<%- include('/partials/navbar.html') %>
+			<%- include('partials/navbar.html') %>
 			<div class="page-wrapper">
 				<!-- Page header -->
 				<div class="page-header d-print-none">
@@ -41,7 +41,7 @@
 						<div class="card">
 							<div class="row g-0">
 								
-								<%- include('/partials/sidebar.html') %>
+								<%- include('partials/sidebar.html') %>
 								
 								<div class="col d-flex flex-column">
 								<div class="card-body">
@@ -120,7 +120,7 @@
 						</div>
 					</div>
 				</div>
-				<%- include('/partials/footer.html') %>
+				<%- include('partials/footer.html') %>
 			</div>
 		</div>
 		<!-- Libs JS -->

views/partials/containerCard.html

@@ -5,7 +5,7 @@
           <img width="100px" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/AppIcon.png" onerror="this.onerror=null;this.src='https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/docker.png';"></img>
         </div>
         <div class="d-flex align-items-center">
-          <div class="subheader text-yellow">0:0</div>
+          <div class="subheader text-yellow">ExternalPort:InternalPort</div>
           <div class="ms-auto lh-1">
             <div class="card-actions btn-actions">
               <div class="card-actions btn-actions">