1. Overview
This document will explain about the detailed process involved in detecting password strength in Oracle APEX Using Java Script.
2. Technologies and Tools Used
The following technologies has been used to achieve the password strength detection.
- Oracle APEX
- JavaScript
- CSS
3. Use Case
Password strength indicators are visual cues provided to users while they are creating or changing their passwords. These indicators give feedback on the quality and security of the chosen password. The goal is to encourage users to select strong and complex passwords that are less susceptible to being guessed or cracked by attackers.
4. Steps with screenshot
Steps to be followed,
Step1: Create a new page in oracle APEX and then create two page items named “P15_ENTER_PASSWORD” and “P15_STRENGTH”.
P15_ENTER_PASSWORD – To enter the password
P15_STRENGTH – To capture the output which is returned by the JS function(which will validate the password strength).
Step 2: Write a JavaScript function to validate the password strength in the Page level function and global variable declaration section as follows.
function predictPsswdStrgh() {
setInterval(
function passwordStrenthDetector() {
var passwordElem = document.getElementById(“P15_ENTER_PASSWORD”);
var password = passwordElem.value;
var validationPattern = new Array();
validationPattern.push(“[0-9]”);
validationPattern.push(“[$@$!%*#?&]”);
validationPattern.push(“[a-z]”);
validationPattern.push(“[A-Z]”);
var strength = 0;
for (var i = 0; i < validationPattern.length; i++) {
if (new RegExp(validationPattern[i]).test(password)) {
strength++;
}
}
if (strength > 2 && password.length > 8) {
strength++;
}
var strengthStatus = “”;
var strengthColor = “”;
switch (strength) {
case 0:
case 1:
strengthStatus = “Weak”;
strengthColor = “#FF2D01”; // red
break;
case 2:
strengthStatus = “Good”;
strengthColor = “#FF9B01”; // orange
break;
case 3:
case 4:
strengthStatus = “Strong”;
strengthColor = “#0180FF”; // blue
break;
case 5:
strengthStatus = “Very Strong”;
strengthColor = “#007C09”; // green
break;
}
var strengthDisplay = document.getElementById(“P15_STRENGTH”);
strengthDisplay.style.color = “white”;
strengthDisplay.style.backgroundColor = strengthColor;
strengthDisplay.value = strengthStatus;
passwordElem.style.color = strengthColor;
passwordElem.style.fontWeight = “500”;
}, 1
)
}
predictPsswdStrgh();
Step 3: Enter the password whichever you like in the P15_ENTER_PASSWORD page item and
You will see that the password strength will be displayed in the P15_STRENGTH page item
Like weak,good,strong and very strong and also based on the password strength status the bg color of the page item will also get changed according to the status as follows.
5. Conclusion
In conclusion, integrating a password strength detector in Oracle APEX applications promotes a security-first approach and empowers users to make informed choices when creating passwords. It helps organizations improve their overall security posture and protect user accounts from unauthorized access and potential security breaches. By providing a user-friendly experience and educating users about strong password practices, the password strength detector contributes to a safer online environment for both users and applications.