added username field like suggested in issue comment (#32866)

related: #32522

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-09-18 13:03:03 +02:00 committed by GitHub
parent 2d51701265
commit 1f573eded0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 39 additions and 29 deletions

View file

@ -127,7 +127,7 @@ public abstract class LanguageComboboxAwarePage extends AbstractPage {
} }
public String getAttemptedUsername() { public String getAttemptedUsername() {
return attemptedUsernameLabel.getText(); return attemptedUsernameLabel.getAttribute("value");
} }
public void clickResetLogin() { public void clickResetLogin() {

View file

@ -2,12 +2,12 @@
<div class="${properties.kcFormGroupClass}"> <div class="${properties.kcFormGroupClass}">
<div class="${properties.kcFormGroupLabelClass}"> <div class="${properties.kcFormGroupLabelClass}">
<label for="${name}" class="pf-v5-c-form__label"> <label for="${name}" class="${properties.kcFormGroupLabelClass}">
<span class="pf-v5-c-form__label-text"> <span class="${properties.kcFormGroupLabelTextClass}">
${label} ${label}
</span> </span>
<#if required> <#if required>
<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span> <span class="${properties.kcInputRequiredClass}" aria-hidden="true">&#42;</span>
</#if> </#if>
</label> </label>
</div> </div>
@ -44,18 +44,18 @@
<#macro input name label value="" required=false autocomplete="off" fieldName=name autofocus=false> <#macro input name label value="" required=false autocomplete="off" fieldName=name autofocus=false>
<#assign error=kcSanitize(messagesPerField.get(fieldName))?no_esc> <#assign error=kcSanitize(messagesPerField.get(fieldName))?no_esc>
<@field.group name=name label=label error=error required=required> <@group name=name label=label error=error required=required>
<span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>"> <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
<input id="${name}" name="${name}" value="${value}" type="text" autocomplete="${autocomplete}" <#if autofocus>autofocus</#if> <input id="${name}" name="${name}" value="${value}" type="text" autocomplete="${autocomplete}" <#if autofocus>autofocus</#if>
aria-invalid="<#if error?has_content>true</#if>"/> aria-invalid="<#if error?has_content>true</#if>"/>
<@errorIcon error=error/> <@errorIcon error=error/>
</span> </span>
</@field.group> </@group>
</#macro> </#macro>
<#macro password name label value="" required=false forgotPassword=false fieldName=name autocomplete="off" autofocus=false> <#macro password name label value="" required=false forgotPassword=false fieldName=name autocomplete="off" autofocus=false>
<#assign error=kcSanitize(messagesPerField.get(fieldName))?no_esc> <#assign error=kcSanitize(messagesPerField.get(fieldName))?no_esc>
<@field.group name=name label=label error=error required=required> <@group name=name label=label error=error required=required>
<div class="${properties.kcInputGroup}"> <div class="${properties.kcInputGroup}">
<div class="${properties.kcInputGroupItemClass} ${properties.kcFill}"> <div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
<span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>"> <span class="${properties.kcInputClass} <#if error?has_content>${properties.kcError}</#if>">
@ -65,7 +65,7 @@
</span> </span>
</div> </div>
<div class="${properties.kcInputGroupItemClass}"> <div class="${properties.kcInputGroupItemClass}">
<button class="pf-v5-c-button pf-m-control" type="button" aria-label="${msg('showPassword')}" <button class="${properties.kcFormPasswordVisibilityButtonClass}" type="button" aria-label="${msg('showPassword')}"
aria-controls="${name}" data-password-toggle aria-controls="${name}" data-password-toggle
data-icon-show="fa-eye fas" data-icon-hide="fa-eye-slash fas" data-icon-show="fa-eye fas" data-icon-hide="fa-eye-slash fas"
data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}"> data-label-show="${msg('showPassword')}" data-label-hide="${msg('hidePassword')}">
@ -84,7 +84,7 @@
</div> </div>
</div> </div>
</#if> </#if>
</@field.group> </@group>
</#macro> </#macro>
<#macro checkbox name label value=false required=false> <#macro checkbox name label value=false required=false>

View file

@ -1,3 +1,25 @@
<#import "field.ftl" as field>
<#macro username>
<#assign label>
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
</#assign>
<@field.group name="username" label=label>
<div class="${properties.kcInputGroup}">
<div class="${properties.kcInputGroupItemClass} ${properties.kcFill}">
<span class="${properties.kcInputClass} ${properties.kcFormReadOnlyClass}">
<input id="kc-attempted-username" value="${auth.attemptedUsername}" readonly>
</span>
</div>
<div class="${properties.kcInputGroupItemClass}">
<button id="reset-login" class="${properties.kcFormPasswordVisibilityButtonClass} kc-login-tooltip" type="button"
aria-label="${msg('restartLoginTooltip')}" onclick="location.href='${url.loginRestartFlowUrl}'">
<i class="fa-sync-alt fas" aria-hidden="true"></i>
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
</button>
</div>
</@field.group>
</#macro>
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false> <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html> <!DOCTYPE html>
<html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}"</#if>> <html class="${properties.kcHtmlClass!}"<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}"</#if>>
@ -135,30 +157,15 @@
<span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")} <span class="${properties.kcInputRequiredClass!}">*</span> ${msg("requiredFields")}
</span> </span>
</div> </div>
<div class="col-md-10"> <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
<#nested "show-username"> <#nested "show-username">
<div id="kc-username" class="${properties.kcFormGroupClass!}"> <@username />
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
<a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg('restartLoginTooltip')}">
<div class="kc-login-tooltip">
<i class="${properties.kcResetFlowIcon!}"></i>
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
</div>
</a>
</div>
</div> </div>
</div> </div>
<#else> <#else>
<#nested "show-username"> <div class="${properties.kcFormClass} ${properties.kcContentWrapperClass}">
<div id="kc-username" class="${properties.kcFormGroupClass!}"> <#nested "show-username">
<label id="kc-attempted-username">${auth.attemptedUsername}</label> <@username />
<a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg('restartLoginTooltip')}">
<div class="kc-login-tooltip">
<i class="${properties.kcResetFlowIcon!}"></i>
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
</div>
</a>
<hr />
</div> </div>
</#if> </#if>
</#if> </#if>

View file

@ -36,6 +36,9 @@ 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 kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
kcFormActionGroupClass=pf-v5-c-form__actions kcFormActionGroupClass=pf-v5-c-form__actions
kcFormReadOnlyClass=pf-m-readonly
kcFormGroupLabelClass=pf-v5-c-form__label
kcFormGroupLabelTextClass=pf-v5-c-form__label-text
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