updates to portal and router

README.md

@@ -3,7 +3,7 @@
 <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>
-    <a href="https://github.com/lllllllillllllillll"><img src="https://img.shields.io/github/commit-activity/y/lllllllillllllillll/DweebUI%2Fdev"/></a>
+    <a href="https://github.com/lllllllillllllillll/DweebUI%2Fdev"><img src="https://img.shields.io/github/commit-activity/y/lllllllillllllillll/DweebUI%2Fdev"/></a>
     <a href="https://github.com/lllllllillllllillll/DweebUI%2Fdev"><img src="https://img.shields.io/github/last-commit/lllllllillllllillll/DweebUI%2Fdev"/></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/blob/main/LICENSE"><img src="https://img.shields.io/github/license/lllllllillllllillll/DweebUI"/></a>

controllers/dashboard.js

@@ -137,7 +137,7 @@ async function createCard (details) {
             break;
     }
     // if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
-    let card  = readFileSync('./views/partials/containerCard.html', 'utf8');
+    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);

controllers/portal.js

@@ -37,6 +37,21 @@ async function CardList () {
 
 }
 
+export const UserContainers = async (req, res) => {
+    let name = req.session.user;
+    let containers = await Permission.findAll({ attributes: ['containerName'], where: { user: name }});
+
+    for (let i = 0; i < containers.length; i++) {
+        if (containers[i].containerName == null) { continue; }
+        let details = await containerInfo(containers[i].containerName);
+        let card = await createCard(details);
+        cardList += card;
+    }
+    res.send(cardList);
+}
+
+
+
 async function containerInfo (containerName) {
     let container = docker.getContainer(containerName);
     let info = await container.inspect();
@@ -104,7 +119,7 @@ async function createCard (details) {
             break;
     }
     // if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
-    let card  = readFileSync('./views/partials/containerCard.html', 'utf8');
+    let card  = readFileSync('./views/partials/containerSimple.html', 'utf8');
     card = card.replace(/AppName/g, details.name);
     card = card.replace(/AppShortName/g, shortname);
     card = card.replace(/AppIcon/g, details.service);
@@ -216,7 +231,8 @@ export const updateCards = async (req, res) => {
 
 
 export const Containers = async (req, res) => {
-    res.send(cardList);
+    CardList();
+    // res.send(cardList);
 }
 
 export const Card = async (req, res) => {

controllers/register.js

@@ -17,7 +17,7 @@ export const Register = function(req,res){
 
 export const submitRegister = async function(req,res){
 
-    let { name, username, email, password, confirmPassword, warning, secret } = req.body;
+    let { name, username, email, password, confirmPassword, secret } = req.body;
     email = email.toLowerCase();
 
 
@@ -31,7 +31,7 @@ export const submitRegister = async function(req,res){
         });
     }
 
-    if((name && email && password && confirmPassword && username && warning) && (secret == SECRET) && (password == confirmPassword)){
+    if((name && email && password && confirmPassword && username) && (secret == SECRET) && (password == confirmPassword)){
 
         async function userRole () {
             let userCount = await User.count();
@@ -98,7 +98,7 @@ export const submitRegister = async function(req,res){
     } else {
         // Redirect to the signup page.
         res.render("register",{
-            "error":"Please fill in all the fields and acknowledge security warning.",
+            "error":"Please fill in all the fields.",
         });
     }
 }

router/index.js

@@ -17,7 +17,7 @@ import { Variables } from "../controllers/variables.js";
 import { Settings } from "../controllers/settings.js";
 import { Supporters, Thanks } from "../controllers/supporters.js";
 import { Syslogs } from "../controllers/syslogs.js";
-import { Portal } from "../controllers/portal.js"
+import { Portal, UserContainers } from "../controllers/portal.js"
 
 // Auth middleware
 const auth = async (req, res, next) => {
@@ -27,12 +27,11 @@ const auth = async (req, res, next) => {
     let path = req.path;
     let trigger = req.header('hx-trigger-name');
 
-    console.log("Auth: ", user, role, path, trigger);
-    console.log(req.path);
+    // console.log("Auth: ", user, role, path, trigger, req.path);
 
     if (!user) { res.redirect('/login'); return; }
-    else if (role == "admin") { next(); return;}
-    else if (path == "/portal" || path == "/account" || path == "/supporters" || path == "/thank") { next(); return; }
+    else if (role == "admin") { next(); return; }
+    else if (path == "/portal" || path == "/account" || path == "/supporters" || path == "/thank" || path == "/user_containers") { next(); return; }
     else { res.redirect('/portal'); return; }
     
 
@@ -103,6 +102,7 @@ router.get("/settings", auth, Settings);
 
 // User routes
 router.get("/portal", auth, Portal);
+router.get("/user_containers", auth, UserContainers);
 router.get("/account", auth, Account);
 router.get("/supporters", auth, Supporters);
 router.post("/thank", auth, Thanks);

views/partials/containerSimple.html

@@ -0,0 +1,71 @@
+  <div class="col-sm-6 col-lg-3 pt-1" hx-get="" hx-trigger="" hx-swap="none" name="AppName">
+    <div class="card">
+      <div class="card-body">
+        <div class="card-stamp card-stamp-sm">
+          <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">ExternalPort:InternalPort</div>
+          <div class="ms-auto lh-1">
+            <div class="card-actions btn-actions">
+              <div class="card-actions btn-actions">
+                <button class="btn-action" title="Start" data-hx-post="/action/start" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-play" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 4v16l13 -8z"></path></svg>
+                </button>
+                <button class="btn-action" title="Stop" data-hx-post="/action/stop" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg>
+                </button>
+                <button class="btn-action" title="Pause" data-hx-post="/action/pause" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-pause" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path></svg>
+                </button>
+                <button class="btn-action" title="Restart" data-hx-post="/action/restart" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-reload" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path><path d="M20 4v5h-5"></path></svg>                          
+                </button>
+                <div class="dropdown">
+                  <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></svg>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-end">
+                    <button class="dropdown-item text-secondary" name="AppName" id="details" data-hx-get="/modals" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Details</button>
+                    <button class="dropdown-item text-secondary" name="AppName" id="logs" data-hx-get="/logs" hx-swap="innerHTML" data-hx-target="#logView" data-bs-toggle="modal" data-bs-target="#log_view">Logs</button>
+                    <button class="dropdown-item text-secondary" name="AppName" id="edit">Edit</button>
+                    <button class="dropdown-item text-primary" name="AppName" id="update" disabled="">Update</button>
+                    <button class="dropdown-item text-danger" name="AppName" id="uninstall" hx-trigger="click" data-hx-get="/modals" hx-swap="innerHTML" data-bs-toggle="modal" data-hx-target="#modals-here" data-bs-target="#modals-here">Uninstall</button>
+                  </div>
+                </div>
+                <div class="dropdown">
+                  <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /> </svg>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-end">
+                    <button class="dropdown-item text-secondary" data-hx-post="/action/hide" data-hx-trigger="click" data-hx-swap="none" name="AppName" id="hide" value="hide">Hide</button>
+                    <button class="dropdown-item text-secondary" data-hx-post="/action/reset" data-hx-trigger="click" data-hx-swap="none" name="AppName" id="reset" value="reset">Reset View</button>
+                    <button class="dropdown-item text-secondary" name="AppName" id="permissions" data-hx-get="/modals" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Permissions</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex align-items-baseline">
+          <div class="h1 me-2" title="AppName" style="margin-bottom: 0;">
+            <a href="http://${link}:${external_port}" target="_blank">
+              AppShortName
+            </a>
+          </div>
+          <div class="ms-auto">
+            <label id="AppNameState">
+              <span class="text-StateColor 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>
+                  AppState
+              </span>
+            </label>
+          </div>
+        </div>
+        
+        
+
+      
+      </div>
+    </div>
+  </div>

views/portal.html

@@ -142,15 +142,15 @@
             
             <!-- HTMX -->
             <div class="col-12">
-              <div class="row row-cards" id="containers" data-hx-get="/containers" data-hx-trigger="load" data-hx-swap="innerHTML">
+              <div class="row row-cards" id="containers" data-hx-get="/user_containers" data-hx-trigger="load" data-hx-swap="innerHTML">
               </div>
             </div>
 
             <!-- HTMX -->
-            <div class="col-12">
+            <!-- <div class="col-12">
               <div class="row row-cards" data-hx-get="/new_cards" data-hx-trigger="sse:update" data-hx-swap="afterbegin" hx-target="#containers">
               </div>
-            </div>
+            </div> -->
             
             <!-- HTMX Target-->
             <div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1">

views/register.html

@@ -90,14 +90,14 @@
             </div>
 
           
-            <div class="mb-2">
+            <!-- <div class="mb-2">
               <label class="form-check">
                 <input type="checkbox" class="form-check-input" name="warning"/>
                 <span class="form-check-label">
                   I understand that<a href="https://github.com/lllllllillllllillll/DweebUI/wiki/Exposing-DweebUI-to-the-Internet"> exposing DweebUI directly to the internet</a> is a bad idea.
                 </span>
               </label>
-            </div>
+            </div> -->
 
           </div>
         </div>
@@ -122,7 +122,7 @@
                 </a>
               </div>
 
-              <button type="submit" class="btn btn-primary">Install</button>
+              <button type="submit" class="btn btn-primary">Register</button>
               
             </div>
           </div>