From 60126d5d2ea3bd4bb004bff8c9666533b8bfb0a3 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Wed, 28 Feb 2024 12:07:29 +0100 Subject: [PATCH] pf5 login (#27222) * better alignment for the login Signed-off-by: Erik Jan de Wit * added register pf5 to login Signed-off-by: Erik Jan de Wit --------- Signed-off-by: Erik Jan de Wit --- .../theme/keycloak.v2/login/pf-5-template.ftl | 2 + .../keycloak.v2/login/register-commons.ftl | 27 +++ .../theme/keycloak.v2/login/register.ftl | 101 +++++++++ .../login/resources/css/styles.css | 15 +- .../login/user-profile-commons.ftl | 196 ++++++++++++++++++ 5 files changed, 336 insertions(+), 5 deletions(-) create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/register-commons.ftl create mode 100755 themes/src/main/resources/theme/keycloak.v2/login/register.ftl create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl diff --git a/themes/src/main/resources/theme/keycloak.v2/login/pf-5-template.ftl b/themes/src/main/resources/theme/keycloak.v2/login/pf-5-template.ftl index 1b6163f3bf..abe4f4580c 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/pf-5-template.ftl +++ b/themes/src/main/resources/theme/keycloak.v2/login/pf-5-template.ftl @@ -77,6 +77,7 @@ x-on:focusin.window="! $refs.panel?.contains($event.target) && close()" x-id="['language-select']" > + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/register-commons.ftl b/themes/src/main/resources/theme/keycloak.v2/login/register-commons.ftl new file mode 100644 index 0000000000..7007797ee0 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/register-commons.ftl @@ -0,0 +1,27 @@ +<#macro termsAcceptance> + <#if termsAcceptanceRequired??> +
+
+ ${msg("termsTitle")} +
+ ${kcSanitize(msg("termsText"))?no_esc} +
+
+
+
+
+ + +
+ <#if messagesPerField.existsError('termsAccepted')> +
+ + ${kcSanitize(messagesPerField.get('termsAccepted'))?no_esc} + +
+ +
+ + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/register.ftl b/themes/src/main/resources/theme/keycloak.v2/login/register.ftl new file mode 100755 index 0000000000..dd27958a59 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/register.ftl @@ -0,0 +1,101 @@ +<#import "pf-5-template.ftl" as layout> +<#import "user-profile-commons.ftl" as userProfileCommons> +<#import "register-commons.ftl" as registerCommons> +<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section> + <#if section = "header"> + ${msg("registerTitle")} + <#elseif section = "form"> +
+ + <@userProfileCommons.userProfileFormFields; callback, attribute> + <#if callback = "afterField"> + <#-- render password fields just under the username or email (if used as username) --> + <#if passwordRequired?? && (attribute.name == 'username' || (attribute.name == 'email' && realm.registrationEmailAsUsername))> +
+ + + + + + + + + <#if messagesPerField.existsError('password')> + + ${kcSanitize(messagesPerField.get('password'))?no_esc} + + +
+ +
+
+ +
+
+ + + + +
+ + <#if messagesPerField.existsError('password-confirm')> + + ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc} + + +
+ + + + + <@registerCommons.termsAcceptance/> + + <#if recaptchaRequired??> +
+
+
+
+
+ + +
+ + +
+ +
+
+
+ + + diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css index 7991bed5ba..aa0880b287 100644 --- a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css +++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css @@ -1,8 +1,13 @@ -/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class. - This clashes with the "keycloak-bg.png' background defined on the body below. - Therefore the Patternfly background must be set to none. */ -.login-pf { - background: none; +.pf-v5-c-login__container { + grid-template-areas: "main"; + grid-template-columns: 34rem; +} + +#kc-header-wrapper { + padding: 62px 10px 20px; + position: absolute; + left: 50%; + transform: translateX(-50%); } .login-pf body { diff --git a/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl b/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl new file mode 100644 index 0000000000..bbbd3fd436 --- /dev/null +++ b/themes/src/main/resources/theme/keycloak.v2/login/user-profile-commons.ftl @@ -0,0 +1,196 @@ +<#macro userProfileFormFields> + <#assign currentGroup=""> + + <#list profile.attributes as attribute> + + <#assign groupName = attribute.group!""> + <#if groupName != currentGroup> + <#assign currentGroup=groupName> + <#if currentGroup != "" > +
+ + <#assign groupDisplayHeader=attribute.groupDisplayHeader!""> + <#if groupDisplayHeader != ""> + <#assign groupHeaderText=advancedMsg(attribute.groupDisplayHeader)!groupName> + <#else> + <#assign groupHeaderText=groupName> + +
+ +
+ + <#assign groupDisplayDescription=attribute.groupDisplayDescription!""> + <#if groupDisplayDescription != ""> + <#assign groupDescriptionText=advancedMsg(attribute.groupDisplayDescription)!""> + + +
+ + + + <#nested "beforeField" attribute> +
+ + + <#if attribute.annotations.inputHelperTextBefore??> +
${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextBefore))?no_esc}
+ + <@inputFieldByType attribute=attribute/> + <#if messagesPerField.existsError('${attribute.name}')> + + ${kcSanitize(messagesPerField.get('${attribute.name}'))?no_esc} + + + <#if attribute.annotations.inputHelperTextAfter??> +
${kcSanitize(advancedMsg(attribute.annotations.inputHelperTextAfter))?no_esc}
+ +
+ + <#nested "afterField" attribute> + + + <#list profile.html5DataAnnotations?keys as key> + + + + +<#macro inputFieldByType attribute> + <#switch attribute.annotations.inputType!''> + <#case 'textarea'> + <@textareaTag attribute=attribute/> + <#break> + <#case 'select'> + <#case 'multiselect'> + <@selectTag attribute=attribute/> + <#break> + <#case 'select-radiobuttons'> + <#case 'multiselect-checkboxes'> + <@inputTagSelects attribute=attribute/> + <#break> + <#default> + <@inputTag attribute=attribute/> + + + +<#macro inputTag attribute> + disabled + <#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}" + <#if attribute.annotations.inputTypePlaceholder??>placeholder="${attribute.annotations.inputTypePlaceholder}" + <#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}" + <#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}" + <#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}" + <#if attribute.annotations.inputTypeMinlength??>minlength="${attribute.annotations.inputTypeMinlength}" + <#if attribute.annotations.inputTypeMax??>max="${attribute.annotations.inputTypeMax}" + <#if attribute.annotations.inputTypeMin??>min="${attribute.annotations.inputTypeMin}" + <#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}" + <#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}" + <#list attribute.html5DataAnnotations as key, value> + data-${key}="${value}" + + /> + + +<#macro inputTagType attribute> + <#compress> + <#if attribute.annotations.inputType??> + <#if attribute.annotations.inputType?starts_with("html5-")> + ${attribute.annotations.inputType[6..]} + <#else> + ${attribute.annotations.inputType} + + <#else> + text + + + + +<#macro textareaTag attribute> + + + +<#macro selectTag attribute> + + + +<#macro inputTagSelects attribute> + <#if attribute.annotations.inputType=='select-radiobuttons'> + <#assign inputType='radio'> + <#assign classDiv=properties.kcInputClassRadio!> + <#assign classInput=properties.kcInputClassRadioInput!> + <#assign classLabel=properties.kcInputClassRadioLabel!> + <#else> + <#assign inputType='checkbox'> + <#assign classDiv=properties.kcInputClassCheckbox!> + <#assign classInput=properties.kcInputClassCheckboxInput!> + <#assign classLabel=properties.kcInputClassCheckboxLabel!> + + + <#if attribute.annotations.inputOptionsFromValidation?? && attribute.validators[attribute.annotations.inputOptionsFromValidation]?? && attribute.validators[attribute.annotations.inputOptionsFromValidation].options??> + <#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options> + <#elseif attribute.validators.options?? && attribute.validators.options.options??> + <#assign options=attribute.validators.options.options> + + + <#if options??> + <#list options as option> +
+ disabled + <#if attribute.values?seq_contains(option)>checked + /> + +
+ + + + +<#macro selectOptionLabelText attribute option> + <#compress> + <#if attribute.annotations.inputOptionLabels??> + ${advancedMsg(attribute.annotations.inputOptionLabels[option]!option)} + <#else> + <#if attribute.annotations.inputOptionLabelsI18nPrefix??> + ${msg(attribute.annotations.inputOptionLabelsI18nPrefix + '.' + option)} + <#else> + ${option} + + + +