Tag Archives: Lightning

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 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:

Invoke Visualforce Page Javascript Method From Lightning Component

Lightning Component:

<!--SampleComponent.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <!--Declare Attributes-->
    <aura:attribute name="vfMsgMethod" type="object" description="this attribute is for visualforce page javascript method"/>
    
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.doAction}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning Controller:

({
    doAction : function(component, event, helper) {
        var msg = 'Welcome to Salesforce Ohana';
        var msgMethod = component.get("v.vfMsgMethod");
        msgMethod(msg, function(){
            //handle callback
        });
    }
})

Lightning App:

<!--SampleApp.app--> 
<aura:application extends="ltng:outApp" access="global">
    <!--Lightning component-->
    <aura:dependency resource="c:SampleComponent"/>
</aura:application>

Visualforce Page:

<apex:page sidebar="false" showHeader="false">
    <apex:includeLightning />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer"/>
    
    <script type="text/javascript">
    //Create Lightning Component
    $Lightning.use("c:SampleApp", function() {
        $Lightning.createComponent("c:SampleComponent", { 
            vfMsgMethod : getMessage, //Method to call from lightning component
        },"LightningContainer", function(component) {
            console.log('Component created');
        });
    });
    
    //Function to call from Lightning Component
    function getMessage(welcomeMsg){
        alert(welcomeMsg);
    }
    </script>
</apex:page>

Output: