CODEWITHSUNDEEP
javascripthtmlcssasp.netvisual-studio
R.Enright
R.Enright

Reputation: 1

Displaying Password Meter Strength Level

enter code here


function passwordScore(password)
var score = 0;
if (!pass)
    return score;
//
var letters = new Object();
for (var i=0; i<pass.length; i++) {
    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
    score += 5.0 / letters[pass[i]];
}
//Checking the variations that have been entered in the password meter.
var variations = {
    Digitals: /\d/.test(pass),
    LowerCaseLetters: /[a-z]/.test(pass),
    UpperCaseLetters: /[A-Z]/.test(pass),
    NonSpaceWords: /\W/.test(pass),
}

varitationCount = 0;
for (var check in varitations) {
    variationCount += (variations[check] == true) ? 1 : 0;
}
score += (variationCount - 1) * 10;

return parseInt(score);
//Checking the password strength score with the name of the strength level.
function checkPasswordStrength(pass) {
    var score = passwordScore(pass);
    if (score > 80)
        return "Very Strong";
    if (score > 60)
        return "Strong";
    if (score > 40)
        return "Good";
    if (score > 20)
        return "Weak";
    if (score > 0)
        return "Very Weak";

    return "";
}
/* The font type, background colour and the margin settings for the body tag*/
body {
    font-family: "Calibri (Body)";
    background-color: #006699;
    margin: 0;
}
/* The font size, padding, margin, text align and background colour settings for the h1 tag*/
h1 {
    font-size: 30px;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: #cccc99;
}
/* The padding, width and the margin settings for the div tag*/
div {
    padding: 10px;
    width: 600px;
    margin: 0 auto;
}
/* The width settings for the myInput function*/
#myInput {
    width: 100%;
}
.Strength{
    display: inline-block;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
    <meta charset="utf-8" />
    <title>Password Meter</title>
    <!--The CSS link tag for the StyleSheet.css file.-->
    <link type="text/css" href="./StyleSheet.css" rel="stylesheet" />
    <!--The script tag for HideorDisplay.js file.-->
    <script src="HideorDisplay.js"></script>
    <!--The script tag for PasswordMeter.js file.-->
    <script src="PasswordMeter.js"></script>
    <!--The script tag for PasswordStrengthLevel.js file.-->
    <script src="PasswordStrengthLevel.js"></script>
    <!--The script tag for Suggestions.js file.-->
    <script src="Suggestions.js"></script>
    <!--The script tag for PasswordIntegrity.js file.-->
    <script src="PasswordIntegrityFacts.js"></script>
</head>
<body>
    <!--The Password Meter header tag.-->
    <h1> Password Meter</h1>
    <div>
        <input type="password" id="myInput" class="input_1, Password" onkeyup="checkPasswordStrength()"><br><br>
        <div class="Strength" id="StrengthLevel" text="Strength Level"></div>
        <div class="Strength" id="StrengthScore" text="Strength Score (0)"></div>
        <input type="checkbox" onclick="passwordVisible()"> Hidden or Visible
    </div>
</body>
</html>

I am currently creating password strength meters in visual studio in ASP.net. The main page is html linking to style sheets and JavaScript files.

The strength level code is coded in JavaScript linked to a HTML page. The requirements of the strength level along with the score is 0 = very weak, 20 = weak, 40 = good, 60 = strong and 80 = very strong.

Currently I am having problems getting the strength level to appear when the program is running because when I am typing the password, nothing is appearing. I don't know how to resolve this.

I have tried to link to the div class id but nothing is happening.

I have looked at a few examples that are written in JavaScript but they are complex to understand. *Can anyone please provide suggestions into resolving this problem or provide a example into structuring the code and linking the function to HTML page?

Upvotes: 0

Views: 707

Answers (2)

Matthew Charlton
Matthew Charlton

Reputation: 1

Add an id called password to the input tag and remove the inline event handler eg.

<input type="password" id="password" class="input_1 Password"><div>

Made a few slight changes to the Password Meter js file

 function scorePassword(pass) {
    var score = 0;
    if (!pass) {
        return score;
    }

    var letters = {};
    for (var i = 0; i < pass.length; i++) {
        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
        score += 5.0 / letters[pass[i]];
    }

    var variations = {
        digitals: /\d/.test(pass),
        lowerCaseLetters: /[a-z]/.test(pass),
        upperCaseLetters: /[A-Z]/.test(pass),
        nonSpaceWords: /\W/.test(pass),
    }

    variationCount = 0;
    for (var check in variations) {
        variationCount += (variations[check] == true) ? 1 : 0;
    }
    score += (variationCount - 1) * 10;

    return parseInt(score);
}

function checkPassStrength(pass) {
    var score = scorePassword(pass);

    if (score > 80) {
        return "Very Strong";
    } else if (score > 60) {
        return "Strong";
    } else if (score > 40) {
        return "Good";
    } else if (score > 20) {
        return "Weak";
    } else if (score <= 10) {
        return "Very Weak";
    } else {
        return "";
    }
}

Add another function to the Password Meter js file to display the values from above.

var password = document.getElementById("password");
password.onkeyup = function () {

    var pass = this.value;
    var strengthLevel = document.getElementById("StrengthLevel");
    var strengthScore = document.getElementById("StrengthScore");

    strengthLevel.innerHTML = checkPassStrength(pass);
    strengthScore.innerHTML = scorePassword(pass);
}

To toggle the input element (toggle password visibility) add an id called passwordVisibility to the checkbox then add another function to the Password Meter js file

var passwordVisibility = document.getElementById("passwordVisibility");
passwordVisibility.onclick = function() {
    var togglePasswordVisibility = document.getElementById("password");
    if (togglePasswordVisibility.type === "password") {
        togglePasswordVisibility.type = "text";
    } else {
        togglePasswordVisibility.type = "password";
    }
}

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$("input").on("keyup",function(){
var pass = $(this).val();
var strength = 1;
var arr = [/.{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.map(arr, function(regexp) {
  if(pass.match(regexp))
     strength++;
});
console.log(strength==1?"very Weak":strength==2?"Weak":strength==3?"medium":strength==4?"good":"very good");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Upvotes: 1

Related Questions