added patternfly 5 update password (#26580)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

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

@@ -0,0 +1,80 @@
+<#import "pf-5-template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password','password-confirm'); section>
+    <#if section = "header">
+        ${msg("updatePasswordTitle")}
+    <#elseif section = "form">
+        <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <div class="${properties.kcFormGroupClass!}">
+                <label for="password-new" class="${properties.kcLabelClass!}">
+                    <span class="pf-v5-c-form__label-text">
+                        ${msg("passwordNew")}
+                    </span>
+                </label>
+                <div class="${properties.kcInputGroup!}">
+                    <span class="${properties.kcInputClass!}">
+                        <input type="password" id="password-new" name="password-new" autofocus autocomplete="new-password"
+                                aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
+                        />
+                    </span>
+                    <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
+                            aria-controls="password-new"  data-password-toggle
+                            data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
+                            data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
+                        <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
+                    </button>
+                </div>
+
+                <#if messagesPerField.existsError('password')>
+                    <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                        ${kcSanitize(messagesPerField.get('password'))?no_esc}
+                    </span>
+                </#if>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <label for="password-confirm" class="${properties.kcLabelClass!}">
+                    <span class="pf-v5-c-form__label-text">
+                        ${msg("passwordConfirm")}
+                    </span>
+                </label>
+                <div class="${properties.kcInputGroup!}">
+                    <span class="${properties.kcInputClass!}">
+                        <input type="password" id="password-confirm" name="password-confirm"
+                                autocomplete="new-password"
+                                aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                        />
+                    </span>
+                    <button class="${properties.kcFormPasswordVisibilityButtonClass!}" type="button" aria-label="${msg('showPassword')}"
+                            aria-controls="password-confirm" data-password-toggle
+                            data-icon-show="${properties.kcFormPasswordVisibilityIconShow!}" data-icon-hide="${properties.kcFormPasswordVisibilityIconHide!}"
+                            data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
+                        <i class="${properties.kcFormPasswordVisibilityIconShow!}" aria-hidden="true"></i>
+                    </button>
+                </div>
+
+                <#if messagesPerField.existsError('password-confirm')>
+                    <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                        ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
+                    </span>
+                </#if>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <@passwordCommons.logoutOtherSessions/>
+            </div>
+
+            <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!} pf-m-action">
+                <div class="pf-v5-c-form__actions">
+                    <#if isAppInitiatedAction??>
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" />${msg("doCancel")}</button>
+                    <#else>
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                    </#if>
+                </div>
+            </div>
+        </form>
+        <script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
+    </#if>
+</@layout.registrationLayout>

themes/src/main/resources/theme/keycloak.v2/login/login.ftl

@@ -6,7 +6,7 @@
         <div id="kc-form">
           <div id="kc-form-wrapper">
             <#if realm.password>
-                <form id="kc-form-login" class="pf-v5-c-form" 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">
                     <#if !usernameHidden??>
                         <div class="${properties.kcFormGroupClass!}">
                             <label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>

themes/src/main/resources/theme/keycloak.v2/login/theme.properties

@@ -11,6 +11,8 @@ kcInputClass=pf-v5-c-form-control
 kcInputGroup=pf-v5-c-input-group
 
 kcInputErrorMessageClass=pf-v5-c-helper-text__item pf-m-error pf-v5-c-form__label-required kc-feedback-text
+kcAlertClass=pf-v5-c-alert pf-m-inline
+kcAlertTitleClass=pf-v5-c-alert__title
 kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
 
 kcButtonClass=pf-v5-c-button
@@ -20,3 +22,7 @@ kcFormSocialAccountListItmeClass=pf-v5-c-login__main-footer-links-item
 kcFormSocialAccountListButtonClass=pf-v5-c-login__main-footer-links-item-link
 
 kcLogoIdP-linkedin-openid-connect=fa fa-linkedin
+
+kcLoginClass=pf-v5-c-login__main
+kcFormClass=pf-v5-c-form
+kcFormCardClass=card-pf