removed hardcoded classes
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
e410a83c3c
commit
40e44157a2
4 changed files with 32 additions and 30 deletions
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
@ -58,4 +62,11 @@ kcSelectAuthListItemIconClass=pf-v5-c-data-list__cell pf-m-icon select-auth-box-
|
||||||
kcSelectAuthListItemFillClass=pf-v5-c-data-list__item-action
|
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
|
Loading…
Reference in a new issue