Tag Archives: Password Check

Password Strength Check in Lightning Component

Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <!--Declare Attributes-->
    <aura:attribute name="password" type="String"/>
    <aura:attribute name="passwordStrength" type="String" default="Very Weak"/>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <div class="slds-text-align_center slds-text-heading_medium">Password Strength Check</div>
        <lightning:input name="password" label="Password" value="{!v.password}" onchange="{!c.checkPasswordStrength}" type="password"/>
        <br/>
        <lightning:badge label="{!v.passwordStrength}" aura:id="psBadge" class="slds-theme--error" />
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    checkPasswordStrength : function(component, helper) {
        
        //Get password
        var password = component.get("v.password");
        
        //Password strength
        let strength = {
            1: 'Very Weak',
            2: 'Weak',
            3: 'Medium',
            4: 'Strong',
            5: 'Very Strong'
        };
        
        //Password Strength Check
        let strengthValue = {
            'caps': false,
            'length': false,
            'special': false,
            'numbers': false,
            'small': false
        };
        
        //Password strength styles
        let passwordStrengthStyle = {
            0: 'slds-theme--error',
            1: 'slds-theme--error',
            2: 'slds-theme--warning',
            3: 'slds-theme--info',
            4: 'slds-theme--alt-inverse',
            5: 'slds-theme--success'
        };
        
        //Check Password Length
        if(password.length >= 8) {
            strengthValue.length = true;
        }
        
        //Calculate Password Strength
        for(let index=0; index < password.length; index++) {
            let char = password.charCodeAt(index);
            if(!strengthValue.caps && char >= 65 && char <= 90) {
                strengthValue.caps = true;
            } else if(!strengthValue.numbers && char >=48 && char <= 57){
                strengthValue.numbers = true;
            } else if(!strengthValue.small && char >=97 && char <= 122){
                strengthValue.small = true;
            } else if(!strengthValue.numbers && char >=48 && char <= 57){
                strengthValue.numbers = true;
            } else if(!strengthValue.special && (char >=33 && char <= 47) || (char >=58 && char <= 64)) {
                strengthValue.special = true;
            }
        }
        
        let strengthIndicator = 0;
        for(let metric in strengthValue) {
            if(strengthValue[metric] === true) {
                strengthIndicator++;
            }
        }
        
        //get badge
        var psBadge = component.find('psBadge');
        
        //Remove style
        for(let strengthStyle in passwordStrengthStyle) {
            $A.util.removeClass(psBadge, passwordStrengthStyle[strengthStyle]);
        }
        
        //Add style
        $A.util.addClass(psBadge, passwordStrengthStyle[strengthIndicator]);
        
        //set password strength
        component.set("v.passwordStrength", strength[strengthIndicator]);
    }
})

Output: