Tag Archives: Lightning Component

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:

Get Selected Record Type Id in Standard Button Overrides Lightning Component

Implementing lightning:hasPageReference interface, we can access the recordTypeId in lightning JS controller. lightning:hasPageReference provides access to the pageReference attribute.

The pageReference attribute can be populated only for the following page types:

  • standard__component
  • standard__navItemPage (for Lightning component tab only)
  • standard__recordPage
  • standard__objectPage

Example:

Lightning Component:

<aura:component implements="force:hasRecordId,lightning:actionOverride,lightning:hasPageReference">
    <!--Declare Attributes-->
    <aura:attribute name="selectedRecordId" type="Id" />
    
    <!--Declare Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        Selected Record Type Id : {!v.selectedRecordId}
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit: function(component, event, helper) {
        
        //get record type Id
        var recordTypeId = component.get("v.pageReference").state.recordTypeId;
        component.set("v.selectedRecordId", recordTypeId);
        
        //get action name edit/new
        var actionName = component.get("v.pageReference").attributes.actionName;
        console.log('actionName-' + actionName);
        
        //get object API name
        var objectApiName = component.get("v.pageReference").attributes.objectApiName;
        console.log('objectApiName-' + objectApiName);
    },
})

Output:

Get Available Lightning Components In Your Org

  1. To get all available lightning components in your org, My Domain should be enabled in your Org.
  2. Log in to your org.
  3. Add componentReference/suite.app in your org domain URL.
  4. It should look like this :  https://yourorgdomain.lightning.force.com/lightning.force.com/componentReference/suite.app
  5. It will open Salesforce Lightning Component Library.
  6. Here you can see all the available components of your Org along with Salesforce Lightning Component examples.

Lightning Formatted URL

A lightning:formattedUrl component displays a read-only representation of a URL as a hyperlink with an href attribute. The link can be a relative or absolute URL.

Example:

<aura:component>  
    <lightning:formattedUrl value="https://www.google.com" tooltip="Google" label="Click to Open" target="_blank" />
</aura:component>

Output:

Lightning Vertical Navigation

A lightning:verticalNavigation component represents a list of links that’s only one level deep, with support for overflow sections that collapse and expand. Here is an example of Lightning Vertical Navigation.

Apex Class:

public with sharing class AuraSampleController{
    
    @AuraEnabled
    public static List<Account> getAccounts(){
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name, AccountNumber, Industry From Account LIMIT 10];
        return accList;
    }
}

Lightning Component:

<aura:component controller="AuraSampleController" Implements="flexipage:availableForRecordHome,force:hasRecordId">
    
    <!--Declare Attributes-->
    <aura:attribute name="selectedaccId" type="Id" />
    <aura:attribute name="accList" type="Account[]" />
    
    <!--Declare Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <lightning:layout>
            <lightning:layoutItem>
                <lightning:verticalNavigation onbeforeselect="{!c.handleBeforeSelect}"
                                              selectedItem="{!v.selectedaccId}"
                                              onselect="{!c.handleOnSelect}">
                    <lightning:verticalNavigationSection label="Select Account">
                        <aura:iteration items="{!v.accList}" var="acc" indexVar="index">
                            <lightning:verticalNavigationItem label="{!acc.Name}" name="{!acc.Id}" />
                        </aura:iteration>
                    </lightning:verticalNavigationSection>
                </lightning:verticalNavigation>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-medium">
                <p>You have selected : {!v.selectedaccId}</p>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit: function(component, event, helper) {
        helper.getAccountList(component, event);
    },
    
    handleBeforeSelect: function(component, event) {
        //Write your logic before select of any item
    },
    
    handleOnSelect: function(component, event) {
        //Write your logic on select of any item
    }
})

Lightning JS Helper:

({
    getAccountList: function(component, event) {
        var action = component.get("c.getAccounts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                component.set("v.accList", result);
            }
        });
        $A.enqueueAction(action);
    },
})

Output: