KEYCLOAK-12776: Make it easier to change the logo and logo link.

testsuite/integration-arquillian/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/PersonalInfoTest.java

@@ -154,6 +154,12 @@ public class PersonalInfoTest extends BaseAccountPageTest {
         personalInfoPage.valuesEqual(testUser2);
     }
     
+    @Test
+    public void clickLogoTest() {
+        personalInfoPage.clickBrandLink();
+        accountWelcomeScreen.assertCurrent();
+    }
+
     private void setEditUsernameAllowed(boolean value) {
         RealmRepresentation realm = testRealmResource().toRepresentation();
         realm.setEditUsernameAllowed(value);

testsuite/integration-arquillian/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/WelcomeScreenTest.java

@@ -73,6 +73,12 @@ public class WelcomeScreenTest extends AbstractAccountTest {
         personalInfoPage.assertCurrent();
     }
 
+    @Test
+    public void clickLogoTest() {
+        accountWelcomeScreen.clickLogoImage();
+        accountWelcomeScreen.assertCurrent();
+    }
+
     @Test
     public void accountSecurityTest() {
         // TODO rewrite this! (KEYCLOAK-12105)

testsuite/integration-arquillian/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/page/AbstractLoggedInPage.java

@@ -54,6 +54,9 @@ public abstract class AbstractLoggedInPage extends AbstractAccountPage {
     @FindBy(id = "refresh-page")
     private WebElement refreshPageBtn;
     
+    @FindBy(id = "brandLink")
+    private WebElement brandLink;
+
     public AbstractLoggedInPage() {
         hashPath = new LinkedList<>();
         if (getParentPageId() != null) hashPath.add(getParentPageId());
@@ -113,6 +116,10 @@ public abstract class AbstractLoggedInPage extends AbstractAccountPage {
         clickLink(refreshPageBtn);
     }
 
+    public void clickBrandLink() {
+        clickLink(brandLink);
+    }
+
     @Override
     public boolean isCurrent() {
         return super.isCurrent() && getPageId().equals(sidebar().getActiveNavId());

testsuite/integration-arquillian/tests/other/base-ui/src/test/java/org/keycloak/testsuite/ui/account2/page/WelcomeScreen.java

@@ -57,6 +57,8 @@ public class WelcomeScreen extends AbstractAccountPage {
     private WebElement myResourcesCard;
     @FindBy(xpath = "//*[@id='landingMyResourcesLink']/a")
     private WebElement myResourcesLink;
+    @FindBy(id = "landingLogo")
+    private WebElement logoLink;
 
     @FindBy(id = "landingWelcomeMessage")
     private WebElement welcomeMessage; // used only for i18n testing
@@ -83,6 +85,10 @@ public class WelcomeScreen extends AbstractAccountPage {
         return header;
     }
 
+    public void clickLogoImage() {
+        clickLink(logoLink);
+    }
+
     public void clickPersonalInfoLink() {
         clickLink(personalInfoLink);
     }

themes/src/main/resources/theme/keycloak-preview/account/index.ftl

@@ -26,6 +26,18 @@
             var resourceUrl = '${resourceUrl}';
             var isReactLoading = false;
 
+            <#if properties.logo?has_content>
+            var brandImg = resourceUrl + '${properties.logo}';
+            <#else>
+            var brandImg = resourceUrl + '/public/logo.svg';
+            </#if>
+
+            <#if properties.logoUrl?has_content>
+            var brandUrl = '${properties.logoUrl}';
+            <#else>
+            var brandUrl = baseUrl;
+            </#if>
+
             var features = {
                 isRegistrationEmailAsUsername : ${realm.registrationEmailAsUsername?c},
                 isEditUserNameAllowed : ${realm.editUsernameAllowed?c},
@@ -56,7 +68,11 @@
             </#if>
         </script>
 
+        <#if properties.favIcon?has_content>
+        <link rel="icon" href="${resourceUrl}${properties.favIcon}" type="image/x-icon"/>
+        <#else>
         <link rel="icon" href="${resourceUrl}/public/favicon.ico" type="image/x-icon"/>
+        </#if>
 
         <script src="${authUrl}js/keycloak.js"></script>
 
@@ -127,7 +143,11 @@
 
 <div id="spinner_screen" style="display:block; height:100%">
     <div style="width: 320px; height: 328px; text-align: center; position: absolute; top:0;	bottom: 0; left: 0;	right: 0; margin: auto;">
+                <#if properties.logo?has_content>
+                <img src="${resourceUrl}${properties.logo}" alt="Logo" class="brand">
+                <#else>
                 <img src="${resourceUrl}/public/logo.svg" alt="Logo" class="brand">
+                </#if>
                 <p>${msg("loadingMessage")}</p>
                 <div >
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
@@ -144,8 +164,16 @@
     <div class="pf-c-page" id="page-layout-default-nav">
       <header role="banner" class="pf-c-page__header">
         <div class="pf-c-page__header-brand">
-          <a class="pf-c-page__header-brand-link">
+          <#if properties.logoUrl?has_content>
+          <a id="landingLogo" class="pf-c-page__header-brand-link" href="${properties.logoUrl}">
+          <#else>
+          <a id="landingLogo" class="pf-c-page__header-brand-link" href="${baseUrl}">
+          </#if>
+            <#if properties.logo?has_content>
+            <img class="pf-c-brand brand" src="${resourceUrl}${properties.logo}" alt="Logo">
+            <#else>
             <img class="pf-c-brand brand" src="${resourceUrl}/public/logo.svg" alt="Logo">
+            </#if>
           </a>
         </div>
         <div class="pf-c-page__header-tools">

themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx

@@ -39,8 +39,10 @@ declare function isWelcomePage(): boolean;
 declare const locale: string;
 declare const resourceUrl: string;
 
+declare const brandImg: string;
+declare const brandUrl: string;
+
 const pFlyImages = resourceUrl + '/node_modules/@patternfly/patternfly/assets/images/';
-const brandImg = resourceUrl + '/public/logo.svg';
 const avatarImg = pFlyImages + 'img_avatar.svg';
 
 export interface AppProps {};
@@ -65,7 +67,7 @@ export class App extends React.Component<AppProps> {
 
         const Header = (
             <PageHeader
-                logo={<Brand src={brandImg} alt="Logo" className="brand"/>}
+                logo={<a id="brandLink" href={brandUrl}><Brand src={brandImg} alt="Logo" className="brand"/></a>}
                 toolbar={<PageToolbar/>}
                 avatar={<Avatar src={avatarImg} alt="Avatar image" />}
                 showNavToggle

themes/src/main/resources/theme/keycloak-preview/account/theme.properties

@@ -2,3 +2,15 @@ parent=base
 deprecatedMode=false
 scripts=WelcomePageScripts.js content.js
 developmentMode=false
+
+# This is the logo in upper lefthand corner.
+# It must be a relative path.
+logo=/public/logo.svg
+
+# This is the link followed when clicking on the logo.
+# It can be any valid URL, including an external site.
+logoUrl=./
+
+# This is the icon for the account console.
+# It must be a relative path.
+favIcon=/public/favicon.ico