Smartphone

Goal

Add logo on Login page and Touch UI console banners - Projects, Sites, Assets, Tools etc.

Demo | Package Install | Git Hub


Login Screen



AEM Consoles

Solution

1) Login to CRXDE Lite, create nt:folder - /etc/clientlibs/eaem-branding-login

2) Create nt:folder - /etc/clientlibs/eaem-branding-login/img, add the logo large (for login screen) and small (for console banners) images

               /etc/clientlibs/eaem-branding-login/img/eaem-logo-large.png
               /etc/clientlibs/eaem-branding-login/img/eaem-logo-small.png

3) Create cq:ClientLibraryFolder - /etc/clientlibs/eaem-branding-login/logo with categories String[] set to granite.core.login.extension, granite.ui.coral.foundation and dependencies String[] set to underscore

4) Create nt:file /etc/clientlibs/eaem-branding-login/logo/css.txt add the following content

               add-logo.css

5) Create nt:file /etc/clientlibs/eaem-branding-login/logo/add-logo.css add the following code

.eaem-logo{
 position:absolute;
 background-repeat: no-repeat;
}

.eaem-login-logo {
 top: 3%;
 left: 3%;
 height: 200px;
 width: 250px;
 background-image:url(/etc/clientlibs/eaem-branding-login/img/eaem-logo-large.png);
}

.eaem-aem-logo{
 transform: translate(-50%, 0%);
 top: 2px;
 left: 50%;
 height: 50px;
 width: 100px;
 background-image:url(/etc/clientlibs/eaem-branding-login/img/eaem-logo-small.png);
}

6) Create nt:file - /etc/clientlibs/eaem-branding-login/logo/js.txt add the following content

               add-logo.js

7) Create nt:file - /etc/clientlibs/eaem-branding-login/logo/add-logo.js add the following code

(function($, $document){
 var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
 LOGIN_PAGE = "/libs/granite/core/content/login.html";

 addLogo();

 function addLogo(){
 if(isLoginPage()){
 $document.ready(addLoginPageLogo);
 }else{
 addConsoleLogo();
 }
 }

 function addConsoleLogo(){
 $document.on(FOUNDATION_CONTENT_LOADED, function(){
 var html = "<div class=eaem-logo eaem-aem-logo></div>";
 $(html).prependTo($("coral-shell-header"));
 })
 }

 function addLoginPageLogo(){
 loadCss();

 var html = "<div class=eaem-logo eaem-login-logo></div>";

 $(html).appendTo($("#backgrounds"));
 }

 function loadCss(){
 $("<link/>", {
 rel: "stylesheet",
 type: "text/css",
 href: "/etc/clientlibs/eaem-branding-login/logo/add-logo.css"
 }).appendTo("head");
 }

 function isLoginPage(){
 return (window.location.pathname === LOGIN_PAGE);
 }
}($, $(document)));

8) The login extension paths should be added to Sling Authentication Service - http://localhost:4502/system/console/configMgr/org.apache.sling.engine.impl.auth.SlingAuthenticator Authentication Requirements property (paths that donot need authentication are prefixed with a "-")



9) To make the authentication requirements part of build process, create nt:folder - /apps/eaem-branding-login/config and sling:OsgiConfig - /apps/eaem-branding-login/config/org.apache.sling.engine.impl.auth.SlingAuthenticator with the following properties

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root  
 jcr_primaryType="sling:OsgiConfig"
 sling.auth.requirements="[+/,-/libs/granite/core/content/login,-/etc/clientlibs/granite,-/libs/dam/gui/components/admin/adhocassetshare/clientlibs,-/etc/clientlibs/eaem-branding-login]"/>