In this tutorial, you will learn a couple of techniques related to application passwords. The first one will demonstrate how to hide/show a user’s password on the application login screen using an eye icon in the password page item (as illustrated in the following screenshot), while the second one can be enforced to check password strength.
Hide/Show Password
Execute the following steps to hide/show the user’s password on your application login screen.
1. Open your application's login page and click the password item – mine is named
P9999_PASSWORD. Scroll down to the Advanced section in the properties pane, and enter the
following code in the Post Text
attribute.
<span
id="pwItem"
class="fa
fa-eye pw-item-icon"
onClick="viewPW()"
aria-hidden="true">
</span>
The code sets an id (pwItem) for the password page item. It also
sets an eye icon for the item and the icon’s class to pw-item-icon which will be referenced in step 3 for
styling. When you click this icon, a JavaScript function (viewPW – defined next) is called to hide/show
the password text. ARIA (Accessible Rich Internet Applications) defines a way
to make Web content and Web applications more accessible to people with disabilities.
The aria-hidden property tells screen-readers if they should ignore the element.
The HTML <span> tag is used for applying styles to the
page item.
2.
Next,
click the root node (Page 9999: Login Page) of your login page, and add the
following JavaScript function to the Function and
Global Variable Declaration attribute. The
code hides and displays text that is entered into the password item and shows
the corresponding icon based on the item’s status.
function viewPW()
{
var Vpw =
document.getElementById('P9999_PASSWORD');
var
VsetIcon = document.getElementById('pwItem');
if (Vpw.type != 'password'){
Vpw.type='password';
VsetIcon.className='fa fa-eye pw-item-icon';
}
else
{
Vpw.type='text';
VsetIcon.className='fa fa-eye-slash
pw-item-icon';
}
}
If you run the page now, you will observe
that the eye icon appears outside the password item. Execute the final step
below to make it a part of the password item.
2.
Click
the root node of the login page, scroll down to the CSS section, and add the following code to the Inline attribute.
.pw-item-icon {
float:
right;
margin-left: -30px;
margin-top:
11px;
position:
relative;
z-index: 1;
}
Save and run the page. Type something in
the password field and click the eye icon. The text you type is displayed as
clear text. Click the icon again to hide the password.
Password strength is your application's first line of defense against intruders. It is a measure of the effectiveness of a password against guessing or brute-force attacks. The strength of a password is a function of length, complexity, and unpredictability. Using strong passwords lowers the overall risk of a security breach, but strong passwords do not replace the need for other adequate security controls, such as authorization.
Execute the following steps that will enable you to implement a strong password system for your application.
1.
Create
a blank page. Add a region and two Text Field items to this page. I created
Page 24 and set the following attributes for the following two-page items.
|
Property |
Value – Text Item 1 |
Value – Text Item 2 |
|
Name |
P24_PASSWORD |
P24_STATUS |
|
Type |
Text
Field |
Text
Field |
|
Label |
Password |
Status |
|
Template |
Optional |
Optional |
|
Custom Attributes |
onkeyup="PwStrength(this.value)" |
- |
The onkeyup event occurs when the user releases a key on the
keyboard. In this scenario, a JavaScript function (PwStrength) is called when a user releases a key.
The this.value
argument passes the value entered into the password text field to the function.
The second text field item will be used to display the password strength.
2. Click the root node of your page, and enter the following code in Function and Global Variable Declaration attribute.
function
PwStrength(VpwValue) {
var pwTxt = document.getElementById('P24_PASSWORD');
var status = document.getElementById('P24_STATUS');
//Create
pattern. The JavaScript Array push() Method appends patterns to the
array.
var Vpattern = new Array();
Vpattern.push("[0-9]"); //digits
Vpattern.push("[$@$!%*#?&]"); //special characters
Vpattern.push("[a-z]"); //lowercase
alphabets
Vpattern.push("[A-Z]"); //uppercase
alphabets
var Vok = 0;
//Validate
the pattern
for (var i = 0; i < Vpattern.length; i++)
{
if (new RegExp(Vpattern[i]).test(VpwValue))
{
Vok++;
}
}
//Check
password length
if (Vok > 2 && VpwValue.length
> 8) {
Vok++;
}
//Show password
status using different colors
var Vstatus = "";
var Vcolor = "";
switch (Vok) {
case 0:
case 1:
Vstatus = "Weak";
Vcolor = "#FF2D01"; // red
break;
case 2:
Vstatus = "Good";
Vcolor = "#FF9B01"; // orange
break;
case 3:
case 4:
Vstatus = "Strong";
Vcolor = "#0180FF"; // blue
break;
case 5:
Vstatus = "Very Strong";
Vcolor = "#007C09"; // green
break;
}
pwTxt.innerHTML = Vstatus;
pwTxt.style.color = Vcolor;
status.style.color = 'white';
$x(status).value = Vstatus;
status.style.background = Vcolor;
}
Save and run the page. Enter some text comprising digits, special characters, and lower and upper case alphabets, and observe the status that will be displayed in four different colors. You can create a validation on the P24_STATUS item's value to validate passwords.
