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:
  • 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
<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
({
analyzePassword : function(component, event, helper) {
        var password = component.get("v.password");
helper.analyzePassword(component, password);
}

})
PasswordStrengthMeterHelper.js
({
    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

Popular posts from this blog

Salesforce Hacks: System.LimitException: Too many queueable jobs added to the queue: 2

-
Queueable classes are great to use and provides a wide range of advantages when compared to future methods. But there are some undocumented limitations which you will come across if you are using Queueable classes extensively inside your batch classes. Lets take an example of badly written trigger on Account.  trigger AccountTrigger on Account (before insert) {     for(Account acc: Trigger.new){         Database.executeBatch(new CreateContactBatch(), 2);     } }   The above trigger calls a batch class for every account record that gets inserted in database. So if you insert N accounts in a single transaction via dataloader or anonymous block or through any other means, the trigger will execute the batch class N number of times. Below is the code for batch class: global class CreateContactBatch implements Database.Batchable<sObject> {          global Database.QueryLocator start(Database.BatchableContext BC) {         String query = 'SELECT Id FROM Account'
Read more

Salesforce Lightning: Countdown timer

-
Image
Today we will have a look at how to create a lightning component for countdown timer which can be used on pages where an operation needs to be completed within a specific time period. Example, an online exam or a banking transaction which expires after a specific time period. The component contains a datetime field which represents the end time. Once the user selects the date and time and clicks on Start Timer button, the countdown timer will start. Below is the lightning component: CountdownTimer.cmp <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >       <aura:attribute name="endTime" type="String"/>       <aura:attribute name="timeLeft" type="String"/>       <lightning:tile label="Time Left" class="slds-page-header">         {!v.timeLeft}     </lightning:tile>
Read more

Building an Org Role Hierarchy component in LWC

-
Image
You might have observed that the role hierarchy which gets displayed in the org (Setup > Users > Roles) is still displayed using a VF component. Today, we will see how to create the same role hierarchy using LWC and Apex. LWC provides us with a component called lightning-tree which displays a nested tree. We will make use of this component to display the role hierarchy in a tree structure. In Apex, we will query all the user roles and form a JSON structure which will be fed to the lightning-tree component. Let's first see the LWC component - roleHierarchy: roleHierarchy.html <template> <div class="slds-p-around_medium lgc-bg"> <lightning-tree items={roles} header="Roles"> </lightning-tree> </div> </template> Here we have used the lightning-tree component which will display the data in a tree structure. The items attribute is of type Object which has nested i
Read more