v3.0.0

Author: 8gudbits

frontend/css/home.css

@@ -257,6 +257,114 @@ td a:hover {
     margin-bottom: 10px;
 }
 
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 400px;
+}
+
+.toast {
+    padding: 12px 16px;
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    animation: slideInRight 0.3s ease-out;
+    transition: all 0.3s ease;
+    transform: translateX(0);
+    background: white;
+    border-left: 4px solid;
+}
+
+.toast.hiding {
+    animation: slideOutRight 0.3s ease-in forwards;
+}
+
+.toast-success {
+    border-left-color: var(--success);
+    color: var(--text);
+}
+
+.toast-error {
+    border-left-color: var(--error);
+    color: var(--text);
+}
+
+.toast-info {
+    border-left-color: var(--accent-1);
+    color: var(--text);
+}
+
+.toast-icon {
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+.toast-success .toast-icon {
+    color: var(--success);
+}
+
+.toast-error .toast-icon {
+    color: var(--error);
+}
+
+.toast-info .toast-icon {
+    color: var(--accent-1);
+}
+
+.toast-content {
+    flex: 1;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.toast-close {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    cursor: pointer;
+    opacity: 0.7;
+    padding: 4px;
+    border-radius: 4px;
+    transition: opacity 0.2s ease;
+    color: inherit;
+}
+
+.toast-close:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOutRight {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
 @media (max-width: 768px) {
     body {
         padding: 10px;
@@ -299,6 +407,17 @@ td a:hover {
     td {
         padding: 10px 8px;
     }
+
+    .toast-container {
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        max-width: none;
+    }
+
+    .toast {
+        padding: 10px 14px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -332,6 +451,20 @@ td a:hover {
     .loading {
         padding: 20px 10px;
     }
+
+    .toast-container {
+        top: 5px;
+        right: 5px;
+        left: 5px;
+    }
+
+    .toast {
+        padding: 8px 12px;
+    }
+
+    .toast-content {
+        font-size: 0.85rem;
+    }
 }
 
 @media (min-width: 769px) and (max-width: 1024px) {

frontend/home.html

@@ -66,6 +66,9 @@
         </table>
       </div>
     </div>
+
+    <div id="toastContainer" class="toast-container"></div>
+
     <script src="js/home.js"></script>
   </body>
 </html>

frontend/index.html

@@ -135,7 +135,7 @@ <h2 class="section-title">Ready to Get Started?</h2>
             Simple, secure, and completely under your control.
           </p>
           <a
-            href="https://github.com/8gudbits/QuickServe/releases"
+            href="https://github.com/8gudbits/QuickServe"
             class="btn btn-primary"
             style="font-size: 1.2rem; padding: 15px 40px"
             target="_blank"

frontend/js/home.js

@@ -63,6 +63,7 @@ class QuickServeClient {
         `${this.serverUrl}/api/files?path=${encodeURIComponent(path)}`,
         {
           headers: this.getAuthHeaders(),
+          credentials: "include",
         }
       );
 
@@ -154,6 +155,7 @@ class QuickServeClient {
         )}`,
         {
           headers: this.getAuthHeaders(),
+          credentials: "include",
         }
       );
 
@@ -186,13 +188,13 @@ class QuickServeClient {
     try {
       const response = await fetch(`${this.serverUrl}/api/upload`, {
         method: "POST",
-        headers: this.getAuthHeaders(false),
+        credentials: "include",
         body: formData,
       });
 
       if (response.ok) {
         await this.loadFiles(currentPath);
-        this.showTempMessage("Upload successful!");
+        this.showSuccess("Upload successful!");
       } else {
         throw new Error("Upload failed");
       }
@@ -206,6 +208,10 @@ class QuickServeClient {
     if (isJson) {
       headers["Content-Type"] = "application/json";
     }
+
+    const authString = btoa(`${this.username}:${this.password}`);
+    headers["Authorization"] = `Basic ${authString}`;
+
     return headers;
   }
 
@@ -233,16 +239,75 @@ class QuickServeClient {
   }
 
   showError(message) {
-    alert(message);
+    this.showToast(message, "error");
+  }
+
+  showSuccess(message) {
+    this.showToast(message, "success");
+  }
+
+  showInfo(message) {
+    this.showToast(message, "info");
+  }
+
+  showToast(message, type = "info", duration = 5000) {
+    const toastContainer = document.getElementById("toastContainer");
+
+    const toast = document.createElement("div");
+    toast.className = `toast toast-${type}`;
+
+    let icon = "info-circle";
+    if (type === "success") icon = "check-circle";
+    if (type === "error") icon = "exclamation-circle";
+
+    toast.innerHTML = `
+      <i class="fas fa-${icon} toast-icon"></i>
+      <div class="toast-content">${message}</div>
+      <button class="toast-close" aria-label="Close notification">
+        <i class="fas fa-times"></i>
+      </button>
+    `;
+
+    toastContainer.appendChild(toast);
+
+    let removeTimeout;
+    if (duration > 0) {
+      removeTimeout = setTimeout(() => {
+        this.removeToast(toast);
+      }, duration);
+    }
+
+    const closeBtn = toast.querySelector(".toast-close");
+    closeBtn.addEventListener("click", () => {
+      if (removeTimeout) clearTimeout(removeTimeout);
+      this.removeToast(toast);
+    });
+
+    return toast;
+  }
+
+  removeToast(toast) {
+    toast.classList.add("hiding");
+    setTimeout(() => {
+      if (toast.parentNode) {
+        toast.parentNode.removeChild(toast);
+      }
+    }, 300);
   }
 
   showTempMessage(message) {
     const uploadLabel = document.getElementById("uploadLabel");
     const originalText = uploadLabel.innerHTML;
-    uploadLabel.innerHTML = `<i class="fas fa-check"></i> ${message}`;
+
+    this.showSuccess(message);
+
+    uploadLabel.innerHTML = `<i class="fas fa-check"></i> Uploaded`;
+    uploadLabel.style.opacity = "0.7";
+
     setTimeout(() => {
       uploadLabel.innerHTML = originalText;
-    }, 2000);
+      uploadLabel.style.opacity = "1";
+    }, 1500);
   }
 
   updateNavigation(currentPath) {

frontend/js/login.js

@@ -5,6 +5,10 @@ const loginForm = document.getElementById("loginForm");
 const errorMessage = document.getElementById("errorMessage");
 const submitBtn = document.getElementById("submitBtn");
 
+document.addEventListener("DOMContentLoaded", function () {
+  resetSubmitButton();
+});
+
 togglePassword.addEventListener("click", function () {
   const type =
     password.getAttribute("type") === "password" ? "text" : "password";
@@ -88,6 +92,7 @@ function showError(message) {
 
 function resetSubmitButton() {
   submitBtn.disabled = false;
+  submitBtn.textContent = "CONNECT TO SERVER";
   submitBtn.innerHTML = "CONNECT TO SERVER";
 }
 
@@ -99,3 +104,12 @@ window.addEventListener("load", function () {
   }
 });
 
+window.addEventListener("pageshow", function (event) {
+  if (
+    event.persisted ||
+    (window.performance && window.performance.navigation.type === 2)
+  ) {
+    resetSubmitButton();
+  }
+});
+