mbkbucket 1.3.0 → 1.5.0

package/views/bucketadmin_delete_modal.handlebars

@@ -0,0 +1,40 @@
+<!-- Delete Confirmation Modal -->
+<div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="deleteModalLabel">
+          <i class="fas fa-exclamation-triangle"></i>
+          Confirm Delete
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+          onclick="closeModal()">&times;</button>
+      </div>
+      <div class="modal-body">
+        <i class="fas fa-trash-alt fa-3x"></i>
+        <h6>Are you sure you want to delete this file?</h6>
+        <p class="modal-body-text-style">
+          <strong id="deleteFileName" style="color: var(--dark-color-ml);"></strong>
+        </p>
+        <p class="modal-body-text-top">
+          <small>This action cannot be undone.</small>
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" onclick="closeModal()">
+          <i class="fas fa-times"></i>
+          Cancel
+        </button>
+        <form id="deleteForm" method="post" action="/mbkbucket/delete" style="display: inline;">
+          <input type="hidden" name="key" id="deleteKey">
+          <input type="hidden" name="prefix" value="{{prefix}}">
+          <input type="hidden" name="folder" id="deleteIsFolder" value="">
+          <button type="submit" class="btn btn-danger" id="deleteConfirmButton">
+            <i class="fas fa-trash"></i>
+            <span id="deleteConfirmLabel">Delete File</span>
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

package/views/bucketadmin_filelist_skeleton.handlebars

@@ -0,0 +1,20 @@
+<div class="table-responsive" aria-label="Loading files" aria-busy="true">
+  <div class="skeleton-row">
+    <div class="skeleton-box s-40"></div>
+    <div class="skeleton-box s-200"></div>
+    <div class="skeleton-box s-80"></div>
+    <div class="skeleton-box s-200"></div>
+  </div>
+  <div class="skeleton-row">
+    <div class="skeleton-box s-40"></div>
+    <div class="skeleton-box s-200"></div>
+    <div class="skeleton-box s-80"></div>
+    <div class="skeleton-box s-200"></div>
+  </div>
+  <div class="skeleton-row">
+    <div class="skeleton-box s-40"></div>
+    <div class="skeleton-box s-200"></div>
+    <div class="skeleton-box s-80"></div>
+    <div class="skeleton-box s-200"></div>
+  </div>
+</div>

package/views/bucketadmin_preview_modal.handlebars

@@ -0,0 +1,33 @@
+<!-- Preview Modal -->
+<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="previewModalLabel" tabindex="-1">
+  <div class="modal-dialog preview-modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="previewModalLabel"><i class="fas fa-eye"></i> <span
+            id="previewFileName">Preview</span></h5>
+        <div class="preview-header-controls">
+          <button id="previewFullscreenBtn" class="btn btn-outline-secondary btn-sm" type="button"
+            aria-label="Toggle fullscreen"><i class="fas fa-expand"></i></button>
+          <button type="button" class="btn-close" aria-label="Close preview" id="previewCloseBtn">&times;</button>
+        </div>
+      </div>
+      <div class="modal-body">
+        <div class="preview-content" id="previewContent" aria-live="polite">
+          <div class="empty-preview">
+            <i class="fas fa-spinner fa-spin"></i>
+            <div class="modal-header-spacing">Loading preview...</div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer preview-footer">
+        <div class="preview-actions">
+          <a id="previewOpenBtn" class="btn btn-outline-secondary" target="_blank" rel="noopener noreferrer" href="#"><i
+              class="fas fa-external-link-alt"></i> Open</a>
+          <a id="previewDownloadBtn" class="btn btn-success" download href="#"><i class="fas fa-download"></i>
+            Download</a>
+          <button type="button" class="btn btn-secondary" id="previewCloseFooter">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/views/bucketadmincontent.handlebars

@@ -13,28 +13,15 @@
         <p id="filterInfo">Loading file information...</p>
       </div>
       <div style="margin-left: auto;">
-        <option value="{{bucketvar}}">{{bucketvar}}</option>
-        </select>
+        <span class="stats-bucket-badge">
+          <i class="fas fa-database" style="margin-right:0.4rem;"></i>{{bucketvar}}
+        </span>
       </div>
     </div>
   </div>
 </div>
 
-{{#if message}}
-<div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
-  <i class="fas fa-check-circle"></i>
-  <span id="successMessage">{{message}}</span>
-  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">&times;</button>
-</div>
-{{/if}}
-
-{{#if error}}
-<div class="alert alert-danger alert-dismissible fade show" role="alert" id="errorAlert">
-  <i class="fas fa-exclamation-triangle"></i>
-  <span id="errorMessage">{{error}}</span>
-  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">&times;</button>
-</div>
-{{/if}}
+{{> bucketadmin_alerts }}
 
 <div class="mb-4">
   <!-- Upload Form -->
@@ -141,11 +128,7 @@
   </div>
   <div class="card-body" style="padding: 0;">
     <div id="fileListContainer">
-      <div class="empty-state">
-        <i class="fas fa-spinner fa-spin"></i>
-        <h4>Loading files...</h4>
-        <p>Please wait while we fetch your files.</p>
-      </div>
+      {{> bucketadmin_filelist_skeleton }}
     </div>
 
     <!-- Pagination -->
@@ -158,80 +141,9 @@
   </div>
 </div>
 
-<!-- Delete Confirmation Modal -->
-<div class="modal" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="deleteModalLabel">
-          <i class="fas fa-exclamation-triangle"></i>
-          Confirm Delete
-        </h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-          onclick="closeModal()">&times;</button>
-      </div>
-      <div class="modal-body">
-        <i class="fas fa-trash-alt fa-3x"></i>
-        <h6>Are you sure you want to delete this file?</h6>
-        <p class="modal-body-text-style">
-          <strong id="deleteFileName" style="color: var(--dark-color-ml);"></strong>
-        </p>
-        <p class="modal-body-text-top">
-          <small>This action cannot be undone.</small>
-        </p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" onclick="closeModal()">
-          <i class="fas fa-times"></i>
-          Cancel
-        </button>
-        <form id="deleteForm" method="post" action="/mbkbucket/delete" style="display: inline;">
-          <input type="hidden" name="key" id="deleteKey">
-          <input type="hidden" name="prefix" value="{{prefix}}">
-          <input type="hidden" name="folder" id="deleteIsFolder" value="">
-          <button type="submit" class="btn btn-danger" id="deleteConfirmButton">
-            <i class="fas fa-trash"></i>
-            <span id="deleteConfirmLabel">Delete File</span>
-          </button>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
+{{> bucketadmin_delete_modal }}
 
-<!-- Preview Modal -->
-<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="previewModalLabel" tabindex="-1">
-  <div class="modal-dialog preview-modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="previewModalLabel"><i class="fas fa-eye"></i> <span
-            id="previewFileName">Preview</span></h5>
-        <div class="preview-header-controls">
-          <button id="previewFullscreenBtn" class="btn btn-outline-secondary btn-sm" type="button"
-            aria-label="Toggle fullscreen"><i class="fas fa-expand"></i></button>
-          <button type="button" class="btn-close" aria-label="Close preview" id="previewCloseBtn">&times;</button>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="preview-content" id="previewContent" aria-live="polite">
-          <div class="empty-preview">
-            <i class="fas fa-spinner fa-spin"></i>
-            <div class="modal-header-spacing">Loading preview...</div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer preview-footer">
-        <div class="preview-actions">
-          <a id="previewOpenBtn" class="btn btn-outline-secondary" target="_blank" rel="noopener noreferrer" href="#"><i
-              class="fas fa-external-link-alt"></i> Open</a>
-          <a id="previewDownloadBtn" class="btn btn-success" download href="#"><i class="fas fa-download"></i>
-            Download</a>
-          <button type="button" class="btn btn-secondary" id="previewCloseFooter">Close</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+{{> bucketadmin_preview_modal }}
 
 <!-- Toast Container -->
 <div id="toast-container" class="toast-container"></div>

package/views/mbkbucket_info.handlebars

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description"
+        content="Log in to portal.mbktech.org to access your resources and manage projects securely.">
+    <meta name="keywords" content="MBK Tech, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
+    <meta property="og:title" content="Version and Configuration Information | MBK Tech" />
+    <meta property="og:image" content="https://mbktech.org/Assets/Images/Icon/logo.png" />
+    <meta property="og:url" content="/mbkbucket/info">
+    <title>Version and Configuration Information | MBK Tech Portal</title>
+    <link rel="icon" type="image/svg+xml" href="/icon.svg">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    {{> sharedStyles}}
+    <style>
+        .info-box {
+            background: rgba(10, 20, 20, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: var(--border-radius);
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 900px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(0, 184, 148, 0.2);
+            position: relative;
+            z-index: 2;
+            transition: var(--transition);
+        }
+
+        .info-box:hover {
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+            border-color: rgba(0, 184, 148, 0.3);
+        }
+
+        .info-title {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2rem;
+            position: relative;
+            color: var(--light);
+        }
+
+        .info-title::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 4px;
+            background-color: var(--accent);
+            border-radius: 2px;
+        }
+
+        .info-section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            border: 1px solid rgba(0, 184, 148, 0.2);
+            border-radius: var(--border-radius);
+            background-color: rgba(0, 0, 0, 0.2);
+            transition: var(--transition);
+        }
+
+        .info-section:hover {
+            border-color: rgba(0, 184, 148, 0.4);
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        .info-section h2 {
+            color: var(--accent);
+            border-bottom: 2px solid rgba(0, 184, 148, 0.3);
+            padding-bottom: 10px;
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            font-size: 1.4rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .info-section h2 i {
+            font-size: 1.2rem;
+        }
+
+        .info-row {
+            display: flex;
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(0, 184, 148, 0.1);
+            align-items: center;
+        }
+
+        .info-row:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+
+        .info-label {
+            font-weight: 600;
+            color: var(--text-light);
+            min-width: 240px;
+            font-size: 1rem;
+        }
+
+        .info-value {
+            flex: 1;
+            word-break: break-word;
+            color: var(--text);
+            font-size: 1rem;
+        }
+
+        .version-status {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            margin-left: 10px;
+        }
+
+        .version-up-to-date {
+            background: rgba(67, 233, 123, 0.2);
+            color: var(--success);
+            border: 1px solid var(--success);
+        }
+
+        .version-outdated {
+            background: rgba(255, 118, 117, 0.2);
+            color: var(--danger);
+            border: 1px solid var(--danger);
+        }
+
+        .version-fetch-error {
+            background: rgba(255, 209, 102, 0.2);
+            color: var(--warning);
+            border: 1px solid var(--warning);
+        }
+
+        @media (max-width: 768px) {
+            .info-box {
+                padding: 2rem;
+                max-width: 100%;
+            }
+
+            .info-title {
+                font-size: 1.8rem;
+            }
+
+            .info-row {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
+            }
+
+            .info-label {
+                min-width: unset;
+            }
+
+            .info-section h2 {
+                font-size: 1.2rem;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .info-box {
+                padding: 1.5rem;
+            }
+
+            .info-section {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <div class="header-container">
+            <a class="logo">
+                <img src="/icon.svg" alt="Logo" class="logo-image" />
+                <span class="logo-text">BK <span>Tech</span></span>
+                <span class="logo-comp">{{#if APP_NAME}}{{APP_NAME}}{{else}}mbkbucket{{/if}}
+            </a>
+
+            {{> profilemenu}}
+        </div>
+    </header>
+    <section class="login-container">
+        <i class="fas fa-info-circle ai-element"></i>
+        <i class="fas fa-cogs ai-element"></i>
+        <i class="fas fa-server ai-element"></i>
+        <i class="fas fa-code-branch ai-element"></i>
+
+        <div class="info-box">
+            <h1 class="info-title">System Information</h1>
+
+            <div class="info-section">
+                <h2><i class="fas fa-code-branch"></i> Version Information</h2>
+                <div class="info-row">
+                    <div class="info-label">Current Version:</div>
+                    <div class="info-value" id="CurrentVersion">{{CurrentVersion}}</div>
+                </div>
+
+                <div class="info-row">
+                    <div class="info-label">Latest Version:</div>
+                    <div class="info-value">
+                        {{latestVersion}}
+                        {{#if (eq latestVersion CurrentVersion)}}
+                        <span class="version-status version-up-to-date">
+                            <i class="fas fa-check-circle"></i> Up to date
+                        </span>
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+</body>
+
+</html>