Hi Friends, Today we will see a Lightning component example that shows, how to create a lightning component which analyses the strength of the password. This lightning component only used standard lightning tags, there is no external JS library has been used in this example. Whole functionality is handled at the client side with no apex code, which makes it performance-centric. So let’s get started,

Password Strength Meter

Step 1: Login to your Salesforce Org. and open developer console.

Step 2: Navigate to File | New | Lightning Component and create a Lightning Component called PasswordStrengthMeter. Replace the following markup in the Lightning Component. 

PasswordStrengthMeter.cmp
 <aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="password" type="String"/>
    <aura:attribute name="score" type="Integer" default="0"/>
    
    <br/><center><u><span style="font-size:18px">Password Strength Meter</span></u> </center><br/>    
    <div class="row">       
        <lightning:input name="password" label="Enter your password" value="{!v.password}"
                         onchange="{!c.analyzePassword}" type="password"/>
    </div>
    
    <div class="row">
        <lightning:slider label="Password Strength" value="{!v.score}" disabled="true"/>
        <lightning:progressBar value="{!v.score}" size="large" />
    </div>
 </aura:component>
PasswordStrengthMeterController.js 
 ({
    analyzePassword : function(component, event, helper) {
        var password = component.get("v.password");
        helper.analyzePassword(component, password);
    }    
 })
PasswordStrengthMeterHelper.js
 ({
    analyzePassword : function(component, password) {        
        var score = 0;
        if (!password)
            component.set("v.score", score);        
       
        var letters = new Object();
        for (var i=0; i<password.length; i++) {
            letters[password[i]] = (letters[password[i]] || 0) + 1;
            score += 5.0 / letters[password[i]];
        }       
       
        var variations = {
            digits: /\d/.test(password),
            lower: /[a-z]/.test(password),
            upper: /[A-Z]/.test(password),
            nonWords: /\W/.test(password),
        }  
        
        var variationCount = 0;
        for (var check in variations) {
            variationCount += (variations[check] == true) ? 1 : 0;
        }
        score += (variationCount - 1) * 10;        
        component.set("v.score", score);        
    }
 })
Step 3: Go to File | New | Lightning Application and create a Lightning Application called Preview. Replace the following markup in the Lightning Application. 
 <aura:application extends="force:slds">    
    <c:PasswordStrengthMeter/>    
 </aura:application>
Step 4: Click on Preview button from Right Side Pallete 

Output:


See also:

Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.