darkmode fix for account and pagenumber support filename

src/main/java/stirling/software/SPDF/controller/api/other/PageNumbersController.java

@@ -116,7 +116,7 @@ public class PageNumbersController {
             Rectangle pageSize = page.getPageSize();
             PdfCanvas pdfCanvas = new PdfCanvas(page.newContentStreamAfter(), page.getResources(), pdfDoc);
 
-            String text = customText != null ? customText.replace("{n}", String.valueOf(pageNumber)).replace("{total}", String.valueOf(pdfDoc.getNumberOfPages())) : String.valueOf(pageNumber);
+            String text = customText != null ? customText.replace("{n}", String.valueOf(pageNumber)).replace("{total}", String.valueOf(pdfDoc.getNumberOfPages())).replace("{filename}", file.getOriginalFilename().replaceFirst("[.][^.]+$", "")) : String.valueOf(pageNumber);
 
             PdfFont font = PdfFontFactory.createFont(StandardFonts.HELVETICA);
             float textWidth = font.getWidth(text, fontSize);

src/main/resources/application.properties

@@ -20,7 +20,6 @@ server.error.include-message=always
 #logging.level.org.springframework=DEBUG
 #logging.level.org.springframework.security=DEBUG
 
-#login.enabled=true
 
 server.servlet.session.tracking-modes=cookie
 server.servlet.context-path=${APP_ROOT_PATH:/}

src/main/resources/messages_en_GB.properties

@@ -374,6 +374,9 @@ addPageNumbers.selectText.3=Position
 addPageNumbers.selectText.4=Starting Number
 addPageNumbers.selectText.5=Pages to Number
 addPageNumbers.selectText.6=Custom Text
+addPageNumbers.customTextDesc=Custom Text
+addPageNumbers.numberPagesDesc=Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc
+addPageNumbers.customNumberDesc=Defaults to {n}, also accepts 'Page {n} of {total}', 'Text-{n}', '{filename}-{n}
 addPageNumbers.submit=Add Page Numbers
 
 

src/main/resources/static/css/dark-mode.css

@@ -1,5 +1,5 @@
 /* Dark Mode Styles */
-body {
+body, select, textarea {
     --body-background-color: 51, 51, 51;
     --base-font-color: 255, 255, 255;
     background-color: rgb(var(--body-background-color)) !important;
@@ -42,3 +42,52 @@ body {
 .favorite-icon img {
     filter: brightness(0) invert(1) !important;
 }
+table thead {
+    background-color: #333 !important;
+    border: 1px solid #444;
+}
+table th, table td {
+    border: 1px solid #444 !important;
+   color: white;
+}
+.btn {
+    background-color: #444 !important;
+    border: none;
+    color: #fff !important;
+}
+.btn-primary {
+    background-color: #007bff !important;
+    border: none;
+    color: #fff !important;
+}
+.btn-secondary {
+    background-color: #6c757d !important;
+    border: none;
+    color: #fff !important;
+}
+.btn-info {
+    background-color: #17a2b8 !important;
+    border: none;
+    color: #fff !important;
+}
+.btn-danger {
+    background-color: #dc3545 !important;
+    border: none;
+    color: #fff !important;
+}
+.btn-outline-secondary {
+    color: #fff !important;
+    border-color: #fff;
+}
+.btn-outline-secondary:hover {
+    background-color: #444 !important;
+    color: #007bff !important;
+    border-color: #007bff;
+}
+.blackwhite-icon {
+    filter: brightness(0) invert(1);
+}
+hr {
+    border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
+    background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
+}

src/main/resources/static/js/darkmode.js

@@ -1,6 +1,44 @@
 var toggleCount = 0;
 var lastToggleTime = Date.now();
 
+var elements = {
+	lightModeStyles: null,
+	darkModeStyles: null,
+	rainbowModeStyles: null,
+	darkModeIcon: null
+};
+
+function getElements() {
+	elements.lightModeStyles = document.getElementById("light-mode-styles");
+	elements.darkModeStyles = document.getElementById("dark-mode-styles");
+	elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
+	elements.darkModeIcon = document.getElementById("dark-mode-icon");
+}
+
+function setMode(mode) {
+	elements.lightModeStyles.disabled = mode !== "off";
+	elements.darkModeStyles.disabled = mode !== "on";
+	elements.rainbowModeStyles.disabled = mode !== "rainbow";
+	
+	if (mode === "on") {
+        elements.darkModeIcon.src = "moon.svg";
+        // Add the table-dark class to tables for dark mode
+        var tables = document.querySelectorAll('.table');
+        tables.forEach(table => {
+            table.classList.add('table-dark');
+        });
+    } else if (mode === "off") {
+        elements.darkModeIcon.src = "sun.svg";
+        // Remove the table-dark class for light mode
+        var tables = document.querySelectorAll('.table-dark');
+        tables.forEach(table => {
+            table.classList.remove('table-dark');
+        });
+    } else if (mode === "rainbow") {
+		elements.darkModeIcon.src = "rainbow.svg";
+	}
+}
+
 function toggleDarkMode() {
 	var currentTime = Date.now();
 	if (currentTime - lastToggleTime < 1000) {
@@ -10,63 +48,28 @@ function toggleDarkMode() {
 	}
 	lastToggleTime = currentTime;
 
-	var lightModeStyles = document.getElementById("light-mode-styles");
-	var darkModeStyles = document.getElementById("dark-mode-styles");
-	var rainbowModeStyles = document.getElementById("rainbow-mode-styles");
-	var darkModeIcon = document.getElementById("dark-mode-icon");
-
 	if (toggleCount >= 18) {
 		localStorage.setItem("dark-mode", "rainbow");
-		lightModeStyles.disabled = true;
+		setMode("rainbow");
-		darkModeStyles.disabled = true;
-		rainbowModeStyles.disabled = false;
-		darkModeIcon.src = "rainbow.svg";
 	} else if (localStorage.getItem("dark-mode") == "on") {
 		localStorage.setItem("dark-mode", "off");
-		lightModeStyles.disabled = false;
+		setMode("off");
-		darkModeStyles.disabled = true;
-		rainbowModeStyles.disabled = true;
-		darkModeIcon.src = "sun.svg";
 	} else {
 		localStorage.setItem("dark-mode", "on");
-		lightModeStyles.disabled = true;
+		setMode("on");
-		darkModeStyles.disabled = false;
-		rainbowModeStyles.disabled = true;
-		darkModeIcon.src = "moon.svg";
 	}
 }
 
 document.addEventListener("DOMContentLoaded", function() {
-	var lightModeStyles = document.getElementById("light-mode-styles");
+	getElements();
-	var darkModeStyles = document.getElementById("dark-mode-styles");
-	var rainbowModeStyles = document.getElementById("rainbow-mode-styles");
-	var darkModeIcon = document.getElementById("dark-mode-icon");
 
-	if (localStorage.getItem("dark-mode") == "on") {
+	var currentMode = localStorage.getItem("dark-mode");
-		lightModeStyles.disabled = true;
+	if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
-		darkModeStyles.disabled = false;
+		setMode(currentMode);
-		rainbowModeStyles.disabled = true;
+	} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-		darkModeIcon.src = "moon.svg";
+		setMode("on");
-	} else if (localStorage.getItem("dark-mode") == "off") {
-		lightModeStyles.disabled = false;
-		darkModeStyles.disabled = true;
-		rainbowModeStyles.disabled = true;
-		darkModeIcon.src = "sun.svg";
-	} else if (localStorage.getItem("dark-mode") == "rainbow") {
-		lightModeStyles.disabled = true;
-		darkModeStyles.disabled = true;
-		rainbowModeStyles.disabled = false;
-		darkModeIcon.src = "rainbow.svg";
 	} else {
-		if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+		setMode("off");
-			darkModeStyles.disabled = false;
-			rainbowModeStyles.disabled = true;
-			darkModeIcon.src = "moon.svg";
-		} else {
-			darkModeStyles.disabled = true;
-			rainbowModeStyles.disabled = true;
-			darkModeIcon.src = "sun.svg";
-		}
 	}
 
 	document.getElementById("dark-mode-toggle").addEventListener("click", function(event) {

src/main/resources/templates/account.html

@@ -30,7 +30,7 @@
                             </div>
                             <div class="form-group">
                                 <label for="currentPassword" th:text="#{password}">Password</label>
-                                <input type="password" class="form-control" name="currentPassword" id="currentPassword" placeholder="Password">
+                                <input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">
                             </div>
                             <div class="form-group">
                                 <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
@@ -44,7 +44,7 @@
                         <form action="/change-password" method="post">
                             <div class="form-group">
                                 <label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
-                                <input type="password" class="form-control" name="currentPassword" id="currentPassword"  th:placeholder="#{account.oldPassword}">
+                                <input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword"  th:placeholder="#{account.oldPassword}">
                             </div>
                             <div class="form-group">
                                 <label for="newPassword" th:text="#{account.newPassword}">New Password</label>
@@ -70,13 +70,13 @@
 					                <input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>
 					                <div class="input-group-append">
 					                	<button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()"> 
-					                    	<img src="images/clipboard.svg" alt="Copy" style="height:20px;">
+					                    	<img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">
 					                	</button>
 					                    <button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">
-										    <img id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
+										    <img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
 										</button>
 										<button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
-										    <img id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
+										    <img class="blackwhite-icon" id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
 										</button>
 										
 					                  

src/main/resources/templates/other/add-page-numbers.html

@@ -103,12 +103,12 @@
 								<label for="pagesToNumber" th:text="#{addPageNumbers.selectText.5}"></label> <input
 									type="text" class="form-control" id="pagesToNumber"
 									name="pagesToNumber"
-									placeholder="Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc" />
+									th:placeholder="#{addPageNumbers.numberPagesDesc}" />
 							</div>
 							<div class="form-group">
 								<label for="customText" th:text="#{addPageNumbers.selectText.6}"></label> <input type="text"
 									class="form-control" id="customText" name="customText"
-									placeholder="Default just number, also accepts 'Page {n} of {total}', 'Tag-{n}' etc" />
+									th:placeholder="#{addPageNumbers.customNumberDesc}" />
 							</div>
 							<button type="submit" id="submitBtn" class="btn btn-primary"
 								th:text="#{addPageNumbers.submit}"></button>