Learnpath: Improve iframe error handling and login redirection fallback - refs #1765

assets/vue/components/Login.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="login-section">
-    <h2
-      v-t="'Sign in'"
-      class="login-section__title"
-    />
+  <div
+    v-if="!isInIframe"
+    class="login-section"
+  >
+    <h2 class="login-section__title">{{ t("Sign in") }}</h2>
 
     <form
       class="login-section__form p-input-filled"
@@ -84,6 +84,16 @@
 </template>
 
 <script setup>
+const isInIframe = window.self !== window.top
+if (isInIframe) {
+  try {
+    const parentUrl = window.top.location.href
+    window.top.location.href = "/login?redirect=" + encodeURIComponent(parentUrl)
+  } catch (e) {
+    window.top.location.href = "/login"
+  }
+}
+
 import { computed, ref } from "vue"
 import { useRouter } from "vue-router"
 import Button from "primevue/button"

assets/vue/pages/Login.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8">
-      <h2
-        v-t="'Sign in'"
-        class="mt-6 text-center text-3xl font-extrabold"
-      />
       <Login />
     </div>
   </div>

public/main/inc/global.inc.php

@@ -84,13 +84,43 @@
         $currentBaseUrl = $request->getSchemeAndHttpHost() . $request->getBasePath();
     }
 
-    $response = $kernel->handle($request, HttpKernelInterface::MAIN_REQUEST, false);
+    // Catch Symfony kernel exceptions (e.g. CidReqListener) in prod.
+    // Needed because set_exception_handler() won't catch them here.
+    try {
+        $response = $kernel->handle($request, HttpKernelInterface::MAIN_REQUEST, false);
+    } catch (\Throwable $exception) {
+        if (\in_array($kernel->getEnvironment(), ['dev', 'test'], true)) {
+            throw $exception;
+        }
+
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $exception
+        );
+
+        $listener = $kernel->getContainer()->get(ExceptionListener::class);
+        if (is_callable($listener)) {
+            $listener($event);
+        }
+
+        $response = $event->getResponse();
+        if (!$response) {
+            $response = new Response('An error occurred', 500);
+        }
+
+        $response->send();
+        exit;
+    }
 
     $container = $kernel->getContainer();
     $router = $container->get('router');
     $context = $router->getContext();
     $router->setContext($context);
 
+    // Catch legacy exceptions after kernel execution.
+    // Complements the try/catch above for full coverage.
     set_exception_handler(function ($exception) use ($kernel, $container, $request) {
         if (\in_array($kernel->getEnvironment(), ['dev', 'test'], true)) {
             throw $exception;

src/CoreBundle/Resources/views/Exception/error.html.twig

@@ -1,4 +1,4 @@
-{% extends '@ChamiloCore/Layout/layout_one_col.html.twig' %}
+{% extends '@ChamiloCore/Layout/layout_content.html.twig' %}
 
 {% block content %}
     <div class="p-message p-component p-message-error my-10 mx-auto p-5 md:w-3/4 lg:w-1/2">

src/CoreBundle/Resources/views/LearnPath/view.html.twig

@@ -226,11 +226,6 @@
                     </div>
                 </div>
             </div>
-            <div id="lp_loading_overlay" class="hidden loader-overlay-strong z-[9999]">
-                <div class="text-lg text-gray-90 font-medium animate-pulse">
-                    {{ 'Session expired. Redirecting to login…'|trans }}
-                </div>
-            </div>
             {# end right Zone #}
         </div>
 
@@ -391,35 +386,6 @@
             })
               {% endif %}
           })
-          $("#content_id").on("load", function () {
-            const iframe = document.getElementById("content_id");
-            let attempt = 0;
-            const maxAttempts = 10;
-            const interval = setInterval(() => {
-              attempt++;
-              try {
-                const contentDoc = iframe.contentWindow.document;
-                const foundLoginSection = contentDoc.querySelector(".login-section") !== null;
-                const foundLoginInput = contentDoc.querySelector("input[id='login']") !== null;
-                if (foundLoginSection && foundLoginInput) {
-                  clearInterval(interval);
-                  $("#lp_loading_overlay").removeClass("hidden").addClass("flex");
-                  const currentUrl = window.location.href;
-                  const redirectParam = encodeURIComponent(currentUrl);
-                  window.top.location.href = "{{ path('login') }}" + "?redirect=" + redirectParam;
-                  return;
-                }
-                if (attempt >= maxAttempts) {
-                  clearInterval(interval);
-                }
-              } catch (e) {
-                clearInterval(interval);
-                $("#lp_loading_overlay").removeClass("hidden").addClass("flex");
-                const redirectParam = encodeURIComponent(window.location.href);
-                window.top.location.href = "{{ path('login') }}" + "?redirect=" + redirectParam;
-              }
-            }, 300);
-          });
         </script>
     {% endautoescape %}
 {% endblock %}

webpack.config.js

@@ -178,6 +178,51 @@ class CopyUnhashedAssetsPlugin {
           )
         }
       }
+
+      // === COPY legacy_framereadyloader.js without hash ===
+      const frameReadyFile = fs.readdirSync(buildPath).find((f) =>
+        f.match(/^legacy_framereadyloader\.[a-f0-9]+\.js$/)
+      )
+      if (frameReadyFile) {
+        fs.copyFileSync(
+          path.join(buildPath, frameReadyFile),
+          path.join(buildPath, "legacy_framereadyloader.js")
+        )
+      }
+
+      // === COPY legacy_framereadyloader.css without hash ===
+      const frameReadyCssFile = fs.readdirSync(buildPath).find((f) =>
+        f.match(/^legacy_framereadyloader\.[a-f0-9]+\.css$/)
+      )
+      if (frameReadyCssFile) {
+        fs.copyFileSync(
+          path.join(buildPath, frameReadyCssFile),
+          path.join(buildPath, "legacy_framereadyloader.css")
+        )
+      }
+
+      // === COPY jquery.qtip.js without hash ===
+      const qtipFile = fs.readdirSync(buildPath + "/libs/qtip2/dist").find((f) =>
+        f.match(/^jquery\.qtip\.js$/)
+      )
+      if (qtipFile) {
+        fs.copyFileSync(
+          path.join(buildPath, "libs/qtip2/dist", qtipFile),
+          path.join(buildPath, "libs/qtip2/dist/jquery.qtip.js")
+        )
+      }
+
+      // === COPY jquery.qtip.css without hash ===
+      const qtipCssFile = fs.readdirSync(buildPath + "/libs/qtip2/dist").find((f) =>
+        f.match(/^jquery\.qtip\.css$/)
+      )
+      if (qtipCssFile) {
+        fs.copyFileSync(
+          path.join(buildPath, "libs/qtip2/dist", qtipCssFile),
+          path.join(buildPath, "libs/qtip2/dist/jquery.qtip.css")
+        )
+      }
+
     })
   }
 }