libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Fix Keycloak.v2 login theme

Browse source 
This fixes the findings from #30319.

The tests are not updated and are run on legacy keycloak theme.
The new login theme is kept disabled, since otherwise it would
be treated as default and used by tests which is said to be
unacceptable due to test duration.

Fixes: #29009

Signed-off-by: Hynek Mlnarik <hmlnarik@redhat.com>
This commit is contained in:
Hynek Mlnarik 2024-06-21 13:51:39 +02:00 committed by Hynek Mlnařík
parent dd7e82cd16
commit 333f1fb7ee
8 changed files with 78 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
themes/src/main/resources/theme/keycloak.v2/login/login-config-totp.ftl
View file

@ -50,7 +50,7 @@
</li>
</ol>
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post">
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post" novalidate="novalidate">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelClass!}">
<label class="pf-v5-c-form__label" for="form-vertical-name">

2
themes/src/main/resources/theme/keycloak.v2/login/login-update-password.ftl
View file

@ -4,7 +4,7 @@
<#if section = "header">
${msg("updatePasswordTitle")}
<#elseif section = "form">
<form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post" novalidate="novalidate">
<div class="${properties.kcFormGroupClass!}">
<label for="password-new" class="${properties.kcLabelClass!}">
<span class="pf-v5-c-form__label-text">

10
themes/src/main/resources/theme/keycloak.v2/login/login.ftl
View file

@ -6,7 +6,7 @@
<div id="kc-form">
<div id="kc-form-wrapper">
<#if realm.password>
<form id="kc-form-login" class="${properties.kcFormClass!} onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<form id="kc-form-login" class="${properties.kcFormClass!} onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post" novalidate="novalidate">
<#if !usernameHidden??>
<div class="${properties.kcFormGroupClass!}">
<label for="username" class="${properties.kcLabelClass!}">
@ -180,9 +180,11 @@
</svg>
<#break>
<#default>
<svg viewBox="0 0 512 512" aria-hidden="true">
<path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"/>
</svg>
<span class="${p.iconClasses!}" aria-hidden="true">
<svg viewBox="0 0 512 512" aria-hidden="true">
<path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"/>
</svg>
</span>
</#switch>
<#else>
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>

2
themes/src/main/resources/theme/keycloak.v2/login/register.ftl
View file

@ -9,7 +9,7 @@
${msg("registerTitle")}
</#if>
<#elseif section = "form">
<form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
<form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post" novalidate="novalidate">
<@userProfileCommons.userProfileFormFields; callback, attribute>
<#if callback = "afterField">

42
themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
View file

@ -27,3 +27,45 @@ div.kc-logo-text {
div.kc-logo-text span {
display: none;
}
.kc-login-tooltip {
position: relative;
display: inline-block;
}
.kc-login-tooltip .kc-tooltip-text{
top:-3px;
left:160%;
background-color: black;
visibility: hidden;
color: #fff;
min-width:130px;
text-align: center;
border-radius: 2px;
box-shadow:0 1px 8px rgba(0,0,0,0.6);
padding: 5px;
position: absolute;
opacity:0;
transition:opacity 0.5s;
}
/* Show tooltip */
.kc-login-tooltip:hover .kc-tooltip-text {
visibility: visible;
opacity:0.7;
}
/* Arrow for tooltip */
.kc-login-tooltip .kc-tooltip-text::after {
content: " ";
position: absolute;
top: 15px;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

25
themes/src/main/resources/theme/keycloak.v2/login/template.ftl
View file

@ -27,7 +27,8 @@
<script type="importmap">
{
"imports": {
"alpinejs": "${url.resourcesCommonPath}/node_modules/alpinejs/dist/module.esm.js"
"alpinejs": "${url.resourcesCommonPath}/node_modules/alpinejs/dist/module.esm.js",
"rfc4648": "${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js"
}
}
</script>
@ -41,17 +42,13 @@
<script src="${script}" type="text/javascript"></script>
</#list>
</#if>
<#if authenticationSession??>
<script type="module">
import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
<script type="module">
import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
checkCookiesAndSetTimer(
"${authenticationSession.authSessionId}",
"${authenticationSession.tabId}",
"${url.ssoLoginInOtherTabsUrl}"
);
</script>
</#if>
checkCookiesAndSetTimer(
"${url.ssoLoginInOtherTabsUrl?no_esc}"
);
</script>
</head>
<body id="keycloak-bg" class="${properties.kcBodyClass!}">
@ -87,7 +84,7 @@
<div class="pf-v5-c-login__container">
<main class="pf-v5-c-login__main">
<header class="pf-v5-c-login__main-header">
<h1 class="pf-v5-c-title pf-m-3xl"><#nested "header"></h1>
<h1 class="pf-v5-c-title pf-m-3xl" id="kc-page-title"><#nested "header"></h1>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="pf-v5-c-login__main-header-utilities">
<div class="pf-v5-c-form-control">
@ -179,14 +176,14 @@
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
<#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
</div>
<span class="${properties.kcAlertTitleClass!}">${kcSanitize(message.summary)?no_esc}</span>
<span class="${properties.kcAlertTitleClass!} kc-feedback-text">${kcSanitize(message.summary)?no_esc}</span>
</div>
</#if>
<#nested "form">
<#if auth?has_content && auth.showTryAnotherWayLink()>
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" novalidate="novalidate">
<div class="${properties.kcFormGroupClass!}">
<input type="hidden" name="tryAnotherWay" value="on"/>
<a href="#" id="try-another-way"

2
themes/src/main/resources/theme/keycloak.v2/login/theme.properties
View file

@ -25,3 +25,5 @@ kcLogoIdP-linkedin-openid-connect=fa fa-linkedin
kcLoginClass=pf-v5-c-login__main
kcFormClass=pf-v5-c-form
kcFormCardClass=card-pf
kcResetFlowIcon=pf-icon fas fa-share-square

20
themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl
View file

@ -35,10 +35,18 @@
</#if>
<#nested "beforeField" attribute>
<div class="${properties.kcFormGroupClass!}" x-data="{
<div class="${properties.kcFormGroupClass!}"
<#if attribute.multivalued && attribute.values?has_content>
x-data="{
values: [${(attribute.values?map(s -> s!''?js_string)?map(s -> '{ value: \'' + s + '\'}')?join(", ")!'')}],
kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
}"
<#else>
x-data="{
values: [{ value: '${(attribute.value!'')}' }],
kcMultivalued: ${attribute.html5DataAnnotations?keys?seq_contains('kcMultivalued')?string('true', 'false')}
}"
</#if>
>
<label for="${attribute.name}" class="${properties.kcLabelClass!}">
<span class="pf-v5-c-form__label-text">
@ -70,7 +78,7 @@
<button
class="pf-v5-c-button pf-m-control"
type="button"
:id="$id('add-name-${attribute.name}')"
:id="$id('kc-remove-${attribute.name}')"
x-bind:disabled="index == 0 && values.length == 1"
x-on:click="values.splice(index, 1); $dispatch('bind')"
>
@ -79,7 +87,7 @@
</div>
</div>
</template>
<button type="button" class="pf-v5-c-button pf-m-link" x-show="kcMultivalued" x-on:click="values.push({ value: '' }); $dispatch('bind')">
<button type="button" class="pf-v5-c-button pf-m-link" x-show="kcMultivalued" x-on:click="values.push({ value: '' }); $dispatch('bind')" id="kc-add-${attribute.name}">
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg>
Add ${advancedMsg(attribute.displayName!'')}
</button>
@ -106,12 +114,12 @@
<@inputTagSelects attribute=attribute/>
<#break>
<#default>
<@inputTag attribute=attribute/>
<@inputTag attribute=attribute value=attribute.value!/>
</#switch>
</#macro>
<#macro inputTag attribute>
<input type="<@inputTagType attribute=attribute/>" :id="$id('name-${attribute.name}')" name="${attribute.name}" class="${properties.kcInputClass!}"
<#macro inputTag attribute value>
<input type="<@inputTagType attribute=attribute/>" :id="kcMultivalued ? $id('${attribute.name}') : '${attribute.name}'" name="${attribute.name}" :value="item.value" class="${properties.kcInputClass!}"
aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
<#if attribute.readOnly>disabled</#if>
<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>