Hi,

Below is the code to sign in page.

// component for log in page. 
<aura:component Controller="ContactController">
    
    <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>
------------------------------------------
// application name= Create_Login_Form 


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

--------------------------------------------------------------
 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 - ContactController.apxc

public class ContactController {

    @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 ';
            }
        }
    }
}