styling for username form added class to form tag (#32511)
fixes: #32510 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit
GitHub
parent
838e13e161
commit
0242eb9cda
4 changed files with 90 additions and 4 deletions
|
|
@ -0,0 +1,16 @@
|
|||
<#macro actionGroup>
|
||||
<div class="${properties.kcFormGroupClass}">
|
||||
<div class="${properties.kcFormActionGroupClass}">
|
||||
<#nested>
|
||||
</div>
|
||||
</#macro>
|
||||
|
||||
<#macro button id name label class="kcButtonPrimaryClass">
|
||||
<button class="${properties[class]}" name="${name}" id="${id}" type="submit">${msg(label)}</button>
|
||||
</#macro>
|
||||
|
||||
<#macro loginButton>
|
||||
<@buttons.actionGroup>
|
||||
<@buttons.button id="kc-login" name="login" label="doLogIn"/>
|
||||
</@buttons.actionGroup>
|
||||
</#macro>
|
||||
69
themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
Executable file
69
themes/src/main/resources/theme/keycloak.v2/login/login-username.ftl
Executable file
|
|
@ -0,0 +1,69 @@
|
|||
<#import "template.ftl" as layout>
|
||||
<#import "field.ftl" as field>
|
||||
<#import "buttons.ftl" as buttons>
|
||||
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
|
||||
<#if section = "header">
|
||||
${msg("loginAccountTitle")}
|
||||
<#elseif section = "form">
|
||||
<div id="kc-form">
|
||||
<div id="kc-form-wrapper">
|
||||
<#if realm.password>
|
||||
<form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"
|
||||
method="post">
|
||||
<#if !usernameHidden??>
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<#assign label>
|
||||
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
|
||||
</#assign>
|
||||
<@field.input name="username" label=label value="${(login.username!'')}" />
|
||||
|
||||
<#if messagesPerField.existsError('username')>
|
||||
<span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
|
||||
${kcSanitize(messagesPerField.get('username'))?no_esc}
|
||||
</span>
|
||||
</#if>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<#if realm.rememberMe && !usernameHidden??>
|
||||
<@field.checkbox name="rememberMe" label=msg("rememberMe") value=login.rememberMe?? />
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
<@buttons.loginButton />
|
||||
</form>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<#elseif section = "info" >
|
||||
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
|
||||
<div id="kc-registration">
|
||||
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
|
||||
</div>
|
||||
</#if>
|
||||
<#elseif section = "socialProviders" >
|
||||
<#if realm.password && social?? && social.providers?has_content>
|
||||
<div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
|
||||
<hr/>
|
||||
<h4>${msg("identity-provider-login-label")}</h4>
|
||||
|
||||
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
|
||||
<#list social.providers as p>
|
||||
<a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>"
|
||||
type="button" href="${p.loginUrl}">
|
||||
<#if p.iconClasses?has_content>
|
||||
<i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
|
||||
<span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
|
||||
<#else>
|
||||
<span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
|
||||
</#if>
|
||||
</a>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</#if>
|
||||
</#if>
|
||||
|
||||
</@layout.registrationLayout>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<#import "template.ftl" as layout>
|
||||
<#import "field.ftl" as field>
|
||||
<#import "buttons.ftl" as buttons>
|
||||
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
|
||||
<#if section = "header">
|
||||
${msg("loginAccountTitle")}
|
||||
|
|
@ -23,10 +24,8 @@
|
|||
</#if>
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
|
||||
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
|
||||
<input tabindex="4" class="pf-v5-c-button pf-m-primary pf-m-block" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
|
||||
</div>
|
||||
<@buttons.loginButton />
|
||||
</form>
|
||||
</#if>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ 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
|
||||
kcFormActionGroupClass=pf-v5-c-form__actions
|
||||
|
||||
kcPanelClass=pf-v5-c-panel pf-m-raised
|
||||
kcPanelMainClass=pf-v5-c-panel__main
|
||||
|
|
@ -41,6 +42,7 @@ kcPanelMainBodyClass=pf-v5-c-panel__main-body
|
|||
kcListClass=pf-v5-c-list
|
||||
|
||||
kcButtonClass=pf-v5-c-button
|
||||
kcButtonPrimaryClass=pf-v5-c-button pf-m-primary pf-m-block
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue