Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: fixes mutifactor auth UI #3772

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

chore: fixes mutifactor auth UI #3772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions services/keycloak/themes/lagoon/account/resources/public/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,8 @@

.pf-c-page{
background-color: #4578E6;
}

.pf-c-page__header{
background: linear-gradient(to right, rgba(36, 174, 196, 1) 0%, rgba(42, 109, 254, 1) 25%);
}
18 changes: 9 additions & 9 deletions services/keycloak/themes/lagoon/email/html/template.ftl
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 12 additions & 26 deletions services/keycloak/themes/lagoon/login/login-config-totp.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<#import "template.ftl" as layout>

<@layout.registrationLayout displayRequiredFields=false displayMessage=!messagesPerField.existsError('totp','userLabel'); section>


<#if section = "form">
<h1>${msg("loginTotpTitle")}</h1>
<#if section = "header">
${msg("loginTotpTitle")}
<#elseif section = "form">
<ol id="kc-totp-settings">
<li>
<p>${msg("loginTotpStep1")}</p>

<ul id="kc-totp-supported-apps">
<#list totp.policy.supportedApplications as app>
<#list totp.supportedApplications as app>
<li>${msg(app)}</li>
</#list>
</ul>
Expand Down Expand Up @@ -73,7 +72,7 @@

<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcInputWrapperClass!}">
<label for="userLabel" class="control-label">${msg("loginTotpDeviceName")}</label> <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if>
<label for="userLabel" class="control-label">${msg("loginTotpDeviceName")} <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if></label>
</div>

<div class="${properties.kcInputWrapperClass!}">
Expand All @@ -89,34 +88,21 @@
</div>
</div>

<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
<div class="${properties.kcFormOptionsWrapperClass!}">
<div class="checkbox">
<label>
<input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked>
${msg("logoutOtherSessions")}
</label>
</div>
</div>
</div>
</div>

<#if isAppInitiatedAction??>
<input type="submit"
class="saveTOTPBtn ${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
id="saveTOTPBtn" value="${msg("doSubmit")}" />
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
id="saveTOTPBtn" value="${msg("doSubmit")}"
/>
<button type="submit"
class="cancelTOTPBtn ${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
id="cancelTOTPBtn" name="cancel-aia" value="true"/>${msg("doCancel")}

class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
id="cancelTOTPBtn" name="cancel-aia" value="true" />${msg("doCancel")}
</button>
<#else>
<input type="submit"
class="saveTOTPBtn ${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
id="saveTOTPBtn" value="${msg("doSubmit")}"
/>
</#if>
</form>
</#if>
</@layout.registrationLayout>
</@layout.registrationLayout>
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-idp-link-confirm.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout; section>

<#if section = "form">
<h1>${msg("confirmLinkIdpTitle")}</h1>
<#if section = "header">
${msg("confirmLinkIdpTitle")}
<#elseif section = "form">
<form id="kc-register-form" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="submitAction" id="updateProfile" value="updateProfile">${msg("confirmLinkIdpReviewProfile")}</button>
Expand Down
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-oauth2-device-verify-user-code.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout; section>

<#if section = "form">
<h1>${msg("oauth2DeviceVerificationTitle")}</h1>
<#if section = "header">
${msg("oauth2DeviceVerificationTitle")}
<#elseif section = "form">
<form id="kc-user-verify-device-user-code-form" class="${properties.kcFormClass!}" action="${url.oauth2DeviceVerificationAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
Expand Down
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-otp.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('totp'); section>

<#if section = "form">
<h1>${msg("doLogIn")}</h1>
<#if section="header">
${msg("doLogIn")}
<#elseif section="form">
<form id="kc-otp-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
method="post">
<#if otpLogin.userOtpCredentials?size gt 1>
Expand Down
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-password.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password'); section>

<#if section = "form">
<h1>${msg("doLogIn")}</h1>
<#if section = "header">
${msg("doLogIn")}
<#elseif section = "form">
<div id="kc-form">
<div id="kc-form-wrapper">
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}"
Expand Down
24 changes: 7 additions & 17 deletions services/keycloak/themes/lagoon/login/login-recovery-authn-code-config.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<#import "template.ftl" as layout>
<#import "password-commons.ftl" as passwordCommons>
<@layout.registrationLayout; section>

<#if section = "form">
<h1>${msg("recovery-code-config-header")}</h1>
<#if section = "header">
${msg("recovery-code-config-header")}
<#elseif section = "form">
<!-- warning -->
<div class="pf-c-alert pf-m-warning pf-m-inline ${properties.kcRecoveryCodesWarning}" aria-label="Warning alert">
<div class="pf-c-alert__icon">
Expand Down Expand Up @@ -38,27 +38,17 @@
</div>

<!-- confirmation checkbox -->
<div class="${properties.kcFormOptionsClass!}">
<input class="${properties.kcCheckInputClass}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
<div class="${properties.kcCheckClass} ${properties.kcRecoveryCodesConfirmation}">
<input class="${properties.kcCheckInputClass}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
onchange="document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !this.checked;"
/>
<label for="kcRecoveryCodesConfirmationCheck">${msg("recovery-codes-confirmation-message")}</label>
<label class="${properties.kcCheckLabelClass}" for="kcRecoveryCodesConfirmationCheck">${msg("recovery-codes-confirmation-message")}</label>
</div>

<form action="${url.loginAction}" class="${properties.kcFormGroupClass!}" id="kc-recovery-codes-settings-form" method="post">
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-recovery-codes-settings-form" method="post">
<input type="hidden" name="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
<input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
<input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
<div class="${properties.kcFormOptionsWrapperClass!}">
<div class="checkbox">
<label>
<input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked>
${msg("logoutOtherSessions")}
</label>
</div>
</div>
</div>

<#if isAppInitiatedAction??>
<input type="submit"
Expand Down
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-recovery-authn-code-input.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('recoveryCodeInput'); section>


<#if section = "form">
<h1>${msg("auth-recovery-code-header")}</h1>
<#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">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
Expand Down
33 changes: 0 additions & 33 deletions services/keycloak/themes/lagoon/login/login-reset-otp.ftl
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-reset-password.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=true displayMessage=!messagesPerField.existsError('username'); section>

<#if section = "form">
<h1>${msg("emailForgotTitle")}</h1>
<#if section = "header">
${msg("emailForgotTitle")}
<#elseif section = "form">
<form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
Expand Down
20 changes: 9 additions & 11 deletions services/keycloak/themes/lagoon/login/login-update-password.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<#import "template.ftl" as layout>

<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password','password-confirm'); section>

<#if section = "form">
<h1>${msg("updatePasswordTitle")}</h1>
<#if section = "header">
${msg("updatePasswordTitle")}
<#elseif section = "form">
<form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<input type="text" id="username" name="username" value="${username}" autocomplete="username"
readonly="readonly" style="display:none;"/>
Expand Down Expand Up @@ -50,12 +49,11 @@
<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
<div class="${properties.kcFormOptionsWrapperClass!}">
<div class="checkbox">
<label>
<input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked>
${msg("logoutOtherSessions")}
</label>
</div>
<#if isAppInitiatedAction??>
<div class="checkbox">
<label><input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked> ${msg("logoutOtherSessions")}</label>
</div>
</#if>
</div>
</div>

Expand All @@ -70,4 +68,4 @@
</div>
</form>
</#if>
</@layout.registrationLayout>
</@layout.registrationLayout>
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-update-profile.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','email','firstName','lastName'); section>

<#if section = "form">
<h1>${msg("loginProfileTitle")}</h1>
<#if section = "header">
${msg("loginProfileTitle")}
<#elseif section = "form">
<form id="kc-update-profile-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<#if user.editUsernameAllowed>
<div class="${properties.kcFormGroupClass!}">
Expand Down
6 changes: 3 additions & 3 deletions services/keycloak/themes/lagoon/login/login-username.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username') displayInfo=(realm.password && realm.registrationAllowed && !registrationDisabled??); section>

<#if section = "form">
<h1>${msg("loginAccountTitle")}</h1>
<#if section = "header">
${msg("loginAccountTitle")}
<#elseif section = "form">
<div id="kc-form">
<div id="kc-form-wrapper">
<#if realm.password>
Expand Down
3 changes: 1 addition & 2 deletions services/keycloak/themes/lagoon/login/login-verify-email.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<#if section = "header">
${msg("emailVerifyTitle")}
<#elseif section = "form">
<h1>${msg("emailVerifyTitle")}</h1>
<p class="instruction">${msg("emailVerifyInstruction1",user.email)}</p>
<p class="instruction">${msg("emailVerifyInstruction1",user.email)}</p>
<#elseif section = "info">
<p class="instruction">
${msg("emailVerifyInstruction2")}
Expand Down
31 changes: 16 additions & 15 deletions services/keycloak/themes/lagoon/login/login.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>

<#if section = "form">

<h1>${msg("loginAccountTitle")}</h1>
<#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" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<#if !usernameHidden??>
Expand Down Expand Up @@ -66,7 +67,9 @@
</div>
</form>
</#if>
</div>

</div>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration-container">
Expand All @@ -84,17 +87,15 @@

<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
<#list social.providers as p>
<li>
<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>
</li>
<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>
Expand Down
Loading