Merge pull request #90 from penwern/dev/custom-page-router

Various fixes

Author: Sunday-Crunk

src/js/core/CurateFunctions/CurateRouter.js

@@ -15,6 +15,7 @@ const CurateRouter = (function () {
   let routePrefix = '/custom';
   let focusTrap = null;
   let isInitialized = false;
+  let lastNonCustomUrl = '/'; // Track last non-custom URL for close button
   let configuration = {
     routePrefix: '/custom',
     showHeader: true,
@@ -120,6 +121,15 @@ const CurateRouter = (function () {
     const path = window.location.pathname;
 
     if (path.startsWith(routePrefix)) {
+      // Check if user is logged in before rendering custom routes
+      if (typeof pydio !== 'undefined' && (!pydio.user || pydio.user === null)) {
+        // User is not logged in, don't render custom page
+        if (currentPage) {
+          closePage();
+        }
+        return;
+      }
+
       const routePath = path.substring(routePrefix.length) || '/';
 
       // Check if we're already on this route - prevent duplicate navigation
@@ -137,9 +147,14 @@ const CurateRouter = (function () {
       } else {
         showErrorPage(`Route not found: ${routePath}`);
       }
-    } else if (currentPage) {
-      // We're navigating away from custom routes
-      closePage();
+    } else {
+      // Track non-custom URLs for the close button
+      lastNonCustomUrl = path;
+
+      if (currentPage) {
+        // We're navigating away from custom routes
+        closePage();
+      }
     }
   }
 
@@ -420,41 +435,64 @@ const CurateRouter = (function () {
     header.className = 'curate-router-header';
     header.style.cssText = `
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      padding: 16px 20px;
-      border-bottom: 1px solid #e0e0e0;
-      background: #f5f5f5;
-      min-height: 56px;
-    `;
-
-    const backButton = document.createElement('button');
-    backButton.className = 'curate-router-back-button';
-    backButton.innerHTML = '← Back';
-    backButton.style.cssText = `
-      background: none;
-      border: none;
-      font-size: 14px;
-      cursor: pointer;
-      padding: 8px 12px;
-      border-radius: 4px;
-      margin-right: 16px;
+      padding: 20px;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--md-sys-color-outline, #c4c7c5);
+      background: var(--md-sys-color-surface-variant, #fdfcff);
     `;
-    backButton.addEventListener('click', back);
 
     const titleElement = document.createElement('h1');
     titleElement.textContent = title;
     titleElement.style.cssText = `
       margin: 0;
-      font-size: 18px;
-      font-weight: 600;
+      color: var(--md-sys-color-on-background, #1d1b20);
+      font-size: 28px;
+      font-weight: 400;
     `;
 
-    header.appendChild(backButton);
+    // Create close button
+    const closeButton = document.createElement('button');
+    closeButton.textContent = '✕ Close';
+    closeButton.addEventListener('click', closeAndReturnToUnderlying);
+    closeButton.style.cssText = `
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      border: none;
+      border-radius: 4px;
+      padding: 6px 12px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: opacity 0.2s;
+    `;
+
+    closeButton.addEventListener('mouseenter', () => {
+      closeButton.style.opacity = '0.8';
+    });
+    closeButton.addEventListener('mouseleave', () => {
+      closeButton.style.opacity = '1';
+    });
+
     header.appendChild(titleElement);
+    header.appendChild(closeButton);
 
     return header;
   }
 
+  /**
+   * Close the custom page and return to the underlying Pydio URL
+   */
+  function closeAndReturnToUnderlying() {
+    if (currentPage) {
+      // Navigate to the last non-custom URL (or fallback to base path)
+      const targetUrl = lastNonCustomUrl || '/';
+      window.history.pushState(null, '', targetUrl);
+      closePage();
+    }
+  }
+
   function createNavigationUtils() {
     return {
       navigate: (path) => navigate(path),
@@ -598,6 +636,40 @@ const CurateRouter = (function () {
     return currentPage !== null;
   }
 
+  /**
+   * Check if a given path is a valid registered route
+   *
+   * @param {string} path - The path to check (can be full path or just route path)
+   * @returns {boolean} True if the path matches a registered route, false otherwise
+   *
+   * @example
+   * // Check if current URL is a valid custom route
+   * if (Curate.router.isValidRoute(window.location.pathname)) {
+   *   console.log('Current URL is a valid custom route');
+   * }
+   *
+   * @example
+   * // Check a specific route
+   * if (Curate.router.isValidRoute('/custom/pure-integration')) {
+   *   console.log('Pure integration route exists');
+   * }
+   */
+  function isValidRoute(path) {
+    if (!path) return false;
+
+    // If path includes the route prefix, extract just the route part
+    let routePath = path;
+    if (path.startsWith(routePrefix)) {
+      routePath = path.substring(routePrefix.length) || '/';
+    } else if (!path.startsWith('/')) {
+      routePath = '/' + path;
+    }
+
+    // Check if this route matches any registered routes
+    const match = findMatchingRoute(routePath);
+    return match !== null;
+  }
+
   /**
    * Manually check and navigate to current URL route
    * Useful for handling page refreshes or manual URL entry
@@ -638,6 +710,7 @@ const CurateRouter = (function () {
     back,
     getCurrentPage,
     isActive,
+    isValidRoute,
     checkRoute
   };
 })();

src/js/core/RouteProtection.js

@@ -0,0 +1,98 @@
+/**
+ * Early Route Protection
+ *
+ * This module MUST be imported first to protect custom routes from Pydio's
+ * homepage redirect before any other code runs.
+ *
+ * The issue: When a custom homepage is set in Pydio, it redirects any unrecognized
+ * URL (including our custom routes) to the custom homepage on page load.
+ *
+ * The solution: Intercept the history API immediately on script load to block
+ * Pydio from redirecting away from /custom/* routes.
+ */
+
+(function() {
+  'use strict';
+
+  const initialPath = window.location.pathname;
+
+  // Only set up protection if we're on a custom route
+  if (!initialPath.startsWith('/custom')) {
+    return;
+  }
+
+  sessionStorage.setItem('curate_protected_route', initialPath);
+
+  // Store original history methods before anyone can override them
+  const originalReplaceState = history.replaceState.bind(history);
+  const originalPushState = history.pushState.bind(history);
+
+  // Override history.replaceState to block Pydio redirects
+  history.replaceState = function(state, title, url) {
+    const currentPath = window.location.pathname;
+    const protectedRoute = sessionStorage.getItem('curate_protected_route');
+
+    // Block redirects away from custom routes
+    if (protectedRoute && currentPath.startsWith('/custom') && url && !url.startsWith('/custom')) {
+      return;
+    }
+
+    return originalReplaceState(state, title, url);
+  };
+
+  // Override history.pushState to block Pydio navigation
+  history.pushState = function(state, title, url) {
+    const currentPath = window.location.pathname;
+    const protectedRoute = sessionStorage.getItem('curate_protected_route');
+
+    // Block navigation away from custom routes
+    if (protectedRoute && currentPath.startsWith('/custom') && url && !url.startsWith('/custom')) {
+      return;
+    }
+
+    return originalPushState(state, title, url);
+  };
+
+  // Monitor URL changes and restore if Pydio manages to redirect anyway
+  let monitorCount = 0;
+  const maxMonitorChecks = 50; // Monitor for 5 seconds
+
+  const urlMonitor = setInterval(() => {
+    monitorCount++;
+    const currentPath = window.location.pathname;
+    const protectedRoute = sessionStorage.getItem('curate_protected_route');
+
+    if (!protectedRoute) {
+      clearInterval(urlMonitor);
+      return;
+    }
+
+    // If we've been redirected away from the custom route, restore it
+    if (currentPath !== protectedRoute && !currentPath.startsWith('/custom')) {
+      originalReplaceState(null, '', protectedRoute);
+
+      // Trigger a custom event that the router can listen for
+      window.dispatchEvent(new CustomEvent('curate-route-restored', {
+        detail: { path: protectedRoute }
+      }));
+
+      sessionStorage.removeItem('curate_protected_route');
+      clearInterval(urlMonitor);
+      return;
+    }
+
+    // If we've successfully stayed on the custom route for 2 seconds, clear protection
+    if (currentPath === protectedRoute && monitorCount > 20) {
+      sessionStorage.removeItem('curate_protected_route');
+      clearInterval(urlMonitor);
+      return;
+    }
+
+    // Timeout after 5 seconds
+    if (monitorCount >= maxMonitorChecks) {
+      sessionStorage.removeItem('curate_protected_route');
+      clearInterval(urlMonitor);
+    }
+  }, 100);
+
+})();

src/js/custom-pages/router-init.js

@@ -12,6 +12,14 @@ function initializeRouter() {
     escapeClosesPage: true
   });
 
+  // Listen for route restoration events from RouteProtection module
+  window.addEventListener('curate-route-restored', (event) => {
+    // Give the router a moment to be fully initialized
+    setTimeout(() => {
+      Curate.router.checkRoute();
+    }, 100);
+  });
+
   console.log('Curate Router initialized successfully');
 }
 

src/js/custom-pages/routes/pure-integration.js

@@ -20,28 +20,6 @@ export function registerPureIntegrationRoute() {
       -webkit-overflow-scrolling: touch;
     `;
 
-    // Create header
-    const header = document.createElement('div');
-    header.style.cssText = `
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      padding-bottom: 16px;
-      border-bottom: 1px solid var(--md-sys-color-outline, #c4c7c5);
-    `;
-
-    const title = document.createElement('h1');
-    title.textContent = 'Pure Integration';
-    title.style.cssText = `
-      margin: 0;
-      color: var(--md-sys-color-on-background, #1d1b20);
-      font-size: 28px;
-      font-weight: 400;
-    `;
-
-    header.appendChild(title);
-
     // Create the Pure Integration UI component
     const pureUI = document.createElement('pure-integration-interface');
     pureUI.style.cssText = `
@@ -50,7 +28,6 @@ export function registerPureIntegrationRoute() {
     `;
 
     // Assemble the page
-    container.appendChild(header);
     container.appendChild(pureUI);
 
     // Return cleanup function to remove the component
@@ -61,6 +38,6 @@ export function registerPureIntegrationRoute() {
     };
   }, {
     title: 'Pure Integration',
-    showHeader: false
+    showHeader: true
   });
 }

src/js/index.js

@@ -1,3 +1,5 @@
+// IMPORTANT: RouteProtection must be imported FIRST to intercept Pydio redirects
+import "../js/core/RouteProtection.js";
 import "../js/core/CurateFunctions/CurateFunctions.js";
 import "./custom-pages/index.js";
 import "../js/core/CustomPreservationConfigs.js";