Updates patternfly libs and fixes breaking changes (keycloak#10748)

adding nvmrc CIAM-1048 Device Activity screen PF updates CIAM-1046: Personal Info sub-header update Updates SigningInPage to use EmptyState component when there are no credentials. rearanged some components used in signing in page Displays ApplicationPage content in description list. Updates refresh link on ContentPage, updates Resources screen. CIAM-1049 Linked Accounts screen PF updates CIAM-1043-General upstream updates Updates AccountPage to display form errors. fix: display Set up Authenticator Application link on large viewport fix(page structure): rearranges page sections CIAM-1254/Personal info PF4 updates & Sidebar text updates updating layouts updating layout on Signing in and Linked acounts adding patternfly-additions adding patternfly-addons styles Updates Application page based on designs feedback. moving page description Updates status label on Applications page to be capitalized. Updates the copy-fonts script for keycloak.v2 to copy all font directories instead of one. update Personal info screen - set max width of 600px for form input fields update Personal info - remove required indicator from input fields General updates (#2) * removed the extra lines being shown * tweaked general spacing * general alignment and spacer application * refactor to get proper alignments without css globals * forgot to add the conditional on displaying the set up buttons * try and adjust the alignments Co-authored-by: zwitter <[email protected]> resolve merge conflicts Device activity updates (#4) * update text to sentence case * update device info columns to be dynamic across various viewport sizes * update signed in device layout * update based on feedback Co-authored-by: Jon Szeto <[email protected]> Linked accounts update (#3) * linked accounts screen - updated icons & Linked/Unlinked Login Providers layout & update text to sentence case Co-authored-by: Jon Szeto <[email protected]> fixing ts errors cleaning up fonts and messages final review updates message update for Back to admin console link fixing capitalization on 2fa updating landing page welcome message fix: reposition Back to... link adjusting size for confirm modal updating spacing and alignment issues updating resources page removing unused header class fixes ts issues and updates node version to match the themes install npm updates fixing pf addons adding chokidar to get babel:watch working fixing issues from pull request feedback fixing tests fixes signingin page test fixing tests Co-authored-by: Tyler Andor <[email protected]>
atlanhq · Apr 6, 2022 · caebe50 · caebe50
1 parent a68e8ba
commit caebe50
Show file tree

Hide file tree

Showing 53 changed files with 4,915 additions and 5,245 deletions.
diff --git a/services/src/main/java/org/keycloak/credential/RecoveryAuthnCodesCredentialProvider.java b/services/src/main/java/org/keycloak/credential/RecoveryAuthnCodesCredentialProvider.java
@@ -62,11 +62,7 @@ public CredentialTypeMetadata getCredentialTypeMetadata(CredentialTypeMetadataCo
                 .helpText("recovery-authn-codes-help-text").iconCssClass("kcAuthenticatorRecoveryAuthnCodesClass")
                 .removeable(true);
         UserModel user = metadataContext.getUser();
-        if (user != null && !isConfiguredFor(session.getContext().getRealm(), user, getType())) {
-            builder.createAction(UserModel.RequiredAction.CONFIGURE_RECOVERY_AUTHN_CODES.name());
-        } else {
-            builder.updateAction(UserModel.RequiredAction.CONFIGURE_RECOVERY_AUTHN_CODES.name());
-        }
+        builder.createAction(UserModel.RequiredAction.CONFIGURE_RECOVERY_AUTHN_CODES.name());
         return builder.build(session);
     }
 

diff --git a/.../tests/base/src/main/java/org/keycloak/testsuite/auth/page/account/AccountManagement.java b/.../tests/base/src/main/java/org/keycloak/testsuite/auth/page/account/AccountManagement.java
@@ -43,7 +43,7 @@ public UriBuilder createUriBuilder() {
     @FindBy(xpath = "//a[@id='referer']")
     private WebElement backToRefererLink;
 
-    @FindBy(linkText = "Sign Out")
+    @FindBy(linkText = "Sign out")
     private WebElement signOutLink;
 
     @FindBy(linkText = "Account")

diff --git a/...arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/AbstractAccountPage.java b/...arquillian/tests/base/src/main/java/org/keycloak/testsuite/pages/AbstractAccountPage.java
@@ -26,7 +26,7 @@
  */
 public abstract class AbstractAccountPage extends AbstractPage {
 
-    @FindBy(linkText = "Sign Out")
+    @FindBy(linkText = "Sign out")
     private WebElement logoutLink;
 
     @FindBy(id = "kc-current-locale-link")

diff --git a/...llian/tests/base/src/test/java/org/keycloak/testsuite/account/AccountFormServiceTest.java b/...llian/tests/base/src/test/java/org/keycloak/testsuite/account/AccountFormServiceTest.java
@@ -1357,7 +1357,7 @@ public void testConsoleListedInApplications() {
         loginPage.login("realm-admin", "password");
         Assert.assertTrue(applicationsPage.isCurrent());
         Map<String, AccountApplicationsPage.AppEntry> apps = applicationsPage.getApplications();
-        Assert.assertThat(apps.keySet(), hasItems("Admin CLI", "Security Admin Console"));
+        Assert.assertThat(apps.keySet(), hasItems("Admin CLI", "security admin console"));
         events.clear();
     }
 

diff --git a/...her/base-ui/src/main/java/org/keycloak/testsuite/ui/account2/page/DeviceActivityPage.java b/...her/base-ui/src/main/java/org/keycloak/testsuite/ui/account2/page/DeviceActivityPage.java
@@ -139,11 +139,11 @@ public String getClients() {
         }
 
         public String getStarted() {
-            return getTextFromItem("started").split("Started at ")[1];
+            return getTextFromItem("started").split("Started ")[1];
         }
 
         public String getExpires() {
-            return getTextFromItem("expires").split("Expires at ")[1];
+            return getTextFromItem("expires").split("Expires ")[1];
         }
 
         public boolean isSignOutDisplayed() {

diff --git a/...her/base-ui/src/main/java/org/keycloak/testsuite/ui/account2/page/LinkedAccountsPage.java b/...her/base-ui/src/main/java/org/keycloak/testsuite/ui/account2/page/LinkedAccountsPage.java
@@ -104,11 +104,11 @@ else if (parentListId.equals(UNLINKED_IDPS_LIST_ID)) {
         }
 
         public boolean hasSocialLoginBadge() {
-            return getTextFromElement(badgeElement).equals("Social Login");
+            return getTextFromElement(badgeElement).equals("Social login");
         }
 
         public boolean hasSystemDefinedBadge() {
-            return getTextFromElement(badgeElement).equals("System Defined");
+            return getTextFromElement(badgeElement).equals("System defined");
         }
 
         public boolean hasSocialIcon() {

diff --git a/...sts/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account2/page/PageNotFound.java b/...sts/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account2/page/PageNotFound.java
@@ -28,6 +28,6 @@ public String getPageId() {
 
     @Override
     public boolean isCurrent() {
-        return driver.getPageSource().contains("Page Not Found");
+        return driver.getPageSource().contains("Page not found");
     }
 }
diff --git a/...n/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/SigningInTest.java b/...n/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/SigningInTest.java
@@ -50,7 +50,7 @@
  * @author Vaclav Muzikar <[email protected]>
  */
 public class SigningInTest extends BaseAccountPageTest {
-    public static final String PASSWORD_LABEL = "My Password";
+    public static final String PASSWORD_LABEL = "My password";
 
     @Page
     private SigningInPage signingInPage;
@@ -91,8 +91,8 @@ public void categoriesTest() {
         testContext.setTestRealmReps(emptyList()); // reimport realm after this test
 
         assertThat(signingInPage.getCategoriesCount(), is(2));
-        assertThat(signingInPage.getCategoryTitle("basic-authentication"), is("Basic Authentication"));
-        assertThat(signingInPage.getCategoryTitle("two-factor"), is("Two-Factor Authentication"));
+        assertThat(signingInPage.getCategoryTitle("basic-authentication"), is("Basic authentication"));
+        assertThat(signingInPage.getCategoryTitle("two-factor"), is("Two-factor authentication"));
     }
 
     @Test
@@ -160,7 +160,7 @@ public void otpTest() {
 
         signingInPage.assertCurrent();
         assertThat(otpCredentialType.isSetUp(), is(false));
-        assertThat(otpCredentialType.getTitle(), is("Authenticator Application"));
+        assertThat(otpCredentialType.getTitle(), is("authenticator application"));
 
         final String label1 = "OTP is secure";
         final String label2 = "OTP is inconvenient";

diff --git a/themes/src/main/resources/theme/base/account/messages/messages_en.properties b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
@@ -3,11 +3,16 @@ doCancel=Cancel
 doLogOutAllSessions=Log out all sessions
 doRemove=Remove
 doAdd=Add
-doSignOut=Sign Out
+doSignOut=Sign out
 doLogIn=Log In
 doLink=Link
 noAccessMessage=Access not allowed
 
+personalInfoSidebarTitle=Personal info
+accountSecuritySidebarTitle=Account security
+signingInSidebarTitle=Signing in
+deviceActivitySidebarTitle=Device activity
+linkedAccountsSidebarTitle=Linked accounts
 
 editAccountHtmlTitle=Edit Account
 personalInfoHtmlTitle=Personal Info
@@ -19,7 +24,7 @@ sessionsHtmlTitle=Sessions
 accountManagementTitle=Keycloak Account Management
 authenticatorTitle=Authenticator
 applicationsHtmlTitle=Applications
-linkedAccountsHtmlTitle=Linked Accounts
+linkedAccountsHtmlTitle=Linked accounts
 
 accountManagementWelcomeMessage=Welcome to Keycloak Account Management
 personalInfoIntroMessage=Manage your basic information
@@ -32,7 +37,7 @@ updatePasswordTitle=Update Password
 updatePasswordMessageTitle=Make sure you choose a strong password
 updatePasswordMessage=A strong password contains a mix of numbers, letters, and symbols. It is hard to guess, does not resemble a real word, and is only used for this account.
 personalSubTitle=Your Personal Info
-personalSubMessage=Manage this basic information: your first name, last name and email
+personalSubMessage=Manage your basic information.
 
 authenticatorCode=One-time code
 email=Email
@@ -94,7 +99,7 @@ role_offline-access=Offline access
 role_uma_authorization=Obtain permissions
 client_account=Account
 client_account-console=Account Console
-client_security-admin-console=Security Admin Console
+client_security-admin-console=security admin console
 client_admin-cli=Admin CLI
 client_realm-management=Realm Management
 client_broker=Broker
@@ -120,7 +125,7 @@ applications=Applications
 account=Account
 federatedIdentity=Federated Identity
 authenticator=Authenticator
-device-activity=Device Activity
+device-activity=Device activity
 sessions=Sessions
 log=Log
 

diff --git a/themes/src/main/resources/theme/base/login/login-recovery-authn-code-config.ftl b/themes/src/main/resources/theme/base/login/login-recovery-authn-code-config.ftl
@@ -48,7 +48,7 @@
     <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" name="userLabel" value=" " />
+        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
 
         <#if isAppInitiatedAction??>
             <input type="submit"

diff --git a/themes/src/main/resources/theme/base/login/messages/messages_en.properties b/themes/src/main/resources/theme/base/login/messages/messages_en.properties
@@ -442,6 +442,7 @@ recovery-codes-action-cancel=Cancel setup
 recovery-codes-download-file-header=Keep these recovery codes somewhere safe.
 recovery-codes-download-file-description=Recovery codes are single-use passcodes that allow you to log in to your account if you do not have access to your authenticator.
 recovery-codes-download-file-date= These codes were generated on
+recovery-codes-label-default=Recovery codes
 
 # WebAuthn
 webauthn-display-name=Security Key

diff --git a/themes/src/main/resources/theme/keycloak.v2/account/index.ftl b/themes/src/main/resources/theme/keycloak.v2/account/index.ftl
@@ -112,8 +112,10 @@
             </#list>
         </#if>
 
+        
         <link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/react-core/dist/styles/base.css"/>
         <link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/react-core/dist/styles/app.css"/>
+        <link rel="stylesheet" type="text/css" href="${resourceCommonUrl}/web_modules/@patternfly/patternfly/patternfly-addons.css"/>
         <link href="${resourceUrl}/public/layout.css" rel="stylesheet"/>
     </head>
 
@@ -181,26 +183,31 @@
         </div>
         <div class="pf-c-page__header-tools">
             <#if referrer?has_content && referrer_uri?has_content>
-            <div class="pf-c-page__header-tools-group pf-m-icons">
-              <a id="landingReferrerLink" href="${referrer_uri}" id="referrer" tabindex="0"><span class="pf-icon pf-icon-arrow"></span>${msg("backTo",referrerName)}</a>
+            <div class="pf-c-page__header-tools-group pf-m-icons pf-u-display-none pf-u-display-flex-on-md">
+              <a id="landingReferrerLink" href="${referrer_uri}" class="pf-c-button pf-m-link" tabindex="0">
+                  <span class="pf-c-button__icon pf-m-start">
+                      <i class="pf-icon pf-icon-arrow" aria-hidden="true"></i>
+                  </span>
+                  ${msg("backToAdminConsole")}
+              </a>
             </div>
             </#if>
 
-            <div class="pf-c-page__header-tools-group pf-m-icons">
+            <div class="pf-c-page__header-tools-group pf-m-icons pf-u-display-none pf-u-display-flex-on-md pf-u-mr-md">
               <button id="landingSignInButton" tabindex="0" style="display:none" onclick="keycloak.login();" class="pf-c-button pf-m-primary" type="button">${msg("doSignIn")}</button>
               <button id="landingSignOutButton" tabindex="0" style="display:none" onclick="keycloak.logout();" class="pf-c-button pf-m-primary" type="button">${msg("doSignOut")}</button>
             </div>
 
             <!-- Kebab for mobile -->
-            <div class="pf-c-page__header-tools-group">
+            <div class="pf-c-page__header-tools-group pf-u-display-none-on-md">
                 <div id="landingMobileKebab" class="pf-c-dropdown pf-m-mobile" onclick="toggleMobileDropdown();"> <!-- pf-m-expanded -->
                     <button aria-label="Actions" tabindex="0" id="landingMobileKebabButton" class="pf-c-dropdown__toggle pf-m-plain" type="button" aria-expanded="true" aria-haspopup="true">
                         <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 192 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" transform=""></path></svg>
                     </button>
                     <ul id="landingMobileDropdown" aria-labelledby="landingMobileKebabButton" class="pf-c-dropdown__menu pf-m-align-right" role="menu" style="display:none">
                         <#if referrer?has_content && referrer_uri?has_content>
                         <li role="none">
-                            <a id="landingMobileReferrerLink" href="${referrer_uri}" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("backTo",referrerName)}</a>
+                            <a id="landingMobileReferrerLink" href="${referrer_uri}" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("backToAdminConsole")}</a>
                         </li>
                         </#if>
 
@@ -220,45 +227,51 @@
       </header>
 
       <main role="main" class="pf-c-page__main">
-        <section class="pf-c-page__main-section pf-m-light">
-          <div class="pf-c-content" id="landingWelcomeMessage">
-            <h1>${msg("accountManagementWelcomeMessage")}</h1>
-          </div>
+        <section class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom">
+            <div class="pf-c-page__main-body">
+                <div class="pf-c-content" id="landingWelcomeMessage">
+                    <h1>${msg("accountManagementWelcomeMessage")}</h1>
+                </div>
+            </div>
         </section>
-        <section class="pf-c-page__main-section">
-          <div class="pf-l-gallery pf-m-gutter">
-            <#assign content=theme.apply("content.json")?eval>
-            <#list content as item>
-              <div class="pf-l-gallery__item pf-c-card" id="landing-${item.id}">
-                <div>
-                  <div class="pf-c-card__header pf-c-content">
-                      <h2>
-                        <#if item.icon??>
-                          <i class="pf-icon ${item.icon}"></i>&nbsp;
-                        <#elseif item.iconSvg??>
-                          <img src="${item.iconSvg}" alt="icon"/>&nbsp;
-                        </#if>
-                        ${msg(item.label)}
-                      </h2>
-                      <#if item.descriptionLabel??>
-                        <p>${msg(item.descriptionLabel)}</p>
-                      </#if>
-                  </div>
-                  <div class="pf-c-card__body pf-c-content">
-                    <#if item.content??>
-                      <#list item.content as sub>
-                        <div id="landing-${sub.id}">
-                          <a onclick="toggleReact(); window.location.hash='${sub.path}'">${msg(sub.label)}</a>
+        <section class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll">
+            <div class="pf-c-page__main-body">
+                <div class="pf-l-gallery pf-m-gutter">
+                    <#assign content=theme.apply("content.json")?eval>
+                    <#list content as item>
+                        <div class="pf-l-gallery__item" id="landing-${item.id}">
+                            <div class="pf-c-card pf-m-full-height">
+                                <div>
+                                    <div class="pf-c-card__title pf-c-content">
+                                        <h2 class="pf-u-display-flex pf-u-w-100 pf-u-flex-direction-column">
+                                            <#if item.icon??>
+                                                <i class="pf-icon ${item.icon}"></i>
+                                            <#elseif item.iconSvg??>
+                                                <img src="${item.iconSvg}" alt="icon"/>
+                                            </#if>
+                                            ${msg(item.label)}
+                                        </h2>
+                                    </div>
+                                    <div class="pf-c-card__body">
+                                        <#if item.descriptionLabel??>
+                                            <p class="pf-u-mb-md">${msg(item.descriptionLabel)}</p>
+                                        </#if>
+                                        <#if item.content??>
+                                            <#list item.content as sub>
+                                                <div id="landing-${sub.id}">
+                                                    <a onclick="toggleReact(); window.location.hash='${sub.path}'">${msg(sub.label)}</a>
+                                                </div>
+                                            </#list>
+                                        <#else>
+                                            <a id="landing-${item.id}" onclick="toggleReact(); window.location.hash = '${item.path}'">${msg(item.label)}</a>
+                                        </#if>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                      </#list>
-                    <#else>
-                      <a id="landing-${item.id}" onclick="toggleReact(); window.location.hash = '${item.path}'">${msg(item.label)}</a>
-                    </#if>
-                  </div>
+                    </#list>
                 </div>
-              </div>
-            </#list>
-          </div>
+            </div>
         </section>
       </main>
     </div>