removed hardcoded classes

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-08-15 10:34:41 +02:00 committed by Stan Silvert
parent e410a83c3c
commit 40e44157a2
4 changed files with 32 additions and 30 deletions

View file

@ -33,9 +33,9 @@
<#macro errorIcon error=""> <#macro errorIcon error="">
<#if error?has_content> <#if error?has_content>
<span class="pf-v5-c-form-control__utilities"> <span class="${properties.kcFormControlUtilClass}">
<span class="pf-v5-c-form-control__icon pf-m-status"> <span class="${properties.kcInputErrorIconStatusClass}">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i> <i class="${properties.kcInputErrorIconClass}" aria-hidden="true"></i>
</span> </span>
</span> </span>
</#if> </#if>

View file

@ -1,4 +1,5 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<#import "field.ftl" as field>
<#import "password-commons.ftl" as passwordCommons> <#import "password-commons.ftl" as passwordCommons>
<@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section> <@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>
@ -63,13 +64,7 @@
dir="ltr" dir="ltr"
/> />
<#if messagesPerField.existsError('totp')> <@field.errorIcon error=kcSanitize(messagesPerField.get('totp'))?no_esc/>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__icon pf-m-status">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</span>
</span>
</#if>
</div> </div>
<#if messagesPerField.existsError('totp')> <#if messagesPerField.existsError('totp')>
<span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}" aria-live="polite"> <span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
@ -92,13 +87,7 @@
dir="ltr" dir="ltr"
/> />
<#if messagesPerField.existsError('userLabel')> <@field.errorIcon error=kcSanitize(messagesPerField.get('userLabel'))?no_esc/>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__icon pf-m-status">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</span>
</span>
</#if>
</div> </div>
<#if messagesPerField.existsError('userLabel')> <#if messagesPerField.existsError('userLabel')>
<span id="input-error-otp-label" class="${properties.kcInputErrorMessageClass!}" aria-live="polite"> <span id="input-error-otp-label" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">

View file

@ -52,18 +52,18 @@
<body id="keycloak-bg" class="${properties.kcBodyClass!}"> <body id="keycloak-bg" class="${properties.kcBodyClass!}">
<div class="pf-v5-c-login"> <div class="${properties.kcLogin!}">
<div class="pf-v5-c-login__container"> <div class="${properties.kcLoginContainer!}">
<header id="kc-header" class="pf-v5-c-login__header"> <header id="kc-header" class="pf-v5-c-login__header">
<div id="kc-header-wrapper" <div id="kc-header-wrapper"
class="pf-v5-c-brand">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div> class="pf-v5-c-brand">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
</header> </header>
<main class="pf-v5-c-login__main"> <main class="${properties.kcLoginMain!}">
<div class="pf-v5-c-login__main-header"> <div class="${properties.kcLoginMainHeader!}">
<h1 class="pf-v5-c-title pf-m-3xl" id="kc-page-title"><#nested "header"></h1> <h1 class="${properties.kcLoginMainTitle!}" id="kc-page-title"><#nested "header"></h1>
<#if realm.internationalizationEnabled && locale.supported?size gt 1> <#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="pf-v5-c-login__main-header-utilities"> <div class="${properties.kcLoginMainHeaderUtilities!}">
<div class="pf-v5-c-form-control"> <div class="${properties.kcInputClass!}">
<select <select
aria-label="${msg("languages")}" aria-label="${msg("languages")}"
id="login-select-toggle" id="login-select-toggle"
@ -78,8 +78,8 @@
</option> </option>
</#list> </#list>
</select> </select>
<span class="pf-v5-c-form-control__utilities"> <span class="${properties.kcFormControlUtilClass}">
<span class="pf-v5-c-form-control__toggle-icon"> <span class="${properties.kcFormControlToggleIcon!}">
<svg <svg
class="pf-v5-svg" class="pf-v5-svg"
viewBox="0 0 320 512" viewBox="0 0 320 512"
@ -100,12 +100,14 @@
</div> </div>
</#if> </#if>
</div> </div>
<div class="pf-v5-c-login__main-body"> <div class="${properties.kcLoginMainBody!}">
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())> <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
<#if displayRequiredFields> <#if displayRequiredFields>
<div class="${properties.kcContentWrapperClass!}"> <div class="${properties.kcContentWrapperClass!}">
<div class="${properties.kcLabelWrapperClass!} subtitle"> <div class="${properties.kcLabelWrapperClass!} subtitle">
<span class="pf-v5-c-helper-text__item-text"><span class="pf-v5-c-form__label-required">*</span> ${msg("requiredFields")}</span> <span class="${properties.kcInputHelperTextItemTextClass!}">
<span class="${properties.kcInputErrorMessageClass!}">*</span> ${msg("requiredFields")}
</span>
</div> </div>
</div> </div>
</#if> </#if>
@ -146,7 +148,7 @@
<#-- during login. --> <#-- during login. -->
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)> <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<div class="${properties.kcAlertClass!} pf-m-${(message.type = 'error')?then('danger', message.type)}"> <div class="${properties.kcAlertClass!} pf-m-${(message.type = 'error')?then('danger', message.type)}">
<div class="pf-v5-c-alert__icon"> <div class="${properties.kcAlertIconClass!}">
<#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if> <#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
<#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if> <#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if> <#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>

View file

@ -23,11 +23,15 @@ kcCheckboxLabelClass=pf-v5-c-check__label
kcCheckboxLabelRequiredClass=pf-v5-c-check__label-required kcCheckboxLabelRequiredClass=pf-v5-c-check__label-required
kcInputErrorMessageClass=pf-v5-c-helper-text__item pf-m-error pf-v5-c-form__label-required kc-feedback-text kcInputErrorMessageClass=pf-v5-c-helper-text__item pf-m-error pf-v5-c-form__label-required kc-feedback-text
kcFormControlUtilClass=pf-v5-c-form-control__utilities
kcInputErrorIconStatusClass=pf-v5-c-form-control__icon pf-m-status
kcInputErrorIconClass=fas fa-exclamation-circle
kcAlertClass=pf-v5-c-alert pf-m-inline kcAlertClass=pf-v5-c-alert pf-m-inline
kcAlertIconClass=pf-v5-c-alert__icon kcAlertIconClass=pf-v5-c-alert__icon
kcAlertTitleClass=pf-v5-c-alert__title kcAlertTitleClass=pf-v5-c-alert__title
kcAlertDescriptionClass=pf-v5-c-alert__description kcAlertDescriptionClass=pf-v5-c-alert__description
kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
kcPanelClass=pf-v5-c-panel pf-m-raised kcPanelClass=pf-v5-c-panel pf-m-raised
kcPanelMainClass=pf-v5-c-panel__main kcPanelMainClass=pf-v5-c-panel__main
@ -59,3 +63,10 @@ kcSelectAuthListItemFillClass=pf-v5-c-data-list__item-action
kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill select-auth-box-desc 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 kcRecoveryCodesWarning=pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md kc-recovery-codes-warning
kcLogin=pf-v5-c-login
kcLoginContent=pf-v5-c-login__container
kcLoginMain=pf-v5-c-login__main
kcLoginMainHeader=pf-v5-c-login__main-header
kcLoginMainTitle=pf-v5-c-title pf-m-3xl
kcLoginMainHeaderUtilities=pf-v5-c-login__main-header-utilities
kcLoginMainBody=pf-v5-c-login__main-body