While labeling of Login page

This document is applicble to Helical Insight version 5.0 and onwards.

In this document we are going to use JS and CSS to customize the login page. We use CSS for styling and JS for changing the actual content of an element in the DOM.

Customization with CSS :

1. To style the total background of the login page:

Code :

.login-page-wrapper{
  		background-color : orange !important;
}

2. To Style the lables :

Code :

	
label{
  			background-color : red !important;
}

3. To style the bottom login form action :

Code :

.ant-row.ant-row-space-around.login-form-actions{
  background-color : gray !important;
  display : none !important;
}

4. To Style the left side login form :

Code :

form.ant-form.ant-form-vertical.main-login-form{
  background-color : lightgray !important;
}

5. To Style the login form inputs :

Code :

.login-form-item input{
  		background-color: gainsboro;
}

6. To style the login button :

Code :

.login-form-item button.ant-btn.ant-btn-primary{
  	background-color : brown !important;
}

This ids can also used in js for more customization.

Customization with JS:

In the js there are two function one is responsible for change the text/styling as we want and other one is responsible for checking whether the element we need is present or not in the DOM.

1. LoginPageElementChecker
2. LoginPageUIUpdate

• LoginPageElementChecker will check whether the element we need is present in the DOM or not. If it is present it will return the element to where we call this function from.
• We must pass the address of element we need to check to this function(class/id/data-testid) as a prameter
• We call this function from LoginPageUIUpdate when we are storing a element in a variable and modifying it.

LoginPageUIUpdate (the below code will go into this function) :

1. To change the image(right side) :

let imgEl = await LoginPageElementChecker('[data-testid="hi-login-index-page"] .login-page-placeholder .ant-image-img');
        imgEl.setAttribute('src', 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg')

2.To change the the text on the right side image :

        let textEl = await LoginPageElementChecker('h1.ant-typography.login-page-text');
        textEl.textContent = 'Type the content'

3. To change the logo :

        let logoEl = await LoginPageElementChecker('img.ant-image-img.login-form-logo ');
        logoEl.setAttribute('src', 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg')

4. To change the text beside the logo :

        let logoTextEl = await LoginPageElementChecker('.ant-typography.login-form-logo-text');
        logoTextEl.textContent = 'Type Content'

5. To change the text inside the login button :

        let loginBtnEl = await LoginPageElementChecker('.login-form-item button.ant-btn.ant-btn-primary');
        loginBtnEl.textContent = 'Type Content'

6. To change the organization logo :

        let orgLogoEl = await LoginPageElementChecker('img.ant-image-img.org-logo');
        orgLogoEl.setAttribute('src', 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg')

7. To change the organization Heading(lable):

        let orgHeadingEl = await LoginPageElementChecker('form.ant-form.ant-form-vertical.main-login-form > div:nth-child(2) label');
        orgHeadingEl.textContent = 'Type Content';

8. To change the User logo :

        let userLogoEl = await LoginPageElementChecker('img.ant-image-img.user-logo');
        userLogoEl.setAttribute('src', 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg')

9.To change the user Heading(label) :

        let userHeadingEl = await LoginPageElementChecker('form.ant-form.ant-form-vertical.main-login-form > div:nth-child(3) label');
        userHeadingEl.textContent = 'Type Content';

10. To change the password Logo :

        let passLogoEl = await LoginPageElementChecker('img.ant-image-img.password-logo');
        passLogoEl.setAttribute('src', 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg')

11. To change the password Heading(label) :

        let passHeadingEl = await LoginPageElementChecker('form.ant-form.ant-form-vertical.main-login-form > div:nth-child(4) label');
        passHeadingEl.textContent = 'Type Content';

**If You want to add more js customization make sure it is present in format given in the sample code for each element.

• Use unique variable
• Use await keyword and call the LoginPageElementChecker function with id of the element you want to customize.

** Sample Code **

For JS :

File that contains the js Code : jsCode.txt

This code will be pasted in loginbody.jsp file (path : “..\hi\apache-tomcat-9\webapps\hi-ee\WEB-INF\jsp\login”)

1. First make a script tag in the loginbody.jsp file like below and paste the code.
   <script>paste the contents of the jsCode.txt file</script>
2. You can add more js code inside this script tag also

For Css :

File that contains the CSS code : csCode.txt

This code will be pasted in 2.Chunk.css file(path : …\hi\apache-tomcat-9\webapps\hi-ee\css)

You can add more css customizations in this file with proper element id.

Make sure that there is no collision between element classes.