Disable social links after being clicked (#39031)

Closes #35278

Signed-off-by: rmartinc <rmartinc@redhat.com>
This commit is contained in:
Ricardo Martin 2025-05-06 13:37:07 +02:00 committed by GitHub
parent 11b032f9cd
commit 3969c40f61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 55 additions and 4 deletions

View File

@ -70,7 +70,8 @@
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
<a data-once-link data-disabled-class="${properties.kcFormSocialAccountListButtonDisabledClass!}" id="social-${p.alias}"
class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>

View File

@ -97,7 +97,8 @@
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li>
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
<a data-once-link data-disabled-class="${properties.kcFormSocialAccountListButtonDisabledClass!}" id="social-${p.alias}"
class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>

View File

@ -47,9 +47,32 @@
import { startSessionPolling } from "${url.resourcesPath}/js/authChecker.js";
startSessionPolling(
"${url.ssoLoginInOtherTabsUrl?no_esc}"
"${url.ssoLoginInOtherTabsUrl?no_esc}"
);
</script>
<script type="module">
document.addEventListener("click", (event) => {
const link = event.target.closest("a[data-once-link]");
if (!link) {
return;
}
if (link.getAttribute("aria-disabled") === "true") {
event.preventDefault();
return;
}
const { disabledClass } = link.dataset;
if (disabledClass) {
link.classList.add(...disabledClass.trim().split(/\s+/));
}
link.setAttribute("role", "link");
link.setAttribute("aria-disabled", "true");
});
</script>
<#if authenticationSession??>
<script type="module">
import { checkAuthSession } from "${url.resourcesPath}/js/authChecker.js";

View File

@ -8,7 +8,8 @@
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li class="<#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}<#else>${properties.kcFormSocialAccountListItemClass!}</#if>">
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!}" aria-label="${p.displayName}"
<a data-once-link data-disabled-class="${properties.kcFormSocialAccountListButtonDisabledClass!}" id="social-${p.alias}"
class="${properties.kcFormSocialAccountListButtonClass!}" aria-label="${p.displayName}"
type="button" href="${p.loginUrl}">
<#if p.iconClasses?has_content>
<span class="${p.iconClasses!}">${p.displayName!}</span>

View File

@ -94,6 +94,29 @@
"${url.ssoLoginInOtherTabsUrl?no_esc}"
);
</script>
<script type="module">
document.addEventListener("click", (event) => {
const link = event.target.closest("a[data-once-link]");
if (!link) {
return;
}
if (link.getAttribute("aria-disabled") === "true") {
event.preventDefault();
return;
}
const { disabledClass } = link.dataset;
if (disabledClass) {
link.classList.add(...disabledClass.trim().split(/\s+/));
}
link.setAttribute("role", "link");
link.setAttribute("aria-disabled", "true");
});
</script>
<#if authenticationSession??>
<script type="module">
import { checkAuthSession } from "${url.resourcesPath}/js/authChecker.js";

View File

@ -58,6 +58,7 @@ kcFormSocialAccountListClass=pf-v5-c-login__main-body pf-v5-u-pl-0 pf-v5-u-pr-0
kcFormSocialAccountListItemClass=pf-v5-u-pb-sm
kcFormSocialAccountNameClass=pf-v5-u-m-auto
kcFormSocialAccountListButtonClass=pf-v5-c-button pf-m-secondary pf-m-block pf-v5-u-display-flex pf-v5-u-align-items-center pf-v5-u-justify-content-space-between
kcFormSocialAccountListButtonDisabledClass=pf-m-aria-disabled
kcFormSocialAccountListGridClass=pf-v5-l-grid pf-m-gutter pf-m-all-6-col-on-xl pf-m-all-6-col-on-sm
kcFormSocialAccountGridItem=pf-v5-l-grid__item

View File

@ -36,6 +36,7 @@ kcFormCardClass=card-pf
kcFormSocialAccountListClass=pf-c-login__main-footer-links kc-social-links
kcFormSocialAccountListGridClass=pf-l-grid kc-social-grid
kcFormSocialAccountListButtonClass=pf-c-button pf-m-control pf-m-block kc-social-item kc-social-gray
kcFormSocialAccountListButtonDisabledClass=pf-m-aria-disabled
kcFormSocialAccountGridItem=pf-l-grid__item
kcFormSocialAccountNameClass=kc-social-provider-name