AEM Cloud Service - Branding Login with Custom Image and Text

Quick code for branding the AEM cloud service login screen with custom image and text for assisting with the login process...

Demo | Package Install | Github

1) Create project eaem-branding-login using the following command...

set JAVA_HOME=C:/Progra~1/Java/jdk-11.0.6

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate -D archetypeGroupId=com.adobe.aem 
    -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=36 -D aemVersion="cloud" 
    -D appTitle="Experience AEM Branding Login" -D appId="eaem-branding-login" 
    -D groupId="apps.experienceaem.sites" -D frontendModule=none -D includeExamples=n -D includeDispatcherConfig=n

2) Add clientlib /apps/eaem-branding-login/clientlibs/login-branding with the following code..

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
          allowProxy="true"
          categories="[granite.core.login]"/>

3) Add the following code in /apps/eaem-branding-login/clientlibs/login-branding/login-branding.js

(function(document) {
    const LOGIN_PAGE = "/libs/granite/core/content/login.html",
            BG_DEFAULT_SEL = "#bg_default",
            LOGGIN_BOX_SEL = "#login-box";

    document.addEventListener("DOMContentLoaded", changeHelpText);

    function changeHelpText(event){
        if(!isLoginPage()){
            return;
        }

        let loginBoxH1 = document.querySelector(LOGGIN_BOX_SEL + " h1");

        loginBoxH1.innerText = "Experiencing Adobe Experience Manager";
        loginBoxH1.style.backgroundColor = "#111111cc";
        loginBoxH1.style.padding = "5px";

        let loginBoxP = document.querySelector(LOGGIN_BOX_SEL + " p");
        loginBoxP.innerText = "Aodbe IMS users please use 'Sign in with Adobe'";
        loginBoxP.style.backgroundColor = "#111111cc";
        loginBoxP.style.padding = "5px";

        let loginBG = document.querySelector(BG_DEFAULT_SEL);
        loginBG.style.backgroundImage = "url(/apps/eaem-branding-login/clientlibs/login-branding/resources/team.jpeg)";
        loginBG.style.backgroundSize = "100% 100%";
    }

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

4) Add the background image /apps/eaem-branding-login/clientlibs/login-branding/resources/team.jpeg

5) Add ui.config\src\main\content\jcr_root\apps\eaem-branding-login\osgiconfig\config.author\org.apache.sling.engine.impl.auth.SlingAuthenticator.cfg.json for excluding the background image from authentication process

{
  "auth.sudo.cookie": "sling.sudo",
  "auth.sudo.parameter": "sudo",
  "auth.annonymous": false,
  "sling.auth.requirements": [
    "+/",
    "-/libs/granite/core/content/login",
    "-/apps/eaem-branding-login/clientlibs/login-branding/resources/team.jpeg",
    "-/etc.clientlibs",
    "-/etc/clientlibs/granite",
    "-/libs/dam/remoteassets/content/loginerror",
    "-/aem/update.theme",
    "-/linkexpired"
  ],
  "sling.auth.anonymous.user": "",
  "auth.http": "preemptive",
  "auth.http.realm": "Sling (Development)",
  "auth.uri.suffix": [
    "/j_security_check"
  ]
}

6) For providing anonymous access to background image , add the following code in ui.config\src\main\content\jcr_root\apps\eaem-branding-login\osgiconfig\config.author\org.apache.sling.jcr.repoinit.RepositoryInitializer~eaem-branding-login.cfg.json

{
    "scripts": [
        "create path (sling:Folder) /apps/eaem-branding-login",
        "set ACL for anonymous\n  allow jcr:read on /apps/eaem-branding-login\nend"
    ]
}