added properties for classes

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-08-15 11:55:56 +02:00 committed by Stan Silvert
parent 505a1e8c92
commit 3ddc3fd4de
3 changed files with 52 additions and 33 deletions

View file

@ -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="pf-v5-c-alert__icon">
<div class="${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
<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="pf-v5-c-panel__main">
<div class="pf-v5-c-panel__main-body">
<ol id="kc-recovery-codes-list" class="pf-v5-c-list" role="list">
<div class="${properties.kcPanelClass!}">
<div class="${properties.kcPanelMainClass!}">
<div class="${properties.kcPanelMainBodyClass!}">
<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>

View file

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

View file

@ -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