AEM 62 - Touch UI Branding Login and Consoles

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 xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    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]"/>