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...

Package Install | Github

Image may be NSFW.
Clik here to view.

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) For providing anonymous access to 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"
]
}