+ Start a Discussion
Shubham Panda 7Shubham Panda 7 

how to create login page in lightning component

hello,
can anybody help me to create login page in lightning compponent. i'm new to lightning so am unaware of this.
Rahul KumarRahul Kumar (Salesforce Developers) 
Hi Shubham,

To customize your login page with your company branding. such as.. company logo, color, and right-side content. Hope it helps.

Please mark it as best answer if the information is informative.so that question is removed from an unanswered question and appear as a proper solution.

Thanks
Rahul Kumar
Deepali KulshresthaDeepali Kulshrestha
Hi Shubham,


You can create login page using below code please try:

------------------------------------------
This is component - Create_Login_Form.cmp

<aura:component Controller="Contact_Controller">
    
    <aura:attribute name="Username" type="String"/>
    <aura:attribute name="Password" type="String"/>                
    
    
    <div class="slds-form-element slds-align_absolute-center slds-m-top_x-large" style="margin-top:200px;">
        <div class="slds-col slds-size_6-of-12" style="background-color:white;">
            <form>
                <div class="slds-align_absolute-center slds-m-top_small slds-text-heading_large">
                    <span>LOGIN HERE</span>
                </div>
                
                <div class="slds-form-element__control">
                    <lightning:input label="Username" name="username" value="{!v.Username}" required="true" />
                </div>
                
                <div class="slds-form-element__control">
                    <lightning:input label="Password:" type="password" name="password"  value="{!v.Password}" required="true" />
                </div>
                
                <div class="slds-align_absolute-center" style="height:4rem">
                    <lightning:button variant="Brand" label="Login" onclick="{!c.userLogin}"/>
                </div>
            </form>
        </div>
    </div>
</aura:component>
------------------------------------------
This is application - CreateLoginForm.app


<aura:application extends="force:slds">
    <c:Create_Login_Form />
</aura:application>

--------------------------------------------------------------
This is javascript controller - Create_Login_FormController.js

({
    userLogin : function(component, event, helper) {
        
        var uname = component.get("v.Username");
        var upass = component.get("v.Password");
        var action = component.get("c.getDetails");
        
        
        action.setParams({
            username : uname,
            password :upass
        });
        
        action.setCallback(this, function(a){
            alert(a.getReturnValue());
            console.log('The field list is :'+JSON.stringify(a.getReturnValue()));
        });
        
        $A.enqueueAction(action);
        component.set("v.uname",'');
        component.set("v.pass",'');
    }
})
----------------------------------------------------
This is controller class - Contact_Controller.apxc

public class Contact_Controller {

    @AuraEnabled
    public static String getDetails(String username, String password)
    { 
        List<Contact> con_List=[Select Id,Username__c,Password__c from Contact where Username__c =: username Limit 1];
        if(con_List.size() == 0)
        {
           return 'User does not exist'; 
        }
        else
        {
            if(con_List[0].Password__c==password)
            {
                return 'Login successfull!!!!';
            }
            else
            {
                return 'Invalid password please try again!!!!';
            }
        }
    }
}


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com