Merge remote-tracking branch 'upstream/master' into ofaj-22774

Author: christianbeeznest

.yarn/releases/yarn-4.9.1.cjs renamed to .yarn/releases/yarn-4.9.2.cjs

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

.yarnrc.yml

@@ -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"
@@ -87,8 +87,17 @@
 </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"
 import InputText from "primevue/inputtext"
 import Password from "primevue/password"
@@ -97,45 +106,28 @@ import { useI18n } from "vue-i18n"
 import { useLogin } from "../composables/auth/login"
 import LoginOAuth2Buttons from "./login/LoginOAuth2Buttons.vue"
 import { usePlatformConfig } from "../store/platformConfig"
+import { useRouter } from "vue-router"
 
 const { t } = useI18n()
-
 const router = useRouter()
-
 const platformConfigStore = usePlatformConfig()
 const allowRegistration = computed(() => "false" !== platformConfigStore.getSetting("registration.allow_registration"))
 
-const { redirectNotAuthenticated, performLogin, isLoading } = useLogin()
+const { redirectNotAuthenticated, performLogin, isLoading, requires2FA } = useLogin()
 
 const login = ref("")
 const password = ref("")
 const totp = ref("")
 const remember = ref(false)
-const requires2FA = ref(false)
 
 redirectNotAuthenticated()
 
 async function onSubmitLoginForm() {
-  try {
-    const response = await performLogin({
-      login: login.value,
-      password: password.value,
-      totp: requires2FA.value ? totp.value : null,
-      _remember_me: remember.value,
-    })
-
-    if (!response) {
-      console.warn("[Login] No response from performLogin.")
-      return
-    }
-
-    if (response.requires2FA) {
-      requires2FA.value = true
-    } else {
-      await router.replace({ name: "Home" })
-    }
-  } catch (error) {
-    console.error("[Login] performLogin failed:", error)
-  }
+  const response = await performLogin({
+    login: login.value,
+    password: password.value,
+    totp: requires2FA.value ? totp.value : null,
+    _remember_me: remember.value,
+  })
 }
 </script>

assets/vue/components/Login.vue

@@ -144,4 +144,5 @@ export const chamiloIconToClass = {
   "clear-all": "mdi mdi-broom",
   "qrcode": "mdi mdi-qrcode",
   "minus": "mdi mdi-minus",
+  "shield-check": "mdi mdi-shield-check",
 }

assets/vue/components/basecomponents/ChamiloIcons.js

@@ -121,7 +121,7 @@
 
       <div class="mt-auto pt-2">
         <router-link
-          v-if="course.visibility === 3 || (course.visibility === 2 && isUserInCourse)"
+          v-if="isUserInCourse && (course.visibility === 2 || course.visibility === 3)"
           :to="{ name: 'CourseHome', params: { id: course.id } }"
         >
           <Button
@@ -132,15 +132,23 @@
         </router-link>
 
         <Button
-          v-else-if="course.visibility === 2 && course.subscribe && !isUserInCourse"
+          v-else-if="isLocked && hasRequirements"
+          :label="$t('Check requirements')"
+          icon="mdi mdi-shield-check"
+          class="w-full p-button-warning"
+          @click="showDependenciesModal = true"
+        />
+
+        <Button
+          v-else-if="course.subscribe && props.currentUserId"
           :label="$t('Subscribe')"
           icon="pi pi-sign-in"
           class="w-full"
           @click="subscribeToCourse"
         />
 
         <Button
-          v-else-if="course.visibility === 2 && !course.subscribe && !isUserInCourse"
+          v-else-if="course.visibility === 2 && !course.subscribe && props.currentUserId"
           :label="$t('Subscription not allowed')"
           icon="pi pi-ban"
           disabled
@@ -165,6 +173,13 @@
       </div>
     </div>
   </div>
+  <CatalogueRequirementModal
+    v-model="showDependenciesModal"
+    :course-id="course.id"
+    :session-id="course.sessionId || 0"
+    :requirements="requirementList"
+    :graph-image="graphImage"
+  />
   <Dialog
     v-model:visible="showDescriptionDialog"
     :header="course.title"
@@ -179,21 +194,17 @@
 <script setup>
 import Rating from "primevue/rating"
 import Button from "primevue/button"
-import { computed, ref } from "vue"
-import courseRelUserService from "../../services/courseRelUserService"
+import Dialog from "primevue/dialog"
+import { computed, ref, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useNotification } from "../../composables/notification"
-import Dialog from "primevue/dialog"
 import { usePlatformConfig } from "../../store/platformConfig"
+import CatalogueRequirementModal from "./CatalogueRequirementModal.vue"
+import courseRelUserService from "../../services/courseRelUserService"
+import { useCourseRequirementStatus } from "../../composables/course/useCourseRequirementStatus"
 import { useLocale } from "../../composables/locale"
-const platformConfigStore = usePlatformConfig()
-const showDescriptionDialog = ref(false)
 const { getOriginalLanguageName } = useLocale()
 
-const allowDescription = computed(
-  () => platformConfigStore.getSetting("course.show_courses_descriptions_in_catalog") !== "false",
-)
-
 const props = defineProps({
   course: Object,
   currentUserId: {
@@ -212,6 +223,14 @@ const emit = defineEmits(["rate", "subscribed"])
 const router = useRouter()
 const route = useRoute()
 const { showErrorNotification, showSuccessNotification } = useNotification()
+const platformConfigStore = usePlatformConfig()
+
+const showDescriptionDialog = ref(false)
+const showDependenciesModal = ref(false)
+
+const allowDescription = computed(
+  () => platformConfigStore.getSetting("course.show_courses_descriptions_in_catalog") !== "false",
+)
 
 const isUserInCourse = computed(() => {
   if (!props.currentUserId) return false
@@ -287,9 +306,7 @@ function routeExists(name) {
 
 const linkSettings = computed(() => {
   const settings = platformConfigStore.getSetting("course.course_catalog_settings")
-  const result = settings?.link_settings ?? {}
-  console.log("Link settings:", result)
-  return result
+  return settings?.link_settings ?? {}
 })
 
 const imageLink = computed(() => {
@@ -304,10 +321,6 @@ const imageLink = computed(() => {
     return { name: routeName, params: { id: props.course.id } }
   }
 
-  if (routeName) {
-    console.warn(`[CatalogueCourseCard] Route '${routeName}' does not exist.`)
-  }
-
   return null
 })
 
@@ -318,20 +331,21 @@ const titleLink = computed(() => {
     return { name: routeName, params: { id: props.course.id } }
   }
 
-  if (routeName) {
-    console.warn(`[CatalogueCourseCard] Route '${routeName}' does not exist.`)
-  }
-
   return null
 })
 
 const showInfoPopup = computed(() => {
   const allowed = ["course_description_popup"]
   const value = linkSettings.value.info_url
-  if (value && !allowed.includes(value)) {
-    console.warn(`[CatalogueCourseCard] info_url '${value}' is not a recognized option.`)
-    return false
-  }
-  return value === "course_description_popup"
+  return value && allowed.includes(value)
+})
+
+const { isLocked, hasRequirements, requirementList, graphImage, fetchStatus } = useCourseRequirementStatus(
+  props.course.id,
+  props.course.sessionId || 0,
+)
+
+onMounted(() => {
+  fetchStatus()
 })
 </script>

assets/vue/components/course/CatalogueCourseCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="t('Session requirements and dependencies')"
+    class="w-[30rem] z-[99999] !block !opacity-100"
+  >
+    <div v-if="hasData">
+      <div
+        v-for="section in requirements"
+        :key="section.name"
+        class="mb-4"
+      >
+        <h4 class="font-semibold text-gray-700 mb-2">
+          {{ section.name }}
+        </h4>
+        <ul class="list-disc pl-5 text-sm text-gray-700">
+          <li
+            v-for="req in section.requirements"
+            :key="req.name"
+            class="flex items-center gap-2"
+          >
+            <i
+              v-if="req.status !== null"
+              :class="req.status
+            ? 'mdi mdi-check-circle text-green-500'
+            : 'mdi mdi-alert-circle text-red-500'"
+            ></i>
+            <span v-html="req.adminLink || req.name"></span>
+          </li>
+        </ul>
+      </div>
+
+      <div
+        v-if="graphImage"
+        class="mt-4 text-center"
+      >
+        <img
+          :src="graphImage"
+          alt="Graph"
+          class="max-w-full max-h-96 mx-auto border rounded"
+        />
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="text-sm text-gray-500"
+    >
+      {{ t("No dependencies") }}
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog"
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
+const props = defineProps({
+  modelValue: Boolean,
+  courseId: Number,
+  sessionId: Number,
+  requirements: Array,
+  dependencies: Array,
+  graphImage: String,
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const requirements = computed(() => props.requirements || [])
+const dependencies = computed(() => props.dependencies || [])
+
+const hasData = computed(() => {
+  return requirements.value.length > 0 || dependencies.value.length > 0
+})
+</script>