added click handler that removes itself on initial click

fixes: keycloak#35278 Signed-off-by: Erik Jan de Wit <[email protected]>
edewit · Dec 2, 2024 · 05ac225 · 05ac225
1 parent faf36dd
commit 05ac225
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl b/themes/src/main/resources/theme/keycloak.v2/login/social-providers.ftl
@@ -8,8 +8,8 @@
       <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
           <#list social.providers as p>
               <li class="${properties.kcFormSocialAccountListItemClass!}">
-                  <a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>" aria-label="${p.displayName}"
-                          type="button" href="${p.loginUrl}">
+                  <a data-id="social-link" id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>" aria-label="${p.displayName}"
+                          type="button" href="#" data-link="${p.loginUrl}">
                         <#if p.iconClasses?has_content>
                             <span class="${p.iconClasses!}">${p.displayName!}</span>
                         <#else>
@@ -102,4 +102,19 @@
           </#list>
       </ul>
   </div>
+  <script type="module">
+    const clickOnce = (event) => {
+      event.preventDefault();
+      const element = event.target.parentElement
+      element.removeEventListener('click', clickOnce);
+      const location = element.getAttribute('data-link');
+      if (location) {
+        window.location.href = location;
+      }
+    };
+    const socialLinks = document.querySelectorAll('[data-id="social-link"]');
+    socialLinks.forEach((link) => {
+      link.addEventListener('click', clickOnce);
+    });
+  </script>
 </#macro>