new error display logic init

src/main/resources/messages_en_GB.properties

@@ -131,7 +131,7 @@ home.certSign.desc=Signs a PDF with a Certificate/Key (PEM/P12)
 home.pageLayout.title=Multi-Page Layout
 home.pageLayout.desc=Merge multiple pages of a PDF document into a single page
 
-
+error.pdfPassword=The PDF Document is passworded and either the password was not provided or was incorrect
 
 downloadPdf=Download PDF
 text=Text

src/main/resources/templates/error.html

@@ -103,7 +103,7 @@ margin-top: 0;
         <div id="content-wrap">
         
     <div th:insert="~{fragments/navbar.html :: navbar}"></div>
-    
+    <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
       <div class="container">
         
         <div id="support-section">

src/main/resources/templates/fragments/common.html

@@ -220,6 +220,14 @@ document.addEventListener("DOMContentLoaded", function () {
 
 <th:block th:fragment="fileSelector(name, multiple)"  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: 'true', notRequired=${notRequired} ?: false">
     <script>
+	    function showErrorBanner(message, stackTrace) {
+	        const errorContainer = document.getElementById("errorContainer");
+	        errorContainer.style.display = "block"; // Display the banner
+	        document.querySelector("#errorContainer .alert-heading").textContent = "Error";
+	        document.querySelector("#errorContainer p").textContent = message;
+	        document.querySelector("#traceContent").textContent = stackTrace;
+	    }
+    
         $(document).ready(function() {
             $('form').submit(async function(event) {
                 const boredWaiting = localStorage.getItem('boredWaiting');
@@ -311,7 +319,11 @@ document.addEventListener("DOMContentLoaded", function () {
                                 // Format the error message
                                 const errorMessage = JSON.stringify(json, null, 2);
                                 // Display the error message in an alert
-                                alert(`An error occurred: ${errorMessage}`);
+                                if(errorMessage.toLowerCase().includes('the password is incorrect') ||  errorMessage.toLowerCase().includes('Password is not provided')){
+                                	alert('[[#{error.pdfPassword}]]');
+                                } else {
+                                	 showErrorBanner(json.error + ':' + json.message, json.trace);
+                                }
                             } else {
                                 const blob = await response.blob()
                                 console.log("else save 2 zip")
@@ -332,11 +344,16 @@ document.addEventListener("DOMContentLoaded", function () {
                             // Create an error message to display to the user
                             const message = `${errorMessage}\n\n${stackTrace}`;
                         
-                            $('#submitBtn').text(submitButtonText);
+                            
+                            
 
                             // Display the error message to the user
-                            alert(message);
+                            if(errorMessage.toLowerCase().includes('the password is incorrect') ||  errorMessage.toLowerCase().includes('Password is not provided')){
-                            
+                                showErrorBanner('[[#{error.pdfPassword}]]', stackTrace);
+                            } else {
+                                showErrorBanner('[[#{error.generic}]]', stackTrace);
+                            }
+                            $('#submitBtn').text(submitButtonText);
                         };
                             
                     }

src/main/resources/templates/fragments/errorBannerPerPage.html

@@ -0,0 +1,220 @@
+<th:block th:fragment="errorBannerPerPage">
+
+  <style>
+    #github-button,
+    #discord-button {
+      display: inline-block;
+      padding: 1rem 2rem;
+      background-color: #008CBA;
+      color: #fff;
+      text-align: center;
+      text-decoration: none;
+      border-radius: 3rem;
+      transition: all 0.3s ease-in-out;
+    }
+
+    #github-button:hover,
+    #discord-button:hover {
+      background-color: #005b7f;
+    }
+  </style>
+  <div id="errorContainer" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
+  <h4 class="alert-heading">Error</h4>
+  <p></p>
+  <button type="button" class="btn btn-danger" onclick="toggletrace()">Show Stack Trace</button>
+  <button type="button" class="btn btn-secondary" onclick="copytrace()">Copy Stack Trace</button>
+  <button type="button" class="btn btn-info" onclick="showHelp()">Help</button>
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="dismissError()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <!-- Stack trace section -->
+  <div id="trace" style="max-height: 0; overflow: hidden;">
+    <div style="background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 3px; padding: 10px; margin-top: 5px;">
+      <pre id="traceContent"></pre>
+    </div>
+  </div>
+  
+
+  
+</div>
+
+<!-- Help Modal -->
+   <style>
+	#helpModalDialog {
+        width: 90%;
+        max-width: 800px;
+    }
+      h1 {
+        text-align: center;
+        margin-top: 10%;
+      }
+
+      p {
+
+        text-align: center;
+        margin-top: 2em;
+      }
+
+
+        .button:hover {
+          background-color: #005b7f;
+        }
+  
+      .features-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
+        gap: 25px 30px;
+      }
+
+      .feature-card {
+        border: 1px solid rgba(0, 0, 0, .125);
+        border-radius: 0.25rem;
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .feature-card .card-text {
+        flex: 1;
+      }
+      
+#support-section {
+background-color: #f9f9f9;
+padding: 4rem;
+  margin-top: 1rem;
+text-align: center;
+}
+
+#support-section h1 {
+margin-top: 0;
+}
+
+#support-section p {
+margin-top: 0;
+}
+
+#button-group {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+#github-button, #discord-button {
+  display: inline-block;
+  padding: 1rem 2rem;
+  margin: 1rem;
+  background-color: #008CBA;
+  color: #fff;
+  font-size: 1.2rem;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 3rem;
+  transition: all 0.3s ease-in-out;
+}
+
+#github-button:hover, #discord-button:hover, #home-button:hover {
+  background-color: #005b7f;
+}
+
+#home-button {
+  display: block;
+        width: 200px;
+        height: 50px;
+        margin: 2em auto;
+        background-color: #008CBA;
+        color: white;
+        text-align: center;
+        line-height: 50px;
+        text-decoration: none;
+        font-weight: bold;
+        border-radius: 25px;
+  transition: all 0.3s ease-in-out;
+}
+
+      
+    </style>
+    
+	<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
+	  <div class="modal-dialog modal-dialog-centered" role="document" id="helpModalDialog">
+	    <div class="modal-content">
+	      <div class="modal-header">
+	        <h5 class="modal-title" id="helpModalLabel">Help</h5>
+	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	          <span aria-hidden="true">&times;</span>
+	        </button>
+	      </div>
+	      <div class="modal-body">
+
+	        <div class="container">
+	          <div id="support-section">
+	            <h1 class="display-2">Oops!</h1>
+	            <p class="lead">Sorry for the issue!.</p>
+	            <br>
+	            <h2>Need help / Found an issue?</h2>
+	            <p>If you're still having trouble, don't hesitate to reach out to us for help. You can submit a ticket on our GitHub page or contact us through Discord:</p>
+	            <div id="button-group">
+	              <a href="https://github.com/Frooodle/Stirling-PDF/issues" id="github-button" target="_blank">GitHub - Submit a ticket</a>
+	              <a href="https://discord.gg/Cn8pWhQRxZ" id="discord-button" target="_blank">Discord - Submit Support post</a>
+	            </div>  
+	            <a href="/" id="home-button">Go to Homepage</a>
+	            <a href="/" id="home-button">Close</a>
+	          </div>
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+  <script>
+    var traceVisible = false;
+
+    function toggletrace() {
+      var traceDiv = document.getElementById("trace");
+      if (!traceVisible) {
+        traceDiv.style.maxHeight = "500px";
+        traceVisible = true;
+      } else {
+        traceDiv.style.maxHeight = "0px";
+        traceVisible = false;
+      }
+      adjustContainerHeight();
+    }
+
+    function copytrace() {
+      var flip = false
+    	if(!traceVisible) {
+    		 toggletrace()
+    		 flip = true
+    	}
+      var traceContent = document.getElementById("traceContent");
+      var range = document.createRange();
+      range.selectNode(traceContent);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+      document.execCommand("copy");
+      window.getSelection().removeAllRanges();
+      if(flip){
+    	  toggletrace()
+      }
+    }
+
+    function dismissError() {
+      var errorContainer = document.getElementById("errorContainer");
+      errorContainer.style.display = "none";
+      errorContainer.style.height ="0";
+    }
+
+    function adjustContainerHeight() {
+      var errorContainer = document.getElementById("errorContainer");
+      var traceDiv = document.getElementById("trace");
+      if (traceVisible) {
+        errorContainer.style.height = errorContainer.scrollHeight - traceDiv.scrollHeight + traceDiv.offsetHeight + "px";
+      } else {
+        errorContainer.style.height = "auto";
+      }
+    }
+    function showHelp() {
+        $('#helpModal').modal('show');
+      }
+  </script>
+</th:block>

src/main/resources/templates/fragments/navbar.html

@@ -349,8 +349,8 @@ function compareVersions(version1, version2) {
         </script>
         
     </nav>
-    <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
     
+	<div th:insert="~{fragments/errorBannerPerPage.html :: errorBannerPerPage}"></div>
     <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content dark-card">