Salesforce Lightning: Password Strength Meter
Today we will have a look at how to create a lightning component which analyses the strength of your password. The component only uses the standard lightning tags and no external JS library has been used to achieve this functionality. The functionality is handled completely at the client with no apex code, which makes it performance centric.
To allow the user to enter password, I have used lightning:input with type="password". There is an ochange event configured on this input element which makes a call to JS controller and analyses the password. Once the analysis is completed, it sets a score for the entered password.
To display the strength of the password, I have used below 2 components:
To allow the user to enter password, I have used lightning:input with type="password". There is an ochange event configured on this input element which makes a call to JS controller and analyses the password. Once the analysis is completed, it sets a score for the entered password.
To display the strength of the password, I have used below 2 components:
- lightning:slider
- lightning:progressBar
Both the components use the score which is set by the controller method. If you want to add some chart which displays the strength, you can use JS libraries like chart.js.
PasswordStrengthMeter.cmp
PasswordStrengthMeter.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="password" type="String"/>
<aura:attribute name="score" type="Integer" default="0"/>
<div class="row">
<h2 class="header">Password Strength Meter</h2>
<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<aura:attribute name="password" type="String"/>
<aura:attribute name="score" type="Integer" default="0"/>
<div class="row">
<h2 class="header">Password Strength Meter</h2>
<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>
({
analyzePassword : function(component, event, helper) {
var password = component.get("v.password");
helper.analyzePassword(component, password);
}
})
PasswordStrengthMeterHelper.js
analyzePassword : function(component, event, helper) {
var password = component.get("v.password");
helper.analyzePassword(component, password);
}
})
({
analyzePassword : function(component, pass) {
var score = 0;
if (!pass)
component.set("v.score", score);
// award every unique letter until 5 repetitions
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]];
}
// bonus points for mixing it up
var variations = {
digits: /\d/.test(pass),
lower: /[a-z]/.test(pass),
upper: /[A-Z]/.test(pass),
nonWords: /\W/.test(pass),
}
var variationCount = 0;
for (var check in variations) {
variationCount += (variations[check] == true) ? 1 : 0;
}
score += (variationCount - 1) * 10;
component.set("v.score", score);
}
})
analyzePassword : function(component, pass) {
var score = 0;
if (!pass)
component.set("v.score", score);
// award every unique letter until 5 repetitions
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]];
}
// bonus points for mixing it up
var variations = {
digits: /\d/.test(pass),
lower: /[a-z]/.test(pass),
upper: /[A-Z]/.test(pass),
nonWords: /\W/.test(pass),
}
var variationCount = 0;
for (var check in variations) {
variationCount += (variations[check] == true) ? 1 : 0;
}
score += (variationCount - 1) * 10;
component.set("v.score", score);
}
})
Comments
Post a Comment