├── README.md
├── app.component.css
├── login-animation.js
├── unpentry.jsp
└── vYetti-Demo.gif


/README.md:
--------------------------------------------------------------------------------
 1 | # vYetti - Animated vSphere Login UI customization
 2 | 
 3 | ![Alt Text](vYetti-Demo.gif)
 4 | 
 5 | ## Requirements
 6 | 
 7 | * vCenter Server Appliance 6.5+ or 6.7
 8 | 
 9 | ## Instructions
10 | 
11 | **Step 1** - Lets first take a backup of the original ROOT.war file so you can easily revert back in case you run into any issues. To do so, login to VCSA via SSH and run the following command:
12 | ```
13 | cp /usr/lib/vmware-sso/vmware-sts/webapps/ROOT.war /usr/lib/vmware-sso/vmware-sts/webapps/ROOT.war.bak
14 | ```
15 | **Step 2** - We are now going to create a temporary directory that we will use to store the ROOT.war file and we will also copy over it over using the following two commands:
16 | ```
17 | mkdir /root/ROOT
18 | cp /usr/lib/vmware-sso/vmware-sts/webapps/ROOT.war /root/ROOT/
19 | ```
20 | **Step 3** - We are now going to change into our /root/ROOT directory and extract the contents of the war file so we can make our modifications. To do so, run the following three commands:
21 | ```
22 | cd /root/ROOT
23 | unzip ROOT.war
24 | rm ROOT.war
25 | ```
26 | **Step 4** - If you wish to pre-fill the credentials when logging into the vSphere Client (Flex/H5), go ahead and update WEB-INF/views/unpentry.jsp as outlined in this blog article [here](https://www.virtuallyghetto.com/2015/08/quick-tip-pre-filled-credentials-in-the-vsphere-6-0-web-client.html). If you wish to make the login button active so you do not have to click into the box or hit tab, you will need to comment out $('#submit').prop('disabled',true); on L91 in **resources/js/websso.js**
27 | 
28 | **Step 5** - Copy **[app.component.css](app.component.css)** to **/root/ROOT/resources/css/** directory
29 | 
30 | **Step 6** - Copy **[login-animation.js](login-animation.js)** to **/root/ROOT/resources/js/** directory
31 | 
32 | **Step 7** - Copy **[unpentry.jsp](unpentry.jsp)** to **/root/ROOT/WEB-INF/views/** directory
33 | 
34 | **Note 1:**  If you are **NOT** using VCSA 6.7, you should use the original unpentry.jsp and apply the specific animated login code, as the file is different in older versions of VCSA
35 | 
36 | **Note 2:** If your vCenter Server can **NOT** directly access the internet, you may also need to download the [TweenMax.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js) file and store that locally under /resources/js
37 | 
38 | **Step 5** - Next, we need to re-generate the ROOT.war file so we can replace it with our modified version. To do so, run the following command:
39 | ```
40 | zip -r /root/ROOT.war index.jsp META-INF resources WEB-INF
41 | ```
42 | If the command was successful, we should have our new ROOT.war located in /root.
43 | 
44 | **Step 6** - Now we just need to update the system with our modified ROOT.war by simply copying it back to the original location by running the following command:
45 | ```
46 | cp /root/ROOT.war /usr/lib/vmware-sso/vmware-sts/webapps/ROOT.war
47 | ```
48 | Finally, to verify that that our changes will go into effect, we can simply issue a reboot to our VCSA and we should see that any customization changes made to the vSphere Client Login UI will now persist after a system restart.


--------------------------------------------------------------------------------
/app.component.css:
--------------------------------------------------------------------------------
  1 | /* You can add global styles to this file, and also import other style files */
  2 | /* colors */
  3 | html {
  4 |     width: 100%;
  5 |     height: 100%;
  6 |   }
  7 |   
  8 |   body {
  9 |     background-color: #eff3f4;
 10 |     position: relative;
 11 |     width: 100%;
 12 |     height: 100%;
 13 |     font-size: 16px;
 14 |     font-family: 'Source Sans Pro', sans-serif;
 15 |     font-weight: 400;
 16 |     -webkit-font-smoothing: antialiased;
 17 |   }
 18 |   
 19 |   form {
 20 |     position: absolute;
 21 |     top: 50%;
 22 |     left: 50%;
 23 |     -webkit-transform: translate(-50%, -50%);
 24 |             transform: translate(-50%, -50%);
 25 |     display: block;
 26 |     width: 100%;
 27 |     max-width: 400px;
 28 |     background-color: #3075ab;
 29 |     margin: 0;
 30 |     padding: 2.25em;
 31 |     -webkit-box-sizing: border-box;
 32 |             box-sizing: border-box;
 33 |     border: solid 1px #DDD;
 34 |     border-radius: .5em;
 35 |     font-family: 'Source Sans Pro', sans-serif;
 36 |   }
 37 |   form .svgContainer {
 38 |     position: relative;
 39 |     width: 200px;
 40 |     height: 200px;
 41 |     margin: 0 auto 1em;
 42 |     border-radius: 50%;
 43 |     background: none;
 44 |     border: solid 2.5px #3A5E77;
 45 |     overflow: hidden;
 46 |     pointer-events: none;
 47 |   }
 48 |   form .svgContainer div {
 49 |     position: relative;
 50 |     width: 100%;
 51 |     height: 0;
 52 |     overflow: hidden;
 53 |     padding-bottom: 100%;
 54 |   }
 55 |   form .svgContainer .mySVG {
 56 |     position: absolute;
 57 |     left: 0;
 58 |     top: 0;
 59 |     width: 100%;
 60 |     height: 100%;
 61 |     pointer-events: none;
 62 |   }
 63 |   form .inputGroup {
 64 |     margin: 0 0 2em;
 65 |     padding: 0;
 66 |     position: relative;
 67 |   }
 68 |   form .inputGroup:last-of-type {
 69 |     margin-bottom: 0;
 70 |   }
 71 |   form label {
 72 |     margin: 0 0 12px;
 73 |     display: block;
 74 |     font-size: 1.25em;
 75 |     color: #217093;
 76 |     font-weight: 700;
 77 |     font-family: inherit;
 78 |   }
 79 |   form input[type='username'], form input[type="text"], form input[type='password'] {
 80 |     display: block;
 81 |     margin: 0;
 82 |     padding-left: 0.5em;
 83 |     padding-right: 0.5em;
 84 |     background-color: #f3fafd;
 85 |     border: solid 2px #217093;
 86 |     border-radius: 4px;
 87 |     -webkit-appearance: none;
 88 |     -webkit-box-sizing: border-box;
 89 |             box-sizing: border-box;
 90 |     width: 100%;
 91 |     height: 65px;
 92 |     font-size: 1.55em;
 93 |     color: #353538;
 94 |     font-weight: 600;
 95 |     font-family: inherit;
 96 |     -webkit-transition: border-color .25s ease-out, -webkit-box-shadow .2s linear;
 97 |     transition: border-color .25s ease-out, -webkit-box-shadow .2s linear;
 98 |     transition: box-shadow .2s linear, border-color .25s ease-out;
 99 |     transition: box-shadow .2s linear, border-color .25s ease-out, -webkit-box-shadow .2s linear;
100 |   }
101 |   form input[type='username']:focus, form input[type="text"]:focus, form input[type='password']:focus {
102 |     outline: none;
103 |     -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
104 |             box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
105 |     border: solid 2px #4eb8dd;
106 |   }
107 |   form input[type='email'], form input[type="text"] {
108 |     padding-left: 0.5em;
109 |     padding-right: 0.5em;
110 |   }
111 |   form button {
112 |     display: block;
113 |     margin: 0;
114 |     padding: .65em 1em 1em;
115 |     background-color: #4eb8dd;
116 |     border: none;
117 |     border-radius: 4px;
118 |     -webkit-box-sizing: border-box;
119 |             box-sizing: border-box;
120 |     -webkit-box-shadow: none;
121 |             box-shadow: none;
122 |     width: 100%;
123 |     height: 65px;
124 |     font-size: 1.55em;
125 |     color: #FFF;
126 |     font-weight: 600;
127 |     font-family: inherit;
128 |     -webkit-transition: background-color .2s ease-out;
129 |     transition: background-color .2s ease-out;
130 |   }
131 |   form button:hover, form button:active {
132 |     background-color: #217093;
133 |   }
134 |   form .inputGroup1 .helper {
135 |     position: absolute;
136 |     z-index: 1;
137 |     font-family: inherit;
138 |   }
139 |   form .inputGroup1 .helper1 {
140 |     top: 0;
141 |     left: 0;
142 |     -webkit-transform: translate(1.4em, 2.6em) scale(1);
143 |             transform: translate(1.4em, 2.6em) scale(1);
144 |     -webkit-transform-origin: 0 0;
145 |             transform-origin: 0 0;
146 |     color: #217093;
147 |     font-size: 1.25em;
148 |     font-weight: 400;
149 |     opacity: .65;
150 |     pointer-events: none;
151 |     -webkit-transition: opacity .2s linear, -webkit-transform .2s ease-out;
152 |     transition: opacity .2s linear, -webkit-transform .2s ease-out;
153 |     transition: transform .2s ease-out, opacity .2s linear;
154 |     transition: transform .2s ease-out, opacity .2s linear, -webkit-transform .2s ease-out;
155 |   }
156 |   form .inputGroup1.focusWithText .helper {
157 |     /*input[type='email']:focus + .helper {*/
158 |     -webkit-transform: translate(1.4em, 2em) scale(0.65);
159 |             transform: translate(1.4em, 2em) scale(0.65);
160 |     opacity: 1;
161 |   }
162 |   label#checkboxLabel {
163 |     padding-left: 0px;
164 |     text-indent: -2.1em;
165 |     font-size: 0.7em;
166 |     color: white;
167 |   }
168 | 


--------------------------------------------------------------------------------
/login-animation.js:
--------------------------------------------------------------------------------
  1 | var email = document.querySelector('#email'), password = document.querySelector('#password'), mySVG = document.querySelector('.svgContainer'), armL = document.querySelector('.armL'), armR = document.querySelector('.armR'), eyeL = document.querySelector('.eyeL'), eyeR = document.querySelector('.eyeR'), nose = document.querySelector('.nose'), mouth = document.querySelector('.mouth'), mouthBG = document.querySelector('.mouthBG'), mouthSmallBG = document.querySelector('.mouthSmallBG'), mouthMediumBG = document.querySelector('.mouthMediumBG'), mouthLargeBG = document.querySelector('.mouthLargeBG'), mouthMaskPath = document.querySelector('#mouthMaskPath'), mouthOutline = document.querySelector('.mouthOutline'), tooth = document.querySelector('.tooth'), tongue = document.querySelector('.tongue'), chin = document.querySelector('.chin'), face = document.querySelector('.face'), eyebrow = document.querySelector('.eyebrow'), outerEarL = document.querySelector('.earL .outerEar'), outerEarR = document.querySelector('.earR .outerEar'), earHairL = document.querySelector('.earL .earHair'), earHairR = document.querySelector('.earR .earHair'), hair = document.querySelector('.hair');
  2 | var caretPos, curEmailIndex, screenCenter, svgCoords, eyeMaxHorizD = 20, eyeMaxVertD = 10, noseMaxHorizD = 23, noseMaxVertD = 10, dFromC, eyeDistH, eyeLDistV, eyeRDistV, eyeDistR, mouthStatus = "small";
  3 | 
  4 | function getCoord(e) {
  5 | 	var carPos = email.selectionEnd,
  6 | 		div = document.createElement('div'),
  7 | 		span = document.createElement('span'),
  8 | 		copyStyle = getComputedStyle(email),
  9 | 		emailCoords = {}, caretCoords = {}, centerCoords = {}
 10 | 		;
 11 | 	[].forEach.call(copyStyle, function (prop) {
 12 | 		div.style[prop] = copyStyle[prop];
 13 | 	});
 14 | 	div.style.position = 'absolute';
 15 | 	document.body.appendChild(div);
 16 | 	div.textContent = email.value.substr(0, carPos);
 17 | 	span.textContent = email.value.substr(carPos) || '.';
 18 | 	div.appendChild(span);
 19 | 
 20 | 	emailCoords = getPosition(email);							//console.log("emailCoords.x: " + emailCoords.x + ", emailCoords.y: " + emailCoords.y);
 21 | 	caretCoords = getPosition(span);							//console.log("caretCoords.x " + caretCoords.x + ", caretCoords.y: " + caretCoords.y);
 22 | 	centerCoords = getPosition(mySVG);							//console.log("centerCoords.x: " + centerCoords.x);
 23 | 	svgCoords = getPosition(mySVG);
 24 | 	screenCenter = centerCoords.x + (mySVG.offsetWidth / 2);		//console.log("screenCenter: " + screenCenter);
 25 | 	caretPos = caretCoords.x + emailCoords.x;					//console.log("caretPos: " + caretPos);
 26 | 
 27 | 	dFromC = screenCenter - caretPos; 							//console.log("dFromC: " + dFromC);
 28 | 	var pFromC = Math.round((caretPos / screenCenter) * 100) / 100;
 29 | 	if (pFromC < 1) {
 30 | 
 31 | 	} else if (pFromC > 1) {
 32 | 		pFromC -= 2;
 33 | 		pFromC = Math.abs(pFromC);
 34 | 	}
 35 | 
 36 | 	eyeDistH = -dFromC * .05;
 37 | 	if (eyeDistH > eyeMaxHorizD) {
 38 | 		eyeDistH = eyeMaxHorizD;
 39 | 	} else if (eyeDistH < -eyeMaxHorizD) {
 40 | 		eyeDistH = -eyeMaxHorizD;
 41 | 	}
 42 | 
 43 | 	var eyeLCoords = { x: svgCoords.x + 84, y: svgCoords.y + 76 };
 44 | 	var eyeRCoords = { x: svgCoords.x + 113, y: svgCoords.y + 76 };
 45 | 	var noseCoords = { x: svgCoords.x + 97, y: svgCoords.y + 81 };
 46 | 	var mouthCoords = { x: svgCoords.x + 100, y: svgCoords.y + 100 };
 47 | 	var eyeLAngle = getAngle(eyeLCoords.x, eyeLCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
 48 | 	var eyeLX = Math.cos(eyeLAngle) * eyeMaxHorizD;
 49 | 	var eyeLY = Math.sin(eyeLAngle) * eyeMaxVertD;
 50 | 	var eyeRAngle = getAngle(eyeRCoords.x, eyeRCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
 51 | 	var eyeRX = Math.cos(eyeRAngle) * eyeMaxHorizD;
 52 | 	var eyeRY = Math.sin(eyeRAngle) * eyeMaxVertD;
 53 | 	var noseAngle = getAngle(noseCoords.x, noseCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
 54 | 	var noseX = Math.cos(noseAngle) * noseMaxHorizD;
 55 | 	var noseY = Math.sin(noseAngle) * noseMaxVertD;
 56 | 	var mouthAngle = getAngle(mouthCoords.x, mouthCoords.y, emailCoords.x + caretCoords.x, emailCoords.y + 25);
 57 | 	var mouthX = Math.cos(mouthAngle) * noseMaxHorizD;
 58 | 	var mouthY = Math.sin(mouthAngle) * noseMaxVertD;
 59 | 	var mouthR = Math.cos(mouthAngle) * 6;
 60 | 	var chinX = mouthX * .8;
 61 | 	var chinY = mouthY * .5;
 62 | 	var chinS = 1 - ((dFromC * .15) / 100);
 63 | 	if (chinS > 1) { chinS = 1 - (chinS - 1); }
 64 | 	var faceX = mouthX * .3;
 65 | 	var faceY = mouthY * .4;
 66 | 	var faceSkew = Math.cos(mouthAngle) * 5;
 67 | 	var eyebrowSkew = Math.cos(mouthAngle) * 25;
 68 | 	var outerEarX = Math.cos(mouthAngle) * 4;
 69 | 	var outerEarY = Math.cos(mouthAngle) * 5;
 70 | 	var hairX = Math.cos(mouthAngle) * 6;
 71 | 	var hairS = 1.2;
 72 | 
 73 | 	TweenMax.to(eyeL, 1, { x: -eyeLX, y: -eyeLY, ease: Expo.easeOut });
 74 | 	TweenMax.to(eyeR, 1, { x: -eyeRX, y: -eyeRY, ease: Expo.easeOut });
 75 | 	TweenMax.to(nose, 1, { x: -noseX, y: -noseY, rotation: mouthR, transformOrigin: "center center", ease: Expo.easeOut });
 76 | 	TweenMax.to(mouth, 1, { x: -mouthX, y: -mouthY, rotation: mouthR, transformOrigin: "center center", ease: Expo.easeOut });
 77 | 	TweenMax.to(chin, 1, { x: -chinX, y: -chinY, scaleY: chinS, ease: Expo.easeOut });
 78 | 	TweenMax.to(face, 1, { x: -faceX, y: -faceY, skewX: -faceSkew, transformOrigin: "center top", ease: Expo.easeOut });
 79 | 	TweenMax.to(eyebrow, 1, { x: -faceX, y: -faceY, skewX: -eyebrowSkew, transformOrigin: "center top", ease: Expo.easeOut });
 80 | 	TweenMax.to(outerEarL, 1, { x: outerEarX, y: -outerEarY, ease: Expo.easeOut });
 81 | 	TweenMax.to(outerEarR, 1, { x: outerEarX, y: outerEarY, ease: Expo.easeOut });
 82 | 	TweenMax.to(earHairL, 1, { x: -outerEarX, y: -outerEarY, ease: Expo.easeOut });
 83 | 	TweenMax.to(earHairR, 1, { x: -outerEarX, y: outerEarY, ease: Expo.easeOut });
 84 | 	TweenMax.to(hair, 1, { x: hairX, scaleY: hairS, transformOrigin: "center bottom", ease: Expo.easeOut });
 85 | 
 86 | 	document.body.removeChild(div);
 87 | };
 88 | 
 89 | function onEmailInput(e) {
 90 | 	getCoord(e);
 91 | 	var value = e.target.value;
 92 | 	curEmailIndex = value.length;
 93 | 
 94 | 	// very crude email validation for now to trigger effects
 95 | 	if (curEmailIndex > 0) {
 96 | 		if (mouthStatus == "small") {
 97 | 			mouthStatus = "medium";
 98 | 			TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, shapeIndex: 8, ease: Expo.easeOut });
 99 | 			TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
100 | 			TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut });
101 | 			TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut });
102 | 		}
103 | 		if (value.includes("@")) {
104 | 			mouthStatus = "large";
105 | 			TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthLargeBG, ease: Expo.easeOut });
106 | 			TweenMax.to(tooth, 1, { x: 3, y: -2, ease: Expo.easeOut });
107 | 			TweenMax.to(tongue, 1, { y: 2, ease: Expo.easeOut });
108 | 			TweenMax.to([eyeL, eyeR], 1, { scaleX: .65, scaleY: .65, ease: Expo.easeOut, transformOrigin: "center center" });
109 | 		} else {
110 | 			mouthStatus = "medium";
111 | 			TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, ease: Expo.easeOut });
112 | 			TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
113 | 			TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut });
114 | 			TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut });
115 | 		}
116 | 	} else {
117 | 		mouthStatus = "small";
118 | 		TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthSmallBG, shapeIndex: 9, ease: Expo.easeOut });
119 | 		TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
120 | 		TweenMax.to(tongue, 1, { y: 0, ease: Expo.easeOut });
121 | 		TweenMax.to([eyeL, eyeR], 1, { scaleX: 1, scaleY: 1, ease: Expo.easeOut });
122 | 	}
123 | }
124 | 
125 | function onEmailFocus(e) {
126 | 	e.target.parentElement.classList.add("focusWithText");
127 | 	getCoord();
128 | }
129 | 
130 | function onEmailBlur(e) {
131 | 	if (e.target.value == "") {
132 | 		e.target.parentElement.classList.remove("focusWithText");
133 | 	}
134 | 	resetFace();
135 | }
136 | 
137 | function onPasswordFocus(e) {
138 | 	coverEyes();
139 | }
140 | 
141 | function onPasswordBlur(e) {
142 | 	uncoverEyes();
143 | }
144 | 
145 | function coverEyes() {
146 | 	TweenMax.to(armL, .45, { x: -93, y: 2, rotation: 0, ease: Quad.easeOut });
147 | 	TweenMax.to(armR, .45, { x: -93, y: 2, rotation: 0, ease: Quad.easeOut, delay: .1 });
148 | }
149 | 
150 | function uncoverEyes() {
151 | 	TweenMax.to(armL, 1.35, { y: 220, ease: Quad.easeOut });
152 | 	TweenMax.to(armL, 1.35, { rotation: 105, ease: Quad.easeOut, delay: .1 });
153 | 	TweenMax.to(armR, 1.35, { y: 220, ease: Quad.easeOut });
154 | 	TweenMax.to(armR, 1.35, { rotation: -105, ease: Quad.easeOut, delay: .1 });
155 | }
156 | 
157 | function resetFace() {
158 | 	TweenMax.to([eyeL, eyeR], 1, { x: 0, y: 0, ease: Expo.easeOut });
159 | 	TweenMax.to(nose, 1, { x: 0, y: 0, scaleX: 1, scaleY: 1, ease: Expo.easeOut });
160 | 	TweenMax.to(mouth, 1, { x: 0, y: 0, rotation: 0, ease: Expo.easeOut });
161 | 	TweenMax.to(chin, 1, { x: 0, y: 0, scaleY: 1, ease: Expo.easeOut });
162 | 	TweenMax.to([face, eyebrow], 1, { x: 0, y: 0, skewX: 0, ease: Expo.easeOut });
163 | 	TweenMax.to([outerEarL, outerEarR, earHairL, earHairR, hair], 1, { x: 0, y: 0, scaleY: 1, ease: Expo.easeOut });
164 | }
165 | 
166 | function getAngle(x1, y1, x2, y2) {
167 | 	var angle = Math.atan2(y1 - y2, x1 - x2);
168 | 	return angle;
169 | }
170 | 
171 | function getPosition(el) {
172 | 	var xPos = 0;
173 | 	var yPos = 0;
174 | 
175 | 	while (el) {
176 | 		if (el.tagName == "BODY") {
177 | 			// deal with browser quirks with body/window/document and page scroll
178 | 			var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
179 | 			var yScroll = el.scrollTop || document.documentElement.scrollTop;
180 | 
181 | 			xPos += (el.offsetLeft - xScroll + el.clientLeft);
182 | 			yPos += (el.offsetTop - yScroll + el.clientTop);
183 | 		} else {
184 | 			// for all other non-BODY elements
185 | 			xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
186 | 			yPos += (el.offsetTop - el.scrollTop + el.clientTop);
187 | 		}
188 | 
189 | 		el = el.offsetParent;
190 | 	}
191 | 	return {
192 | 		x: xPos,
193 | 		y: yPos
194 | 	};
195 | }
196 | 
197 | 
198 | function initialize() {
199 | 
200 | 	email = document.querySelector('#username'), password = document.querySelector('#password'), mySVG = document.querySelector('.svgContainer'), armL = document.querySelector('.armL'), armR = document.querySelector('.armR'), eyeL = document.querySelector('.eyeL'), eyeR = document.querySelector('.eyeR'), nose = document.querySelector('.nose'), mouth = document.querySelector('.mouth'), mouthBG = document.querySelector('.mouthBG'), mouthSmallBG = document.querySelector('.mouthSmallBG'), mouthMediumBG = document.querySelector('.mouthMediumBG'), mouthLargeBG = document.querySelector('.mouthLargeBG'), mouthMaskPath = document.querySelector('#mouthMaskPath'), mouthOutline = document.querySelector('.mouthOutline'), tooth = document.querySelector('.tooth'), tongue = document.querySelector('.tongue'), chin = document.querySelector('.chin'), face = document.querySelector('.face'), eyebrow = document.querySelector('.eyebrow'), outerEarL = document.querySelector('.earL .outerEar'), outerEarR = document.querySelector('.earR .outerEar'), earHairL = document.querySelector('.earL .earHair'), earHairR = document.querySelector('.earR .earHair'), hair = document.querySelector('.hair');
201 | 	caretPos, curEmailIndex, screenCenter, svgCoords, eyeMaxHorizD = 20, eyeMaxVertD = 10, noseMaxHorizD = 23, noseMaxVertD = 10, dFromC, eyeDistH, eyeLDistV, eyeRDistV, eyeDistR, mouthStatus = "small";
202 | 
203 | 	email.addEventListener('focus', onEmailFocus);
204 | 	email.addEventListener('blur', onEmailBlur);
205 | 	email.addEventListener('input', onEmailInput);
206 | 	password.addEventListener('focus', onPasswordFocus);
207 | 	password.addEventListener('blur', onPasswordBlur);
208 | 	TweenMax.set(armL, { x: -93, y: 220, rotation: 105, transformOrigin: "top left" });
209 | 	TweenMax.set(armR, { x: -93, y: 220, rotation: -105, transformOrigin: "top right" });
210 | }
211 | 
212 | window.initialize = initialize;
213 | initialize();
214 | 


--------------------------------------------------------------------------------
/unpentry.jsp:
--------------------------------------------------------------------------------
  1 | <%--
  2 |  *  Copyright (c) 2012-2016 VMware, Inc.  All Rights Reserved.
  3 |  *
  4 |  *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  5 |  *  use this file except in compliance with the License.  You may obtain a copy
  6 |  *  of the License at http://www.apache.org/licenses/LICENSE-2.0
  7 |  *
  8 |  *  Unless required by applicable law or agreed to in writing, software
  9 |  *  distributed under the License is distributed on an "AS IS" BASIS, without
 10 |  *  warranties or conditions of any kind, EITHER EXPRESS OR IMPLIED.  See the
 11 |  *  License for the specific language governing permissions and limitations
 12 |  *  under the License.
 13 | --%>
 14 | <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 15 | <%@ page session="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 16 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 17 | "http://www.w3.org/TR/html4/strict.dtd">
 18 | <html class="base-app-style">
 19 | <!--[if lte IE 8]>
 20 |    <link rel="stylesheet" type="text/css" href="../../resources/css/loginIE8-7.css" />
 21 |  <![endif]-->
 22 |  <!--[if (gte IE 9)|!(IE)]><!-->
 23 |    <!--<link href="../../resources/css/login.css" rel="stylesheet"> -->
 24 |  <!--<![endif]-->
 25 | <head>
 26 |    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 27 |    <meta http-equiv="X-UA-Compatible" content="IE=5, IE=8, IE=10" >
 28 |    <title>Login</title>
 29 | 
 30 |    <script type="text/javascript">
 31 |     // copying JSP variables to JS
 32 |     var protocol="${protocol}";
 33 |     var responseMode="${responseMode}";
 34 |     var tenant_brandname="${tenant_brandname}";
 35 |     var tenant_logonbanner_title = '${tenant_logonbanner_title}'.trim();
 36 |     var tenant_logonbanner_content = '${tenant_logonbanner_content}'.trim();
 37 |     var logonBannerCheckboxEnabled = '${enable_logonbanner_checkbox}'.trim() == 'true' ? true : false;
 38 |     var logonBannerAlertMessage = '${logonBannerAlertMessage}';
 39 |     var searchString ="${searchstring}";
 40 |     var replaceString ='${replacestring}';
 41 |     var error = '${error}';
 42 |     var errorSSPI = '${errorSSPI}'
 43 |     var spn = "${spn}"
 44 |     var cac_endpoint = "${cac_endpoint}";
 45 |     var sso_endpoint = "${sso_endpoint}";
 46 | 
 47 |     var tlsclient_auth = '${enable_tlsclient_auth}';
 48 |     var password_auth = '${enable_password_auth}';
 49 |     var windows_auth = '${enable_windows_auth}';
 50 |     var rsa_am_auth = '${enable_rsaam_auth}';
 51 |     var rsaam_reminder = '${rsaam_reminder}';
 52 |     var rsaam_passcode_label = '${passcode}:';
 53 |     var password_label = '${password}:';
 54 | 
 55 |     if (tlsclient_auth == "true") {
 56 |         var hint_label = '${username_hint}';
 57 |         var username_hint_placeholder = '${username_hint_placeholder}';
 58 |         var username_label = '${username_encoded}';
 59 |         var username_placeholder = '${username_placeholder_encoded}';
 60 |     }
 61 | 
 62 |    </script>
 63 | 
 64 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_common.js"></script>
 65 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_connection.js"></script>
 66 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_base.js"></script>
 67 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_factory.js"></script>
 68 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_config.js"></script>
 69 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_logging.js"></script>
 70 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_session.js"></script>
 71 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_sspi.js"></script>
 72 |    <script type="text/javascript" src="../../resources/js/assets/csd_api_sso.js"></script>
 73 | 
 74 |    <script type="text/javascript" src="../../resources/js/Base64.js"></script>
 75 |    <script type="text/javascript" src="../../resources/js/VmrcPluginUtil.js"></script>
 76 |    <script type="text/javascript" src="../../resources/js/jquery-2.1.4.min.js"></script>
 77 |    <script type="text/javascript" src="../../resources/js/jquery-ui.min.js"></script>
 78 |    <script type="text/javascript" src="../../resources/js/websso.js"></script>
 79 | 
 80 |    <link rel="icon" type="image/x-icon" href="../../resources/img/favicon.ico" />
 81 |    <link rel="SHORTCUT ICON" href="../../resources/img/favicon.ico" />
 82 |    <link rel="stylesheet" type="text/css" href="../../resources/css/jquery-ui.min.css">
 83 | </head>
 84 | <body>
 85 | 
 86 | <script type="text/javascript">
 87 |     if (!isVCLogin()) {
 88 |         document.write('<link rel="stylesheet" type="text/css" href="../../resources/css/login_generic.css">');
 89 |     }
 90 |     else {
 91 |         document.write('<link rel="stylesheet" type="text/css" href="../../resources/css/login.css">');
 92 |     }
 93 | </script>
 94 | 
 95 | 
 96 | <script type="text/javascript">
 97 | //createProbes();
 98 | //createVmrcPluginObject();
 99 | //var _cspId = createCspPluginObject();
100 | 
101 | if (isVCLogin()) {
102 |     document.write("<img id=\"topSplash\" src=\"../../resources/img/AppBgPattern.png\"/>");
103 | 
104 |     document.write("<img id=\"brand\" src=\"../../resources/img/vmwareLogoBigger.png\" />");
105 | }
106 | else {
107 |     document.write("<p id=\"tenantBrand\">"+tenant_brandname+"</p>");
108 | }
109 | 
110 | 
111 | </script>
112 | <!-- Start of vYetti Customization -->
113 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
114 | <link rel="stylesheet" type="text/css" href="../../resources/css/app.component.css">
115 | <form #loginForm="ngForm" (ngSubmit)="login()">
116 |   <div class="svgContainer">
117 |     <div>
118 |       <svg class="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
119 |         <defs>
120 |           <circle id="armMaskPath" cx="100" cy="100" r="100" />
121 |         </defs>
122 |         <clipPath id="armMask">
123 |           <use xlink:href="#armMaskPath" overflow="visible" />
124 |         </clipPath>
125 |         <circle cx="100" cy="100" r="100" fill="#a9ddf3" />
126 |         <g class="body">
127 |           <path fill="#FFFFFF" d="M193.3,135.9c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1 c-10.6,0-20,5.1-25.8,13l0,78h187L193.3,135.9z"
128 |           />
129 |           <path fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoinn="round" d="M193.3,135.9 c-5.8-8.4-15.5-13.9-26.5-13.9H151V72c0-27.6-22.4-50-50-50S51,44.4,51,72v50H32.1c-10.6,0-20,5.1-25.8,13"
130 |           />
131 |           <path fill="#DDF1FA" d="M100,156.4c-22.9,0-43,11.1-54.1,27.7c15.6,10,34.2,15.9,54.1,15.9s38.5-5.8,54.1-15.9 C143,167.5,122.9,156.4,100,156.4z"
132 |           />
133 |         </g>
134 |         <g class="earL">
135 |           <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5">
136 |             <circle cx="47" cy="83" r="11.5" />
137 |             <path d="M46.3 78.9c-2.3 0-4.1 1.9-4.1 4.1 0 2.3 1.9 4.1 4.1 4.1" stroke-linecap="round" stroke-linejoin="round" />
138 |           </g>
139 |           <g class="earHair">
140 |             <rect x="51" y="64" fill="#FFFFFF" width="15" height="35" />
141 |             <path d="M53.4 62.8C48.5 67.4 45 72.2 42.8 77c3.4-.1 6.8-.1 10.1.1-4 3.7-6.8 7.6-8.2 11.6 2.1 0 4.2 0 6.3.2-2.6 4.1-3.8 8.3-3.7 12.5 1.2-.7 3.4-1.4 5.2-1.9"
142 |               fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
143 |           </g>
144 |         </g>
145 |         <g class="earR">
146 |           <g class="outerEar" fill="#ddf1fa" stroke="#3a5e77" stroke-width="2.5">
147 |             <circle cx="155" cy="83" r="11.5" />
148 |             <path d="M155.7 78.9c2.3 0 4.1 1.9 4.1 4.1 0 2.3-1.9 4.1-4.1 4.1" stroke-linecap="round" stroke-linejoin="round" />
149 |           </g>
150 |           <g class="earHair">
151 |             <rect x="131" y="64" fill="#FFFFFF" width="20" height="35" />
152 |             <path d="M148.6 62.8c4.9 4.6 8.4 9.4 10.6 14.2-3.4-.1-6.8-.1-10.1.1 4 3.7 6.8 7.6 8.2 11.6-2.1 0-4.2 0-6.3.2 2.6 4.1 3.8 8.3 3.7 12.5-1.2-.7-3.4-1.4-5.2-1.9"
153 |               fill="#fff" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
154 |           </g>
155 |         </g>
156 |         <path class="chin" d="M84.1 121.6c2.7 2.9 6.1 5.4 9.8 7.5l.9-4.5c2.9 2.5 6.3 4.8 10.2 6.5 0-1.9-.1-3.9-.2-5.8 3 1.2 6.2 2 9.7 2.5-.3-2.1-.7-4.1-1.2-6.1"
157 |           fill="none" stroke="#3a5e77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
158 |         <path class="face" fill="#DDF1FA" d="M134.5,46v35.5c0,21.815-15.446,39.5-34.5,39.5s-34.5-17.685-34.5-39.5V46" />
159 |         <path class="hair" fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M81.457,27.929 c1.755-4.084,5.51-8.262,11.253-11.77c0.979,2.565,1.883,5.14,2.712,7.723c3.162-4.265,8.626-8.27,16.272-11.235 c-0.737,3.293-1.588,6.573-2.554,9.837c4.857-2.116,11.049-3.64,18.428-4.156c-2.403,3.23-5.021,6.391-7.852,9.474"
160 |         />
161 |         <g class="eyebrow">
162 |           <path fill="#FFFFFF" d="M138.142,55.064c-4.93,1.259-9.874,2.118-14.787,2.599c-0.336,3.341-0.776,6.689-1.322,10.037 c-4.569-1.465-8.909-3.222-12.996-5.226c-0.98,3.075-2.07,6.137-3.267,9.179c-5.514-3.067-10.559-6.545-15.097-10.329 c-1.806,2.889-3.745,5.73-5.816,8.515c-7.916-4.124-15.053-9.114-21.296-14.738l1.107-11.768h73.475V55.064z"
163 |           />
164 |           <path fill="#FFFFFF" stroke="#3A5E77" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M63.56,55.102 c6.243,5.624,13.38,10.614,21.296,14.738c2.071-2.785,4.01-5.626,5.816-8.515c4.537,3.785,9.583,7.263,15.097,10.329 c1.197-3.043,2.287-6.104,3.267-9.179c4.087,2.004,8.427,3.761,12.996,5.226c0.545-3.348,0.986-6.696,1.322-10.037 c4.913-0.481,9.857-1.34,14.787-2.599"
165 |           />
166 |         </g>
167 |         <g class="eyeL">
168 |           <circle cx="85.5" cy="78.5" r="3.5" fill="#3a5e77" />
169 |           <circle cx="84" cy="76" r="1" fill="#fff" />
170 |         </g>
171 |         <g class="eyeR">
172 |           <circle cx="114.5" cy="78.5" r="3.5" fill="#3a5e77" />
173 |           <circle cx="113" cy="76" r="1" fill="#fff" />
174 |         </g>
175 |         <g class="mouth">
176 |           <path class="mouthBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"
177 |           />
178 |           <path style="display: none;" class="mouthSmallBG" fill="#617E92" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"
179 |           />
180 |           <path style="display: none;" class="mouthMediumBG" d="M95,104.2c-4.5,0-8.2-3.7-8.2-8.2v-2c0-1.2,1-2.2,2.2-2.2h22c1.2,0,2.2,1,2.2,2.2v2 c0,4.5-3.7,8.2-8.2,8.2H95z"
181 |           />
182 |           <path style="display: none;" class="mouthLargeBG" d="M100 110.2c-9 0-16.2-7.3-16.2-16.2 0-2.3 1.9-4.2 4.2-4.2h24c2.3 0 4.2 1.9 4.2 4.2 0 9-7.2 16.2-16.2 16.2z"
183 |             fill="#617e92" stroke="#3a5e77" stroke-linejoin="round" stroke-width="2.5" />
184 |           <defs>
185 |             <path id="mouthMaskPath" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"
186 |             />
187 |           </defs>
188 |           <clipPath id="mouthMask">
189 |             <use xlink:href="#mouthMaskPath" overflow="visible" />
190 |           </clipPath>
191 |           <g clip-path="url(#mouthMask)">
192 |             <g class="tongue">
193 |               <circle cx="100" cy="107" r="8" fill="#cc4a6c" />
194 |               <ellipse class="tongueHighlight" cx="100" cy="100.5" rx="3" ry="1.5" opacity=".1" fill="#fff" />
195 |             </g>
196 |           </g>
197 |           <path clip-path="url(#mouthMask)" class="tooth" style="fill:#FFFFFF;" d="M106,97h-4c-1.1,0-2-0.9-2-2v-2h8v2C108,96.1,107.1,97,106,97z"
198 |           />
199 |           <path class="mouthOutline" fill="none" stroke="#3A5E77" stroke-width="2.5" stroke-linejoin="round" d="M100.2,101c-0.4,0-1.4,0-1.8,0c-2.7-0.3-5.3-1.1-8-2.5c-0.7-0.3-0.9-1.2-0.6-1.8 c0.2-0.5,0.7-0.7,1.2-0.7c0.2,0,0.5,0.1,0.6,0.2c3,1.5,5.8,2.3,8.6,2.3s5.7-0.7,8.6-2.3c0.2-0.1,0.4-0.2,0.6-0.2 c0.5,0,1,0.3,1.2,0.7c0.4,0.7,0.1,1.5-0.6,1.9c-2.6,1.4-5.3,2.2-7.9,2.5C101.7,101,100.5,101,100.2,101z"
200 |           />
201 |         </g>
202 |         <path class="nose" d="M97.7 79.9h4.7c1.9 0 3 2.2 1.9 3.7l-2.3 3.3c-.9 1.3-2.9 1.3-3.8 0l-2.3-3.3c-1.3-1.6-.2-3.7 1.8-3.7z"
203 |           fill="#3a5e77" />
204 |         <g class="arms" clip-path="url(#armMask)">
205 |           <g class="armL">
206 |             <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5"
207 |               d="M121.3 97.4L111 58.7l38.8-10.4 20 36.1z" />
208 |             <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5"
209 |               d="M134.4 52.5l19.3-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1L146 59.7M160.8 76.5l19.4-5.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-18.3 4.9M158.3 66.8l23.1-6.2c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-23.1 6.2M150.9 58.4l26-7c2.7-.7 5.4.9 6.1 3.5.7 2.7-.9 5.4-3.5 6.1l-21.3 5.7"
210 |             />
211 |             <path fill="#a9ddf3" d="M178.8 74.7l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM180.1 64l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM175.5 54.9l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8zM152.1 49.4l2.2-.6c1.1-.3 2.2.3 2.4 1.4.3 1.1-.3 2.2-1.4 2.4l-2.2.6-1-3.8z"
212 |             />
213 |             <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M123.5 96.8c-41.4 14.9-84.1 30.7-108.2 35.5L1.2 80c33.5-9.9 71.9-16.5 111.9-21.8"
214 |             />
215 |             <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M108.5 59.4c7.7-5.3 14.3-8.4 22.8-13.2-2.4 5.3-4.7 10.3-6.7 15.1 4.3.3 8.4.7 12.3 1.3-4.2 5-8.1 9.6-11.5 13.9 3.1 1.1 6 2.4 8.7 3.8-1.4 2.9-2.7 5.8-3.9 8.5 2.5 3.5 4.6 7.2 6.3 11-4.9-.8-9-.7-16.2-2.7M94.5 102.8c-.6 4-3.8 8.9-9.4 14.7-2.6-1.8-5-3.7-7.2-5.7-2.5 4.1-6.6 8.8-12.2 14-1.9-2.2-3.4-4.5-4.5-6.9-4.4 3.3-9.5 6.9-15.4 10.8-.2-3.4.1-7.1 1.1-10.9M97.5 62.9c-1.7-2.4-5.9-4.1-12.4-5.2-.9 2.2-1.8 4.3-2.5 6.5-3.8-1.8-9.4-3.1-17-3.8.5 2.3 1.2 4.5 1.9 6.8-5-.6-11.2-.9-18.4-1 2 2.9.9 3.5 3.9 6.2"
216 |             />
217 |           </g>
218 |           <g class="armR">
219 |             <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5"
220 |               d="M265.4 97.3l10.4-38.6-38.9-10.5-20 36.1z" />
221 |             <path fill="#ddf1fa" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.5"
222 |               d="M252.4 52.4L233 47.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l10.3 2.8M226 76.4l-19.4-5.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l18.3 4.9M228.4 66.7l-23.1-6.2c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l23.1 6.2M235.8 58.3l-26-7c-2.7-.7-5.4.9-6.1 3.5-.7 2.7.9 5.4 3.5 6.1l21.3 5.7"
223 |             />
224 |             <path fill="#a9ddf3" d="M207.9 74.7l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM206.7 64l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM211.2 54.8l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8zM234.6 49.4l-2.2-.6c-1.1-.3-2.2.3-2.4 1.4-.3 1.1.3 2.2 1.4 2.4l2.2.6 1-3.8z"
225 |             />
226 |             <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M263.3 96.7c41.4 14.9 84.1 30.7 108.2 35.5l14-52.3C352 70 313.6 63.5 273.6 58.1"
227 |             />
228 |             <path fill="#fff" stroke="#3a5e77" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M278.2 59.3l-18.6-10 2.5 11.9-10.7 6.5 9.9 8.7-13.9 6.4 9.1 5.9-13.2 9.2 23.1-.9M284.5 100.1c-.4 4 1.8 8.9 6.7 14.8 3.5-1.8 6.7-3.6 9.7-5.5 1.8 4.2 5.1 8.9 10.1 14.1 2.7-2.1 5.1-4.4 7.1-6.8 4.1 3.4 9 7 14.7 11 1.2-3.4 1.8-7 1.7-10.9M314 66.7s5.4-5.7 12.6-7.4c1.7 2.9 3.3 5.7 4.9 8.6 3.8-2.5 9.8-4.4 18.2-5.7.1 3.1.1 6.1 0 9.2 5.5-1 12.5-1.6 20.8-1.9-1.4 3.9-2.5 8.4-2.5 8.4"
229 |             />
230 |           </g>
231 |         </g>
232 |       </svg>
233 |     </div>
234 |   </div>
235 |   <p id="usernameID" class="loginRow" >
236 |       <span class="loginLabel">${username}</span>
237 |       <input [(ngModel)]="username" id="username" class="margeTextInput" type="text" placeholder="${username_placeholder}"/>
238 |     </p>
239 |     <p id="passwordID" class="loginRow" >
240 |       <span class="loginLabel">${password}:</span>
241 |       <input [(ngModel)]="password" id="password" class="margeTextInput" type="password"/>
242 |     </p>
243 |     <p id="sessionID">
244 |        <label id="checkboxLabel"><input id="sspiCheckbox" disabled="true" type="checkbox" onchange='enableSspi(this);'/>${winSession}</label>
245 |     </p>
246 |     <p id="smartcardID">
247 |        <label id="checkboxLabel"><input id="smartcardCheckbox" disabled="false" type="checkbox" onchange='enableSmartcard(this);'/>${smartcard}</label>
248 |     </p>
249 |     <p id="rsaamID">
250 |        <label id="checkboxLabel"><input id="rsaamCheckbox" disabled="false" type="checkbox" onchange='enableRsaam(this);'/>${rsaam}</label>
251 |     </p>
252 |     <p id="loginButtonRow">
253 |        <input id="submit" class="button blue" type="submit" value=${login} onclick="submitentry()"/>
254 |     </p>
255 |     <p id="logonBannerID">
256 |       <input id="logonBannerCheckbox" type="checkbox" onclick="isBannerChecked()"/>
257 |       <span id="agreementMsg">${iAgreeTo}</span>
258 |       <a id="logonBannerTitle" class="hyphenate" href="javascript:void(0);" onClick="displayLogonBannerDialog()"> ${tenant_logonbanner_title}</a>
259 |     </p>
260 | </form>
261 | <script type="text/javascript" src="../../resources/js/login-animation.js"></script>
262 | <!-- End of vYetti Customization -->
263 | <div id="bg-banner"></div>
264 | <!--
265 | Original vSphere Client Login Form
266 | <div id="loginForm">
267 |    <p id="usernameID" class="loginRow" >
268 |       <span class="loginLabel">${username}:</span>
269 |       <input id="username" class="margeTextInput" type="text" placeholder="${username_placeholder}"/>
270 |     </p>
271 |     <p id="passwordID" class="loginRow" >
272 |       <span class="loginLabel">${password}:</span>
273 |       <input id="password" class="margeTextInput" type="password"/>
274 |     </p>
275 |     <p id="sessionID">
276 |        <label id="checkboxLabel"><input id="sspiCheckbox" disabled="true" type="checkbox" onchange='enableSspi(this);'/>${winSession}</label>
277 |     </p>
278 |     <p id="smartcardID">
279 |        <label id="checkboxLabel"><input id="smartcardCheckbox" disabled="false" type="checkbox" onchange='enableSmartcard(this);'/>${smartcard}</label>
280 |     </p>
281 |     <p id="rsaamID">
282 |        <label id="checkboxLabel"><input id="rsaamCheckbox" disabled="false" type="checkbox" onchange='enableRsaam(this);'/>${rsaam}</label>
283 |     </p>
284 |     <p id="loginButtonRow">
285 |        <input id="submit" class="button blue" type="submit" value=${login} onclick="submitentry()"/>
286 |     </p>
287 |     <p id="logonBannerID">
288 |       <input id="logonBannerCheckbox" type="checkbox" onclick="isBannerChecked()"/>
289 |       <span id="agreementMsg">${iAgreeTo}</span>
290 |       <a id="logonBannerTitle" class="hyphenate" href="javascript:void(0);" onClick="displayLogonBannerDialog()"> ${tenant_logonbanner_title}</a>
291 |     </p>
292 | </div>
293 | -->
294 | <div id="dialogLogonBanner"></div>
295 | 
296 | <div id="productName">
297 |    <script type="text/javascript">
298 |         if (isVCLogin()) {
299 |            //document.write("<img id=\"VCSSO-Title\" src=\"../../resources/img/VCSSO-title.png\" />");
300 |            }
301 |    </script>
302 |    <div id="response" style="display:none"></div>
303 |    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
304 |    <div id="progressBar" style="display:none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../resources/img/Marge-anim-progressbar.gif"></div>
305 | </div>
306 | 
307 | <div id="footer" class="footer">
308 |     <span id="downloadCIPlinkBox" style="display:none">
309 |        <a id="downloadCIPlink" target="_blank">${downloadCIP}</a>
310 |     </span>
311 | </div>
312 | <div id="postForm"></div>
313 | 
314 | <div class="browser-validation-banner" style="visibility: hidden">
315 |    <span class="validation-message-text">${unsupportedBrowserWarning}</span>
316 | </div>
317 | 
318 | <script type="text/javascript">
319 |    if (isVCLogin() && !isBrowserSupportedVC()) {
320 |       $(".browser-validation-banner").css("visibility","visible");
321 |    }
322 | </script>
323 | </body>
324 | </html>
325 | 


--------------------------------------------------------------------------------
/vYetti-Demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lamw/vyetti-vsphere-client-customization/60b95a2e8fa2ad13ea8cd2ba36caf88f00e47f46/vYetti-Demo.gif


--------------------------------------------------------------------------------