added properties for classes

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

themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl

@@ -6,23 +6,23 @@
     ${msg("recovery-code-config-header")}
 <#elseif section = "form">
     <!-- warning -->
-    <div class="pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md ${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
+    <div class="${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
-        <div class="pf-v5-c-alert__icon">
+        <div class="${properties.kcAlertIconClass!}">
             <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
         </div>
-        <h4 class="pf-v5-c-alert__title">
+        <h4 class="${properties.kcAlertTitleClass!}">
             <span class="pf-screen-reader">Warning alert:</span>
             ${msg("recovery-code-config-warning-title")}
         </h4>
-        <div class="pf-v5-c-alert__description">
+        <div class="${properties.kcAlertDescriptionClass!}">
             <p>${msg("recovery-code-config-warning-message")}</p>
         </div>
     </div>
 
-    <div class="pf-v5-c-panel pf-m-raised">
+    <div class="${properties.kcPanelClass!}">
-        <div class="pf-v5-c-panel__main">
+        <div class="${properties.kcPanelMainClass!}">
-            <div class="pf-v5-c-panel__main-body">
+            <div class="${properties.kcPanelMainBodyClass!}">
-            <ol id="kc-recovery-codes-list" class="pf-v5-c-list" role="list">
+            <ol id="kc-recovery-codes-list" class="${properties.kcListClass!}" role="list">
                 <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
                     <li>${code[0..3]}-${code[4..7]}-${code[8..]}</li>
                 </#list>
@@ -33,13 +33,13 @@
 
     <!-- actions -->
     <div class="${properties.kcRecoveryCodesActions!}">
-        <button id="printRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button" onclick="printRecoveryCodes()">
+        <button id="printRecoveryCodes" class="${properties.kcButtonLinkClass}" type="button" onclick="printRecoveryCodes()">
             <i class="fas fa-print"></i> ${msg("recovery-codes-print")}
         </button>
-        <button id="downloadRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button" onclick="downloadRecoveryCodes()">
+        <button id="downloadRecoveryCodes" class="${properties.kcButtonLinkClass}" type="button" onclick="downloadRecoveryCodes()">
             <i class="fas fa-download"></i> ${msg("recovery-codes-download")}
         </button>
-        <button id="copyRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button" onclick="copyRecoveryCodes()">
+        <button id="copyRecoveryCodes" class="${properties.kcButtonLinkClass}" type="button" onclick="copyRecoveryCodes()">
             <i class="fas fa-copy"></i> ${msg("recovery-codes-copy")}
         </button>
     </div>

themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl

@@ -6,30 +6,33 @@
         </#if>
     <#elseif section = "form">
 
-        <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+    <ul class="${properties.kcSelectAuthListClass!}" role="list">
-            <ul class="pf-v5-c-data-list" role="list">
+        <#list auth.authenticationSelections as authenticationSelection>
-                <#list auth.authenticationSelections as authenticationSelection>
+            <li class="${properties.kcSelectAuthListItemWrapperClass!}">
-                <li class="pf-v5-c-data-list__item pf-m-clickable">
+                <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
-                    <div class="pf-v5-c-data-list__item-row" onclick="document.forms[0].submit()">
+                    <input type="hidden" name="authenticationExecution" value="${authenticationSelection.authExecId}">
-                        <div class="pf-v5-c-data-list__item-content">
+                </form>
-                            <div class="pf-v5-c-data-list__cell pf-m-icon">
+                <div class="${properties.kcSelectAuthListItemClass!}" onclick="document.forms[${authenticationSelection?index}].submit()">
-                                <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
+                    <div class="pf-v5-c-data-list__item-content">
-                            </div>
+                        <div class="${properties.kcSelectAuthListItemIconClass!}">
-                            <div class="pf-v5-c-data-list__cell pf-m-no-fill">
+                            <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
-                                <h2 class="pf-v5-u-font-family-heading">${msg('${authenticationSelection.displayName}')}</h2>
-                            </div>
-                            <div class="pf-v5-c-data-list__cell pf-m-no-fill">
-                                ${msg('${authenticationSelection.helpText}')}
-                            </div>
                         </div>
-                        <div class="pf-v5-c-data-list__item-action">
+                        <div class="${properties.kcSelectAuthListItemBodyClass!}">
-                            <i class="${properties.kcSelectAuthListItemArrowIconClass!}" aria-hidden="true"></i>
+                            <h2 class="${properties.kcSelectAuthListItemHeadingClass!}">
+                                ${msg('${authenticationSelection.displayName}')}
+                            </h2>
+                        </div>
+                        <div class="${properties.kcSelectAuthListItemDescriptionClass!}">
+                            ${msg('${authenticationSelection.helpText}')}
                         </div>
                     </div>
-                </li>
+                    <div class="${properties.kcSelectAuthListItemFillClass!}">
-            </#list>
+                        <i class="${properties.kcSelectAuthListItemArrowIconClass!}" aria-hidden="true"></i>
-            </ul>
+                    </div>
-        </form>
+                </div>
+            </li>
+        </#list>
+    </ul>
 
     </#if>
 </@layout.registrationLayout>

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

@@ -11,10 +11,18 @@ 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
+kcAlertIconClass=pf-v5-c-alert__icon
 kcAlertTitleClass=pf-v5-c-alert__title
+kcAlertDescriptionClass=pf-v5-c-alert__description
 kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
 
+kcPanelClass=pf-v5-c-panel pf-m-raised
+kcPanelMainClass=pf-v5-c-panel__main
+kcPanelMainBodyClass=pf-v5-c-panel__main-body
+kcListClass=pf-v5-c-list
+
 kcButtonClass=pf-v5-c-button
+kcButtonLinkClass=pf-v5-c-button pf-m-link
 kcCommonLogoIdP=pf-v5-c-login__main-footer-links-item
 kcFormSocialAccountListClass=pf-v5-c-login__main-footer-links
 kcFormSocialAccountListItemClass=pf-v5-c-login__main-footer-links-item
@@ -28,5 +36,13 @@ kcFormCardClass=card-pf
 
 kcResetFlowIcon=pf-icon fas fa-share-square
 
-kcSelectAuthListItemClass= pf-v5-c-data-list__item pf-m-clickable select-auth-box-parent
+kcSelectAuthListClass=pf-v5-c-data-list select-auth-container
+kcSelectAuthListItemWrapperClass=pf-v5-c-data-list__item pf-m-clickable
+kcSelectAuthListItemClass=pf-v5-c-data-list__item-row select-auth-box-parent
 kcSelectAuthListItemHeadingClass=pf-v5-u-font-family-heading select-auth-box-headline
+kcSelectAuthListItemBodyClass=pf-v5-c-data-list__cell pf-m-no-fill
+kcSelectAuthListItemIconClass=pf-v5-c-data-list__cell pf-m-icon select-auth-box-icon
+kcSelectAuthListItemFillClass=pf-v5-c-data-list__item-action
+kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill select-auth-box-desc
+
+kcRecoveryCodesWarning=pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md kc-recovery-codes-warning