VMworld Hackathon vSphere Client Login UI Theme

For those of you who attended this years VMworld Hackathon (US/Europe), you may have noticed something different when logging into the vSphere Web/H5 Client? In case you missed it or could not attend, here is a GIF demonstrating what you would have saw:

via GIPHY

No, the VMworld Hackathon environment was not hacked 😉 but instead I had built a very special VMworld Hackathon vSphere Client Login UI Theme for the event. I was also getting tired of looking at our boring blue login screen. Customizing the vSphere Client Login UI has been possible (though not officially supported by VMware) since vSphere 6.0 which I have written about here, here and most recently here (due to vSphere 6.5 Update 1 changes). Having received a large number of requests from folks who attended the Hackathon as well as folks who had heard or saw the customization who wish to replicate this in their own environment, I have posted the instructions below.

This slick customization would not have been possible without the help from Timo Sugliani (thanks dude!) who was the one that made me aware of the two of the creatives that then gave me the idea to combine them into a vSphere Client Login UI Theme. The first is V for Vendetta image which can be found here and the second is super slick interactive Bootstrap animation which can be found here. Lastly, I added my own touch by using a Mr. Robot font from this site here which goes really well with the overall theme.

Option A (Easy):

Step 1 - As a pre-caution, you should backup the original websso.war before overriding the file in case you want to revert back to the original default behavior:

Step 2 - Download the websso.war package which contains all the customization mentioned below and then copy that to the vCenter Server Appliance (VCSA) located under /usr/lib/vmware-sso/vmware-sts/webapps and you are done.

Note: The websso.war has been created specifically for a vSphere 6.5 Update 1 environment. Simply copying this to earlier version of vSphere probably will not work and you will need to use Option B for earlier vSphere versions.

Option B (Difficult):

If you wish to manually reproduce this or modify the customization, you can follow the instructions below.

Step 1 - Update /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/css/login.css with the following:

Added the following to L21-24

background-image: url(../../resources/img/code.jpg);
background-size: 100%;
background-repeat:no-repeat;
background-color: #000000;

Step 2 - For the image that was used in the VMworld Hackathon, download it from https://i.ytimg.com/vi/7v6qI4vFSRs/maxresdefault.jpg and save it to /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/img/code.jpg

Step 3 - For the Mr. Robot text used in the VMworld Hackathon, visit https://fontmeme.com/mr-robot-tv-show-font/ and generate the text you wish to use and then save it to /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/img/hackathon-title.png

Step 4 - For the Bootstrap animation used in the VMworld Hackathon, visit https://bootsnipp.com/snippets/56A0W#comments and select the "JS" tab and copy the Javascript snippet and save it to /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/js/partical.js

Step 5 - Update /usr/lib/vmware-sso/vmware-sts/webapps/websso/WEB-INF/views/unpentry.jsp with the following:

Added the following to L17-19

     <div id="particles-js"><canvas class="particles-js-canvas-el" width="991" height="496" style="width: 100%; height: 100%;"></canvas></div>
     <div id="particles-js"></div>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

Added the following to L63

     <script type="text/javascript" src="../../resources/js/partical.js"></script>

Added the following to L128

     <img src="../../resources/img/hackathon-title.png"/>