Split some code into header/footer files

Add a simple login
Notifiarr · Nov 20, 2023 · ba5eb45 · ba5eb45
1 parent ca21f60
commit ba5eb45
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 159 deletions.
diff --git a/README.md b/README.md
@@ -84,6 +84,13 @@ Variables
 | PGID | PGID | 100 |
 | UMASK | UMASK | 022 |
 
+### Login
+There is support for a simple login mechanism but i would recomment using something like a reverse proxy with authentication
+- Add a file `logins` to `/config`
+- Add `username:password` to the file and save it
+- Reload
+- Multiple logins, drop a line and add another `username:password`
+
 ### Screenshots
 ![image](https://github.com/Notifiarr/dockwatch/assets/8321115/bac13748-fffd-4624-bc94-6631e054d536)
 ![image](https://github.com/Notifiarr/dockwatch/assets/8321115/d76842e2-d362-4e3b-9c01-168f0497e464)

diff --git a/root/app/www/public/ajax/login.php b/root/app/www/public/ajax/login.php
@@ -0,0 +1,25 @@
+<?php
+
+/*
+----------------------------------
+ ------  Created: 111923   ------
+ ------  Austin Best	   ------
+----------------------------------
+*/
+
+require 'shared.php';
+
+if ($_POST['m'] == 'login') {
+    $loginsFile = file(LOGIN_FILE);
+    foreach ($loginsFile as $login) {
+        list($user, $pass) = explode(':', $login);
+        if ($user === $_POST['user'] && $pass === $_POST['pass']) {
+            $_SESSION['authenticated'] = true;
+        }
+    }
+}
+
+if ($_POST['m'] == 'logout') {
+    session_unset();
+    session_destroy();
+}
diff --git a/root/app/www/public/includes/constants.php b/root/app/www/public/includes/constants.php
@@ -10,6 +10,7 @@
 define('APP_NAME', 'DockWatch');
 
 //-- PATHS
+define('LOGIN_FILE', '/config/logins');
 define('SETTINGS_FILE', '/config/settings.json');
 define('STATE_FILE', '/config/state.json');
 define('PULL_FILE', '/config/pull.json');

diff --git a/root/app/www/public/includes/footer.php b/root/app/www/public/includes/footer.php
@@ -0,0 +1,67 @@
+<?php
+
+/*
+----------------------------------
+ ------  Created: 111523   ------
+ ------  Austin Best	   ------
+----------------------------------
+*/
+
+?>
+            </div>
+            <!-- App End -->
+        </div>
+        <!-- Content End -->
+
+        <!-- Back to Top -->
+        <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
+    </div>
+
+    <!-- Toast container -->
+    <div class="toast-container bottom-0 end-0 p-3" style="z-index: 10000 !important; position: fixed;"></div>
+
+    <!-- Loading modal -->
+    <div class="modal fade" id="loading-modal" style="z-index: 9999 !important;" data-bs-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content bg-dark" style="border: grey solid 1px;">
+                <div class="modal-header" style="border: grey solid 1px;">
+                    <h5 class="modal-title text-primary">Loading</h5>
+                    <button type="button" class="btn btn-outline-primary btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body" style="border: grey solid 1px;">
+                    <p>
+                        <div class="spinner-border text-primary" style="margin-right: 1em;"></div>
+                        <span class="text-white">I'm gathering everything needed to complete the request, give me just a moment...</span>
+                    </p>
+                </div>
+                <div class="modal-footer">&nbsp;</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Mass trigger modal -->
+    <div class="modal fade" id="massTrigger-modal" style="z-index: 9999 !important;" data-bs-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content bg-dark" style="border: grey solid 1px;">
+                <div class="modal-header" style="border: grey solid 1px;">
+                    <h5 class="modal-title text-primary"><div id="massTrigger-spinner" class="spinner-border text-primary" style="margin-right: 1em;"></div> Mass Trigger</h5>
+                </div>
+                <div class="modal-body" style="border: grey solid 1px;">
+                    <div id="massTrigger-header"></div>
+                    <div id="massTrigger-results" style="max-height: 200px; overflow: auto;"></div>
+                </div>
+                <div class="modal-footer" align="center">
+                    <button id="massTrigger-close-btn" style="display: none;" type="button" class="btn btn-outline-success" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- JavaScript Libraries -->
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Javascript -->
+    <?= loadJS() ?>
+</body>
+</html>
diff --git a/root/app/www/public/includes/header.php b/root/app/www/public/includes/header.php
@@ -0,0 +1,88 @@
+<?php
+
+/*
+----------------------------------
+ ------  Created: 111523   ------
+ ------  Austin Best	   ------
+----------------------------------
+*/
+
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Docker Watcher</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="" name="keywords">
+    <meta content="" name="description">
+
+    <!-- Favicon -->
+    <link href="img/favicon.ico" rel="icon">
+
+    <!-- Google Web Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@500;700&display=swap" rel="stylesheet"> 
+
+    <!-- Icon Font Stylesheet -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
+
+    <!-- Customized Bootstrap Stylesheet -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Template Stylesheet -->
+    <link href="css/style.css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container-fluid position-relative d-flex p-0">
+        <!-- Spinner Start -->
+        <div id="spinner" class="show bg-dark position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
+            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+        <!-- Spinner End -->
+
+        <!-- Sidebar Start -->
+        <div class="sidebar pe-4 pb-3">
+            <nav class="navbar bg-secondary navbar-dark">
+                <a href="index.php" class="navbar-brand mx-4">
+                    <h3 class="text-primary">DockWatch</h3>
+                </a>
+                <div class="navbar-brand w-100 mb-1 text-center">
+                    <a href="https://github.com/Notifiarr/dockwatch" target="_blank"><i class="fab fa-github btn-secondary me-2"></i></a>
+                    <a href="https://notifiarr.com/discord" target="_blank"><i class="fab fa-discord btn-secondary"></i></a>
+                </div>
+                <?php if ($_SESSION['authenticated']) { ?>
+                <div class="navbar-nav w-100">
+                    <a id="menu-overview" onclick="initPage('overview')" style="cursor: pointer;" class="nav-item nav-link active"><i class="fas fa-heartbeat me-2"></i>Overview</a>
+                    <a id="menu-containers" onclick="initPage('containers')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-th me-2"></i>Containers</a>
+                    <a id="menu-notification" onclick="initPage('notification')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-comment-dots me-2"></i>Notifications</a>
+                    <a id="menu-settings" onclick="initPage('settings')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-tools me-2"></i>Settings</a>
+                    <a id="menu-logs" onclick="initPage('logs')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-file-code me-2"></i>Logs</a>
+                    <a onclick="logout()" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-sign-out-alt me-2"></i>Logout</a>
+                </div>
+                <?php } ?>
+            </nav>
+            <div class="w-100 text-center" style="position: absolute; bottom: 0;">
+                Theme By <a href="https://htmlcodex.com">HTML Codex</a>
+            </div>
+        </div>
+        <!-- Sidebar End -->
+
+        <!-- Content Start -->
+        <div class="content">
+            <!-- Navbar Start -->
+            <nav class="navbar navbar-expand bg-secondary navbar-dark sticky-top px-4 py-0">
+                <a href="#" class="sidebar-toggler flex-shrink-0 m-2">
+                    <i class="fa fa-bars"></i>
+                </a>
+            </nav>
+            <!-- Navbar End -->
+
+            <!-- App Start -->
+            <div class="container-fluid pt-4 px-4">
diff --git a/root/app/www/public/index.php b/root/app/www/public/index.php
@@ -8,146 +8,16 @@
 */
 
 require 'loader.php';
-
+require 'includes/header.php';
 $dockerPerms = dockerPermissionCheck();
 ?>
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>Docker Watcher</title>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <meta content="" name="keywords">
-    <meta content="" name="description">
-
-    <!-- Favicon -->
-    <link href="img/favicon.ico" rel="icon">
-
-    <!-- Google Web Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@500;700&display=swap" rel="stylesheet"> 
-
-    <!-- Icon Font Stylesheet -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
-
-    <!-- Customized Bootstrap Stylesheet -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
-
-    <!-- Template Stylesheet -->
-    <link href="css/style.css" rel="stylesheet">
-</head>
-
-<body>
-    <div class="container-fluid position-relative d-flex p-0">
-        <!-- Spinner Start -->
-        <div id="spinner" class="show bg-dark position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
-            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
-                <span class="sr-only">Loading...</span>
-            </div>
-        </div>
-        <!-- Spinner End -->
-
-        <!-- Sidebar Start -->
-        <div class="sidebar pe-4 pb-3">
-            <nav class="navbar bg-secondary navbar-dark">
-                <a href="index.php" class="navbar-brand mx-4">
-                    <h3 class="text-primary">DockWatch</h3>
-                </a>
-                <div class="navbar-brand w-100 mb-1 text-center">
-                    <a href="https://github.com/Notifiarr/dockwatch" target="_blank"><i class="fab fa-github btn-secondary me-2"></i></a>
-                    <a href="https://notifiarr.com/discord" target="_blank"><i class="fab fa-discord btn-secondary"></i></a>
-                </div>
-                <div class="navbar-nav w-100">
-                    <a id="menu-overview" onclick="initPage('overview')" style="cursor: pointer;" class="nav-item nav-link active"><i class="fas fa-heartbeat me-2"></i>Overview</a>
-                    <a id="menu-containers" onclick="initPage('containers')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-th me-2"></i>Containers</a>
-                    <a id="menu-notification" onclick="initPage('notification')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-comment-dots me-2"></i>Notifications</a>
-                    <a id="menu-settings" onclick="initPage('settings')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-tools me-2"></i>Settings</a>
-                    <a id="menu-logs" onclick="initPage('logs')" style="cursor: pointer;" class="nav-item nav-link"><i class="fas fa-file-code me-2"></i>Logs</a>
-                </div>
-            </nav>
-            <div class="w-100 text-center" style="position: absolute; bottom: 0;">
-                Theme By <a href="https://htmlcodex.com">HTML Codex</a>
-            </div>
-        </div>
-        <!-- Sidebar End -->
-
-        <!-- Content Start -->
-        <div class="content">
-            <!-- Navbar Start -->
-            <nav class="navbar navbar-expand bg-secondary navbar-dark sticky-top px-4 py-0">
-                <a href="#" class="sidebar-toggler flex-shrink-0 m-2">
-                    <i class="fa fa-bars"></i>
-                </a>
-            </nav>
-            <!-- Navbar End -->
-
-            <!-- App Start -->
-            <div class="container-fluid pt-4 px-4">
-                <div id="content-overview" style="display: none;"></div>
-                <div id="content-containers" style="display: none;"></div>
-                <div id="content-notification" style="display: none;"></div>
-                <div id="content-settings" style="display: none;"></div>
-                <div id="content-logs" style="display: none;"></div>
-                <div id="content-dockerPermissions" style="display: <?= ($dockerPerms ? 'none' : 'block') ?>;">
-                    If you are seeing this, it means the user running this container does not have permission to run docker commands. Please fix that, restart the container and try again.
-                </div>
-            </div>
-            <!-- App End -->
-        </div>
-        <!-- Content End -->
-
-        <!-- Back to Top -->
-        <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
+    <div id="content-overview" style="display: none;"></div>
+    <div id="content-containers" style="display: none;"></div>
+    <div id="content-notification" style="display: none;"></div>
+    <div id="content-settings" style="display: none;"></div>
+    <div id="content-logs" style="display: none;"></div>
+    <div id="content-dockerPermissions" style="display: <?= ($dockerPerms ? 'none' : 'block') ?>;">
+        If you are seeing this, it means the user running this container does not have permission to run docker commands. Please fix that, restart the container and try again.
     </div>
-
-    <!-- Toast container -->
-    <div class="toast-container bottom-0 end-0 p-3" style="z-index: 10000 !important; position: fixed;"></div>
-
-    <!-- Loading modal -->
-    <div class="modal fade" id="loading-modal" style="z-index: 9999 !important;" data-bs-backdrop="static">
-        <div class="modal-dialog">
-            <div class="modal-content bg-dark" style="border: grey solid 1px;">
-                <div class="modal-header" style="border: grey solid 1px;">
-                    <h5 class="modal-title text-primary">Loading</h5>
-                    <button type="button" class="btn btn-outline-primary btn-close" data-bs-dismiss="modal"></button>
-                </div>
-                <div class="modal-body" style="border: grey solid 1px;">
-                    <p>
-                        <div class="spinner-border text-primary" style="margin-right: 1em;"></div>
-                        <span class="text-white">I'm gathering everything needed to complete the request, give me just a moment...</span>
-                    </p>
-                </div>
-                <div class="modal-footer">&nbsp;</div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Mass trigger modal -->
-    <div class="modal fade" id="massTrigger-modal" style="z-index: 9999 !important;" data-bs-backdrop="static">
-        <div class="modal-dialog">
-            <div class="modal-content bg-dark" style="border: grey solid 1px;">
-                <div class="modal-header" style="border: grey solid 1px;">
-                    <h5 class="modal-title text-primary"><div id="massTrigger-spinner" class="spinner-border text-primary" style="margin-right: 1em;"></div> Mass Trigger</h5>
-                </div>
-                <div class="modal-body" style="border: grey solid 1px;">
-                    <div id="massTrigger-header"></div>
-                    <div id="massTrigger-results" style="max-height: 200px; overflow: auto;"></div>
-                </div>
-                <div class="modal-footer" align="center">
-                    <button id="massTrigger-close-btn" style="display: none;" type="button" class="btn btn-outline-success" data-bs-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- JavaScript Libraries -->
-    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-
-    <!-- Javascript -->
-    <?= loadJS() ?>
-</body>
-</html>
+<?php
+require 'includes/footer.php';