feat/huy-05022026-cms-add-footer-api-management

views/layouts/main.ejs

@@ -820,45 +820,18 @@
   </main>
 
   <!-- Footer -->
-  <footer class="mt-5">
+  <footer class="mt-5" id="dynamicFooter">
     <div class="container py-4">
-      <div class="row">
-        <div class="col-md-4 mb-4 mb-md-0">
-          <h5 class="mb-3">CMS.HAILearning</h5>
-          <p>Simple and effective API management system.</p>
-        </div>
-        <div class="col-md-4 mb-4 mb-md-0">
-          <h5 class="mb-3">Links</h5>
-          <ul class="list-unstyled">
-            <% if (locals.user) { %>
-              <li class="mb-2">
-                <a href="/admin/dashboard" class="text-decoration-none hover-opacity">Dashboard</a>
-              </li>
-              <% } else { %>
-                <li class="mb-2">
-                  <a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
-                </li>
-                <% } %>
-          </ul>
-        </div>
-        <div class="col-md-4">
-          <h5 class="mb-3">Contact</h5>
-          <p class="mb-2">
-            <i class="fas fa-map-marker-alt me-2"></i> 734 Luy Ban Bich St., Tan Thanh Ward, Tan Phu Dist, HCMC
-          </p>
-          <p class="mb-2">
-            <i class="fas fa-envelope me-2"></i> <a href="mailto:get-info@hai.edu.vn" class="text-decoration-none hover-opacity">get-info@hai.edu.vn</a>
-          </p>
-          <p class="mb-2">
-            <i class="fas fa-globe me-2"></i> <a href="https://hai.edu.vn" target="_blank" class="text-decoration-none hover-opacity">hai.edu.vn</a>
-          </p>
+      <div class="row" id="footerContent">
+        <!-- Footer content will be loaded from API -->
+        <div class="col-12 text-center">
+          <p>Loading footer...</p>
         </div>
       </div>
       <hr class="my-4" />
       <div class="text-center">
-        <p class="mb-0">
-          &copy; <%= new Date().getFullYear() %> CMS.HAILearning. All rights
-            reserved.
+        <p class="mb-0" id="footerCopyright">
+          &copy; <%= new Date().getFullYear() %> Loading...
         </p>
       </div>
     </div>
@@ -1018,6 +991,198 @@
     });
   </script>
 
+  <!-- Footer Dynamic Loading Script -->
+  <script>
+    // Load and render footer from API
+    async function loadFooter() {
+      try {
+        const response = await fetch('/api/footer');
+        if (!response.ok) {
+          throw new Error('Failed to load footer data');
+        }
+        
+        const footerData = await response.json();
+        renderFooter(footerData);
+      } catch (error) {
+        console.error('Error loading footer:', error);
+        renderFallbackFooter();
+      }
+    }
+
+    // Render footer with API data
+    function renderFooter(data) {
+      const footerContent = document.getElementById('footerContent');
+      const footerCopyright = document.getElementById('footerCopyright');
+      
+      if (!footerContent || !footerCopyright) return;
+
+      let footerHTML = '';
+
+      // About section (first column)
+      if (data.about && (data.about.title || data.about.description)) {
+        footerHTML += `
+          <div class="col-md-4 mb-4 mb-md-0">
+            <h5 class="mb-3">${escapeHtml(data.about.title || 'About Us')}</h5>
+            ${data.about.description ? `<p>${escapeHtml(data.about.description)}</p>` : ''}
+            ${data.about.mapLink && data.about.mapLink.url ? 
+              `<p><a href="${escapeHtml(data.about.mapLink.url)}" target="_blank" class="text-decoration-none hover-opacity">
+                <i class="fas fa-map-marker-alt me-2"></i>${escapeHtml(data.about.mapLink.text || 'View on Map')}
+              </a></p>` : ''}
+          </div>
+        `;
+      }
+
+      // Footer columns
+      if (data.columns && Array.isArray(data.columns)) {
+        // Sort columns by order if available, otherwise maintain array order
+        const sortedColumns = data.columns.sort((a, b) => (a.order || 0) - (b.order || 0));
+        
+        sortedColumns.forEach(column => {
+          if (column.title || (column.links && column.links.length > 0)) {
+            footerHTML += `
+              <div class="col-md-4 mb-4 mb-md-0">
+                ${column.title ? `<h5 class="mb-3">${escapeHtml(column.title)}</h5>` : ''}
+                ${column.links && column.links.length > 0 ? `
+                  <ul class="list-unstyled">
+                    ${column.links.map(link => 
+                      `<li class="mb-2">
+                        <a href="${escapeHtml(link.url || '#')}" class="text-decoration-none hover-opacity">
+                          ${escapeHtml(link.title || 'Link')}
+                        </a>
+                      </li>`
+                    ).join('')}
+                  </ul>
+                ` : ''}
+              </div>
+            `;
+          }
+        });
+      }
+
+      // Contact section
+      if (data.contact && (data.contact.email || data.contact.phone)) {
+        footerHTML += `
+          <div class="col-md-4">
+            <h5 class="mb-3">Contact</h5>
+            ${data.contact.email ? `
+              <p class="mb-2">
+                <i class="fas fa-envelope me-2"></i> 
+                <a href="mailto:${escapeHtml(data.contact.email)}" class="text-decoration-none">
+                  ${escapeHtml(data.contact.email)}
+                </a>
+              </p>
+            ` : ''}
+            ${data.contact.phone ? `
+              <p class="mb-2">
+                <i class="fas fa-phone me-2"></i> 
+                <a href="tel:${escapeHtml(data.contact.phone)}" class="text-decoration-none">
+                  ${escapeHtml(data.contact.phone)}
+                </a>
+              </p>
+            ` : ''}
+            ${data.contact.hours ? `
+              <p class="mb-2">
+                <i class="fas fa-clock me-2"></i> ${escapeHtml(data.contact.hours)}
+              </p>
+            ` : ''}
+            ${data.address && data.address.text ? `
+              <p class="mb-2">
+                <i class="fas fa-map-marker-alt me-2"></i> 
+                ${data.address.mapUrl ? 
+                  `<a href="${escapeHtml(data.address.mapUrl)}" target="_blank" class="text-decoration-none">
+                    ${escapeHtml(data.address.text)}
+                  </a>` : 
+                  escapeHtml(data.address.text)
+                }
+              </p>
+            ` : ''}
+          </div>
+        `;
+      }
+
+      // Social links (if any)
+      if (data.social && data.social.links && Array.isArray(data.social.links) && data.social.links.length > 0) {
+        // Sort social links by order if available
+        const sortedSocials = data.social.links.sort((a, b) => (a.order || 0) - (b.order || 0));
+        
+        footerHTML += `
+          <div class="col-12 mt-3">
+            <div class="text-center">
+              <h6 class="mb-3">Follow Us</h6>
+              <div class="d-flex justify-content-center gap-3">
+                ${sortedSocials.map(social => 
+                  `<a href="${escapeHtml(social.url || '#')}" target="_blank" 
+                     class="text-decoration-none hover-opacity" 
+                     title="${escapeHtml(social.platform || 'Social Link')}">
+                    <i class="fab fa-${escapeHtml(social.icon || 'link')} fa-lg"></i>
+                  </a>`
+                ).join('')}
+              </div>
+            </div>
+          </div>
+        `;
+      }
+
+      // Update footer content
+      footerContent.innerHTML = footerHTML;
+
+      // Update copyright
+      const currentYear = new Date().getFullYear();
+      const copyrightText = data.copyright && data.copyright.text ? 
+        data.copyright.text : 
+        `© ${currentYear} Website. All rights reserved.`;
+      
+      footerCopyright.innerHTML = copyrightText;
+    }
+
+    // Fallback footer if API fails
+    function renderFallbackFooter() {
+      const footerContent = document.getElementById('footerContent');
+      const footerCopyright = document.getElementById('footerCopyright');
+      
+      if (footerContent) {
+        footerContent.innerHTML = `
+          <div class="col-md-4 mb-4 mb-md-0">
+            <h5 class="mb-3">CMS-GGCamp</h5>
+            <p>Simple and effective API management system.</p>
+          </div>
+          <div class="col-md-4 mb-4 mb-md-0">
+            <h5 class="mb-3">Links</h5>
+            <ul class="list-unstyled">
+              <li class="mb-2">
+                <a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <h5 class="mb-3">Contact</h5>
+            <p class="mb-2">
+              <i class="fas fa-envelope me-2"></i> office@ggcamp.org
+            </p>
+            <p class="mb-2">
+              <i class="fas fa-phone me-2"></i> 12345678
+            </p>
+          </div>
+        `;
+      }
+      
+      if (footerCopyright) {
+        footerCopyright.innerHTML = `© ${new Date().getFullYear()} CMS-GGCamp. All rights reserved.`;
+      }
+    }
+
+    // Escape HTML to prevent XSS
+    function escapeHtml(text) {
+      if (!text) return '';
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    // Load footer when DOM is ready
+    document.addEventListener('DOMContentLoaded', loadFooter);
+  </script>
+
   <%- script %>
 </body>
 

views/test-footer.ejs

@@ -0,0 +1,98 @@
+<div class="container my-5">
+    <h1>🧪 Test Footer Implementation</h1>
+    <p>Trang này test việc render footer từ backend API trong layout chính</p>
+
+    <div class="alert alert-info">
+        <h5>📊 Kiểm tra các yếu tố:</h5>
+        <ul class="mb-0">
+            <li>✅ Footer được load từ <code>GET /api/footer</code></li>
+            <li>✅ Render đúng các section: About, Columns, Contact, Social</li>
+            <li>✅ Tôn trọng thứ tự (order) của columns và social links</li>
+            <li>✅ XSS protection với escapeHtml()</li>
+            <li>✅ Fallback footer nếu API lỗi</li>
+        </ul>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-header">
+                    <h5>🔗 API Test</h5>
+                </div>
+                <div class="card-body">
+                    <button class="btn btn-primary" onclick="testFooterAPI()">Test API</button>
+                    <div id="apiResult" class="mt-3"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-header">
+                    <h5>📱 Footer Status</h5>
+                </div>
+                <div class="card-body">
+                    <div id="footerStatus">
+                        <p>Footer sẽ được load tự động khi trang tải xong.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    async function testFooterAPI() {
+        const resultDiv = document.getElementById("apiResult");
+        resultDiv.innerHTML = "<p>⏳ Đang test API...</p>";
+
+        try {
+            const response = await fetch("/api/footer");
+            const data = await response.json();
+
+            let html = '<div class="alert alert-success">';
+            html += "<h6>✅ API Response thành công:</h6>";
+            html += `<p><strong>About:</strong> ${data.about?.title || "N/A"}</p>`;
+            html += `<p><strong>Columns:</strong> ${data.columns?.length || 0} cột</p>`;
+            html += `<p><strong>Social:</strong> ${data.social?.links?.length || 0} links</p>`;
+            html += `<p><strong>Contact:</strong> ${data.contact?.email || "N/A"}</p>`;
+            html += "</div>";
+
+            resultDiv.innerHTML = html;
+        } catch (error) {
+            resultDiv.innerHTML = `<div class="alert alert-danger">❌ Lỗi: ${error.message}</div>`;
+        }
+    }
+
+    // Monitor footer loading
+    document.addEventListener("DOMContentLoaded", function () {
+        const statusDiv = document.getElementById("footerStatus");
+
+        // Check if footer elements exist
+        const footerContent = document.getElementById("footerContent");
+        const footerCopyright = document.getElementById("footerCopyright");
+
+        if (footerContent && footerCopyright) {
+            statusDiv.innerHTML = `
+            <div class="alert alert-success">
+                ✅ Footer elements found<br>
+                ✅ Dynamic loading script active<br>
+                ✅ Footer sẽ được render từ API
+            </div>
+        `;
+
+            // Monitor footer content changes
+            const observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (mutation.target.id === "footerContent" && mutation.target.innerHTML.includes("About")) {
+                        statusDiv.innerHTML +=
+                            '<div class="alert alert-info mt-2">🎉 Footer đã được render thành công!</div>';
+                    }
+                });
+            });
+
+            observer.observe(footerContent, { childList: true, subtree: true });
+        } else {
+            statusDiv.innerHTML = '<div class="alert alert-warning">⚠️ Footer elements không tìm thấy</div>';
+        }
+    });
+</script>