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="">
<#if error?has_content>
<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 class="${properties.kcFormControlUtilClass}">
<span class="${properties.kcInputErrorIconStatusClass}">
<i class="${properties.kcInputErrorIconClass}" aria-hidden="true"></i>
</span>
</span>
</#if>

View file

@ -1,4 +1,5 @@
<#import "template.ftl" as layout>
<#import "field.ftl" as field>
<#import "password-commons.ftl" as passwordCommons>
<@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>
@ -63,13 +64,7 @@
dir="ltr"
/>
<#if messagesPerField.existsError('totp')>
<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>
<@field.errorIcon error=kcSanitize(messagesPerField.get('totp'))?no_esc/>
</div>
<#if messagesPerField.existsError('totp')>
<span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
@ -92,13 +87,7 @@
dir="ltr"
/>
<#if messagesPerField.existsError('userLabel')>
<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>
<@field.errorIcon error=kcSanitize(messagesPerField.get('userLabel'))?no_esc/>
</div>
<#if messagesPerField.existsError('userLabel')>
<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!}">
<div class="pf-v5-c-login">
<div class="pf-v5-c-login__container">
<div class="${properties.kcLogin!}">
<div class="${properties.kcLoginContainer!}">
<header id="kc-header" class="pf-v5-c-login__header">
<div id="kc-header-wrapper"
class="pf-v5-c-brand">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
</header>
<main class="pf-v5-c-login__main">
<div class="pf-v5-c-login__main-header">
<h1 class="pf-v5-c-title pf-m-3xl" id="kc-page-title"><#nested "header"></h1>
<main class="${properties.kcLoginMain!}">
<div class="${properties.kcLoginMainHeader!}">
<h1 class="${properties.kcLoginMainTitle!}" id="kc-page-title"><#nested "header"></h1>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="pf-v5-c-login__main-header-utilities">
<div class="pf-v5-c-form-control">
<div class="${properties.kcLoginMainHeaderUtilities!}">
<div class="${properties.kcInputClass!}">
<select
aria-label="${msg("languages")}"
id="login-select-toggle"
@ -78,8 +78,8 @@
</option>
</#list>
</select>
<span class="pf-v5-c-form-control__utilities">
<span class="pf-v5-c-form-control__toggle-icon">
<span class="${properties.kcFormControlUtilClass}">
<span class="${properties.kcFormControlToggleIcon!}">
<svg
class="pf-v5-svg"
viewBox="0 0 320 512"
@ -100,12 +100,14 @@
</div>
</#if>
</div>
<div class="pf-v5-c-login__main-body">
<div class="${properties.kcLoginMainBody!}">
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
<#if displayRequiredFields>
<div class="${properties.kcContentWrapperClass!}">
<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>
</#if>
@ -146,7 +148,7 @@
<#-- during login. -->
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<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 = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></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
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
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
kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
kcPanelClass=pf-v5-c-panel pf-m-raised
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
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