SSO: Display: External logins under below the login form - refs BT#21881

assets/css/scss/atoms/_divider.scss

@@ -12,7 +12,7 @@
 
   &[aria-orientation="horizontal"] {
     @apply before:absolute before:block before:left-0 before:w-full before:top-1/2 before:content-[""] before:border-t before:border-solid before:border-gray-25
-      flex w-full relative items-center my-4 px-2;
+      flex relative items-center my-4 px-2;
 
     div {
       @apply first:px-2;

assets/css/scss/index.scss

@@ -50,6 +50,7 @@
 @import "organisms/course_card";
 @import "organisms/datatable";
 @import "organisms/dataview";
+@import "organisms/external_logins";
 @import "organisms/modals";
 @import "organisms/menu";
 @import "organisms/sidebar";

assets/css/scss/organisms/_external_logins.scss

@@ -0,0 +1,15 @@
+.external-logins {
+  @apply flex flex-col gap-2 items-center;
+
+  &__divider {
+    @apply w-60 mx-auto uppercase;
+  }
+
+  &__button-list {
+    @apply space-y-4;
+  }
+
+  &__button {
+    @apply border border-gray-25 bg-white rounded-lg text-gray-90 py-4 px-12 block font-semibold;
+  }
+}

assets/vue/components/Login.vue

@@ -66,6 +66,8 @@
         />
       </div>
     </form>
+
+    <ExternalLoginButtons />
   </div>
 </template>
 
@@ -77,6 +79,7 @@ import Password from "primevue/password"
 import InputSwitch from "primevue/inputswitch"
 import { useI18n } from "vue-i18n"
 import { useLogin } from "../composables/auth/login"
+import ExternalLoginButtons from "./login/LoginExternalButtons.vue"
 
 const { t } = useI18n()
 

assets/vue/components/login/LoginExternalButtons.vue

@@ -0,0 +1,37 @@
+<script setup>
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
+import BaseDivider from "../basecomponents/BaseDivider.vue"
+import { useI18n } from "vue-i18n"
+import { usePlatformConfig } from "../../store/platformConfig"
+
+const { t } = useI18n()
+
+const platformConfig = usePlatformConfig()
+</script>
+
+<template>
+  <div
+    v-if="platformConfig.externalAuthentication.length > 0"
+    class="external-logins"
+  >
+    <BaseDivider
+      :title="t('Or')"
+      align="center"
+      class="external-logins__divider"
+    />
+
+    <ul class="external-logins__button-list">
+      <li
+        v-for="(extAuth, idx) in platformConfig.externalAuthentication"
+        :key="idx"
+      >
+        <BaseAppLink
+          :url="extAuth.url"
+          class="external-logins__button"
+        >
+          {{ t("Continue with %s", [extAuth.title]) }}
+        </BaseAppLink>
+      </li>
+    </ul>
+  </div>
+</template>

assets/vue/store/platformConfig.js

@@ -8,6 +8,7 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
   const studentView = ref("teacherview")
   const plugins = ref([])
   const visualTheme = ref("chamilo")
+  const externalAuthentication = ref([])
 
   async function findSettingsRequest() {
     isLoading.value = true
@@ -22,6 +23,8 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
       studentView.value = data.studentview
 
       plugins.value = data.plugins
+
+      externalAuthentication.value = data.external_authentication
     } catch (e) {
       console.log(e)
     } finally {
@@ -48,5 +51,6 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
     getSetting,
     isStudentViewActive,
     visualTheme,
+    externalAuthentication,
   }
 })

config/authentication.yaml

@@ -5,6 +5,7 @@ parameters:
         default:
             generic:
                 enabled: false
+                title: 'External'
                 client_id: ''
                 client_secret: ''
                 provider_options:
@@ -34,13 +35,15 @@ parameters:
 
             facebook:
                 enabled: false
+                title: 'Facebook'
                 client_id: ''
                 client_secret: ''
                 graph_api_version: 'v20.0'
                 redirect_params: { }
 
             keycloak:
                 enabled: false
+                title: 'Keycloak'
                 client_id: ''
                 client_secret: ''
                 auth_server_url: ''

src/CoreBundle/Controller/PlatformConfigurationController.php

@@ -8,6 +8,7 @@
 
 use bbb;
 use Chamilo\CoreBundle\Repository\Node\CourseRepository;
+use Chamilo\CoreBundle\ServiceHelper\AuthenticationConfigHelper;
 use Chamilo\CoreBundle\ServiceHelper\ThemeHelper;
 use Chamilo\CoreBundle\ServiceHelper\TicketProjectHelper;
 use Chamilo\CoreBundle\ServiceHelper\UserHelper;
@@ -29,6 +30,7 @@ public function __construct(
         private readonly TicketProjectHelper $ticketProjectHelper,
         private readonly UserHelper $userHelper,
         private readonly ThemeHelper $themeHelper,
+        private readonly AuthenticationConfigHelper $authenticationConfigHelper,
     ) {}
 
     #[Route('/list', name: 'platform_config_list', methods: ['GET'])]
@@ -41,6 +43,7 @@ public function list(SettingsManager $settingsManager): Response
             'studentview' => $requestSession->get('studentview'),
             'plugins' => [],
             'visual_theme' => $this->themeHelper->getVisualTheme(),
+            'external_authentication' => $this->authenticationConfigHelper->getEnabledProviders(),
         ];
         $variables = [];
 

src/CoreBundle/ServiceHelper/AuthenticationConfigHelper.php

@@ -9,33 +9,27 @@
 use Chamilo\CoreBundle\Entity\AccessUrl;
 use InvalidArgumentException;
 use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+use function Symfony\Component\String\u;
 
 readonly class AuthenticationConfigHelper
 {
     public function __construct(
         private ParameterBagInterface $parameterBag,
         private AccessUrlHelper $urlHelper,
+        private UrlGeneratorInterface $urlGenerator,
     ) {}
 
     public function getParams(string $providerName, ?AccessUrl $url = null): array
     {
-        $urlId = $url ? $url->getId() : $this->urlHelper->getCurrent()->getId();
-
-        $authentication = $this->parameterBag->get('authentication');
-
-        if (isset($authentication[$urlId])) {
-            $urlParams = $authentication[$urlId];
-        } elseif (isset($authentication['default'])) {
-            $urlParams = $authentication['default'];
-        } else {
-            throw new InvalidArgumentException('Invalid access URL configuration');
-        }
+        $providers = $this->getProvidersForUrl($url);
 
-        if (!isset($urlParams[$providerName])) {
+        if (!isset($providers[$providerName])) {
             throw new InvalidArgumentException('Invalid authentication provider for access URL');
         }
 
-        return $urlParams[$providerName];
+        return $providers[$providerName];
     }
 
     public function isEnabled(string $methodName, ?AccessUrl $url = null): bool
@@ -44,4 +38,40 @@ public function isEnabled(string $methodName, ?AccessUrl $url = null): bool
 
         return $configParams['enabled'] ?? false;
     }
+
+    public function getEnabledProviders(?AccessUrl $url = null): array
+    {
+        $urlProviders = $this->getProvidersForUrl($url);
+
+        $enabledProviders = [];
+
+        foreach ($urlProviders as $providerName => $providerParams) {
+            if ($providerParams['enabled'] ?? false) {
+                $enabledProviders[] = [
+                    'name' => $providerName,
+                    'title' => $providerParams['title'] ?? u($providerName)->title(),
+                    'url' => $this->urlGenerator->generate("chamilo.oauth2_{$providerName}_start"),
+                ];
+            }
+        }
+
+        return $enabledProviders;
+    }
+
+    private function getProvidersForUrl(?AccessUrl $url): array
+    {
+        $urlId = $url ? $url->getId() : $this->urlHelper->getCurrent()->getId();
+
+        $authentication = $this->parameterBag->get('authentication');
+
+        if (isset($authentication[$urlId])) {
+            return $authentication[$urlId];
+        }
+
+        if (isset($authentication['default'])) {
+            return $authentication['default'];
+        }
+
+        throw new InvalidArgumentException('Invalid access URL configuration');
+    }
 }