chore: fixes mutifactor auth UI

uselagoon · Jul 16, 2024 · b53cdf2 · b53cdf2
1 parent 74d4ecd
commit b53cdf2
Show file tree

Hide file tree

Showing 31 changed files with 2,006 additions and 482 deletions.
diff --git a/services/keycloak/themes/lagoon/account/resources/public/layout.css b/services/keycloak/themes/lagoon/account/resources/public/layout.css
@@ -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%);
 }
diff --git a/services/keycloak/themes/lagoon/email/html/template.ftl b/services/keycloak/themes/lagoon/email/html/template.ftl
diff --git a/services/keycloak/themes/lagoon/login/login-config-totp.ftl b/services/keycloak/themes/lagoon/login/login-config-totp.ftl
@@ -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>
@@ -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!}">
@@ -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>
diff --git a/services/keycloak/themes/lagoon/login/login-idp-link-confirm.ftl b/services/keycloak/themes/lagoon/login/login-idp-link-confirm.ftl
@@ -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>

diff --git a/services/keycloak/themes/lagoon/login/login-oauth2-device-verify-user-code.ftl b/services/keycloak/themes/lagoon/login/login-oauth2-device-verify-user-code.ftl
@@ -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!}">

diff --git a/services/keycloak/themes/lagoon/login/login-otp.ftl b/services/keycloak/themes/lagoon/login/login-otp.ftl
@@ -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>

diff --git a/services/keycloak/themes/lagoon/login/login-password.ftl b/services/keycloak/themes/lagoon/login/login-password.ftl
@@ -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}"

diff --git a/services/keycloak/themes/lagoon/login/login-recovery-authn-code-config.ftl b/services/keycloak/themes/lagoon/login/login-recovery-authn-code-config.ftl
@@ -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">
@@ -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"

diff --git a/services/keycloak/themes/lagoon/login/login-recovery-authn-code-input.ftl b/services/keycloak/themes/lagoon/login/login-recovery-authn-code-input.ftl
@@ -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!}">

diff --git a/services/keycloak/themes/lagoon/login/login-reset-otp.ftl b/services/keycloak/themes/lagoon/login/login-reset-otp.ftl
diff --git a/services/keycloak/themes/lagoon/login/login-reset-password.ftl b/services/keycloak/themes/lagoon/login/login-reset-password.ftl
@@ -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!}">

diff --git a/services/keycloak/themes/lagoon/login/login-update-password.ftl b/services/keycloak/themes/lagoon/login/login-update-password.ftl
@@ -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;"/>
@@ -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>
 
@@ -70,4 +68,4 @@
             </div>
         </form>
     </#if>
-</@layout.registrationLayout>
+</@layout.registrationLayout>
diff --git a/services/keycloak/themes/lagoon/login/login-update-profile.ftl b/services/keycloak/themes/lagoon/login/login-update-profile.ftl
@@ -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!}">

diff --git a/services/keycloak/themes/lagoon/login/login-username.ftl b/services/keycloak/themes/lagoon/login/login-username.ftl
@@ -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>

diff --git a/services/keycloak/themes/lagoon/login/login-verify-email.ftl b/services/keycloak/themes/lagoon/login/login-verify-email.ftl
@@ -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")}

diff --git a/services/keycloak/themes/lagoon/login/login.ftl b/services/keycloak/themes/lagoon/login/login.ftl
@@ -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??>
@@ -66,7 +67,9 @@
                   </div>
             </form>
         </#if>
+        </div>
 
+    </div>
     <#elseif section = "info" >
         <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
             <div id="kc-registration-container">
@@ -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>