some more ui fixes (#32661)

towards: #32522

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-09-04 18:30:34 +02:00 committed by GitHub
parent a14548a7a2
commit 927a02ec5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 76 additions and 13 deletions

View file

@ -5,12 +5,12 @@
</div>
</#macro>
<#macro button id name label class="kcButtonPrimaryClass">
<button class="${properties[class]}" name="${name}" id="${id}" type="submit">${msg(label)}</button>
<#macro button id name label class=["kcButtonPrimaryClass"]>
<button class="<#list class as c>${properties[c]} </#list>" name="${name}" id="${id}" type="submit">${msg(label)}</button>
</#macro>
<#macro loginButton>
<@buttons.actionGroup>
<@buttons.button id="kc-login" name="login" label="doLogIn"/>
<@buttons.button id="kc-login" name="login" label="doLogIn" class=["kcButtonPrimaryClass", "kcButtonBlockClass"] />
</@buttons.actionGroup>
</#macro>

View file

@ -2,6 +2,7 @@
<#import "field.ftl" as field>
<#import "password-commons.ftl" as passwordCommons>
<@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>
<!-- template: login-config-totp.ftl -->
<#if section = "header">
${msg("loginTotpTitle")}

View file

@ -0,0 +1,31 @@
<#import "template.ftl" as layout>
<#import "field.ftl" as field>
<#import "buttons.ftl" as buttons>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password'); section>
<!-- template: login-password.ftl -->
<#if section = "header">
${msg("doLogIn")}
<#elseif section = "form">
<div id="kc-form">
<div id="kc-form-wrapper">
<form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<@field.password name="password" label=msg("password")/>
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
<div id="kc-form-options">
<div class="${properties.kcFormOptionsWrapperClass!}">
<#if realm.resetPasswordAllowed>
<span><a tabindex="5"
href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
</#if>
</div>
</div>
</div>
<@buttons.loginButton />
</form>
</div>
</div>
</#if>
</@layout.registrationLayout>

View file

@ -1,7 +1,7 @@
<#import "template.ftl" as layout>
<#import "password-commons.ftl" as passwordCommons>
<@layout.registrationLayout; section>
<!-- template: login-recovery-authn-code-config.ftl -->
<#if section = "header">
${msg("recovery-code-config-header")}
<#elseif section = "form">
@ -81,7 +81,8 @@
/* copy recovery codes */
function copyRecoveryCodes() {
const tmpTextarea = document.createElement("textarea");
document.body.appendChild(parseRecoveryCodeList());
tmpTextarea.innerHTML = parseRecoveryCodeList();
document.body.appendChild(tmpTextarea);
tmpTextarea.select();
document.execCommand("copy");
document.body.removeChild(tmpTextarea);
@ -104,7 +105,7 @@
function parseRecoveryCodeList() {
const recoveryCodes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
const recoveryCodeList = "";
let recoveryCodeList = "";
for (let i = 0; i < recoveryCodes.length; i++) {
const recoveryCodeLiElement = recoveryCodes[i].innerText;

View file

@ -0,0 +1,15 @@
<#import "template.ftl" as layout>
<#import "field.ftl" as field>
<#import "buttons.ftl" as buttons>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('recoveryCodeInput'); section>
<!-- template: login-recovery-authn-code-input.ftl -->
<#if section = "header">
${msg("auth-recovery-code-header")}
<#elseif section = "form">
<form id="kc-recovery-code-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<@field.input name="recoveryCodeInput" label=msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c) />
<@buttons.loginButton />
</form>
</#if>
</@layout.registrationLayout>

View file

@ -75,6 +75,5 @@
</div>
</div>
</form>
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
</#if>
</@layout.registrationLayout>

View file

@ -2,6 +2,8 @@
<#import "field.ftl" as field>
<#import "buttons.ftl" as buttons>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>
<!-- template: login-username.ftl -->
<#if section = "header">
${msg("loginAccountTitle")}
<#elseif section = "form">

View file

@ -2,6 +2,8 @@
<#import "field.ftl" as field>
<#import "buttons.ftl" as buttons>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
<!-- template: login.ftl -->
<#if section = "header">
${msg("loginAccountTitle")}
<#elseif section = "form">
@ -30,7 +32,6 @@
</#if>
</div>
</div>
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container" class="${properties.kcLoginFooterBand!}">

View file

@ -3,6 +3,8 @@
<#import "user-profile-commons.ftl" as userProfileCommons>
<#import "register-commons.ftl" as registerCommons>
<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
<!-- template: register.ftl -->
<#if section = "header">
<#if messageHeader??>
${kcSanitize(msg("${messageHeader}"))?no_esc}
@ -44,6 +46,5 @@
</div>
</form>
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
</#if>
</@layout.registrationLayout>

View file

@ -79,4 +79,9 @@ div.kc-logo-text span {
white-space: normal;
color: var(--pf-v5-global--Color--light-100) !important;
text-align: center;
}
hr {
margin-top: var(--pf-v5-global--spacer--sm);
margin-bottom: var(--pf-v5-global--spacer--md);
}

View file

@ -1,5 +1,7 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=false; section>
<!-- template: select-authenticator.ftl -->
<#if section = "header" || section = "show-username">
<#if section = "header">
${msg("loginChooseAuthenticator")}

View file

@ -41,6 +41,7 @@
<script src="${script}" type="text/javascript"></script>
</#list>
</#if>
<script type="module" src="${url.resourcesPath}/js/passwordVisibility.js"></script>
<script type="module">
import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
@ -142,6 +143,7 @@
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
</div>
</a>
<hr />
</div>
</#if>
</#if>

View file

@ -25,11 +25,11 @@ kcCheckboxLabelClass=pf-v5-c-check__label
kcCheckboxLabelRequiredClass=pf-v5-c-check__label-required
kcInputRequiredClass=pf-v5-c-form__label-required
kcInputErrorMessageClass=pf-v5-c-helper-text__item pf-m-error kc-feedback-text
kcInputErrorMessageClass=pf-v5-c-helper-text__item-text pf-m-error 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 pf-v5-u-mb-md
kcAlertIconClass=pf-v5-c-alert__icon
kcAlertTitleClass=pf-v5-c-alert__title
kcAlertDescriptionClass=pf-v5-c-alert__description
@ -43,7 +43,8 @@ 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
kcButtonPrimaryClass=pf-v5-c-button pf-m-primary
kcButtonBlockClass=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
@ -69,7 +70,7 @@ kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill select
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
kcLoginContainer=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

View file

@ -1,5 +1,7 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=(realm.registrationAllowed && !registrationDisabled??); section>
<!-- template: webauthn-autthenticate.ftl -->
<#if section = "title">
title
<#elseif section = "header">