Hi All,

Facing issues on displaying record details on detailscomponent.

Event: contactDetailNavgiation:
<aura:event type="APPLICATION">
<aura:attribute name="Contactlist" type="contact[]"/>
</aura:event>

Main component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="c:contactDetailNavgiation" action="{!c.NavigateComponent}"/>
    <div aura:id="div1">
          {!v.body}
   </div>
</aura:component>

Main component controller.js
({
doInit : function(component, event, helper) {
$A.createComponent(
"c:LoginScreen",
{
 
},
function(newCmp){
if (component.isValid()) {
component.set("v.body", newCmp);
}
}
);
},
NavigateComponent : function(component,event,helper) {
    alert('details 1');
$A.createComponent(
"c:detailContact",
{
"contacts" : event.getParam("v.Contactlist")

},          
function(newCmp){
        alert('details 2');

if (component.isValid()) {
    //var cmp = component.find("div1");
component.set("v.body", newCmp);
}
}
);
}
})

Login component:
<aura:component controller="loginController">
        <aura:attribute name="Contactlist" type="Contact[]"/>
    <aura:registerEvent name="navigate" type="c:contactDetailNavgiation"/>

  <div class="slds-col slds-col--padded slds-p-top--large">
  <div aria-labelledby="newcontactform">

  <!-- BOXED AREA -->
  <fieldset class="slds-box slds-theme--default slds-container--small">
     <form class="slds-form--stacked">
      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="email" label="Email"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value=""
                  required="true"/>
          </div>
     </div>

     <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="pwd" label="Password"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value=""
                  required="true"/>
          </div>
      </div>
           <div class="slds-form-element">
          <ui:button label="Submit"
              class="slds-button slds-button--brand"
              press="{!c.clicktoLogin}"/>
      </div>
    </form>
      </fieldset>
</div>
</div>
</aura:component>

login controller.js:
({
    clicktoLogin: function(component, event, helper) {
   alert('in client-Side-process');
        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
       var emailField = component.find("email");
        var emailid = emailField.get("v.value");
        if ($A.util.isEmpty(emailid)){
            validExpense = false;
            emailField.set("v.errors", [{message:"Email can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            emailField.set("v.errors", null);
        }
          var pwdField = component.find("pwd");
        var password = pwdField.get("v.value");
        if ($A.util.isEmpty(password)){
            validExpense = false;
            pwdField.set("v.errors", [{message:"Password can't be blank."}]);
        }
        else {
            pwdField.set("v.errors", null);
        }

        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
        if(validExpense){
            var newContact = component.get("v.Contactlist");
           console.log("login : " + JSON.stringify(newContact));
            helper.loginHelper(component);
        }
    },
})

Login Helper.js
({
    loginHelper: function(component,Callback) {
           alert('in client-Side-Helper');
    var action = component.get("c.login");
        console.log('after method called123');
        action.setParams({ strEmail : component.find("email").get("v.value") , strpwd : component.find("pwd").get("v.value")});       

action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var contacts = component.get("v.Contactlist");
            console.log("helper Contact: " + JSON.stringify(contacts));
            contacts.push(response.getReturnValue());
            component.set("v.Contactlist", contacts);
             var evt = $A.get("e.c:contactDetailNavgiation");
            evt.fire();
        }
    }); 
    $A.enqueueAction(action);
},      
})

Details Component:
<aura:component controller="loginController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
    <!--aura:handler name="init" value="{!this}" action="{!c.doInit}"/-->    
        <aura:attribute name="contacts" type="contact[]"/> 
my details:{!v.contacts}
     <aura:iteration items="{!v.contacts}" var="singleCon">
       
 <article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media--center slds-has-flexi-truncate">
        <h2>Detail contact:
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">{!singleCon.FirstName} &nbsp;{!singleCon.LastName}</span>
          </a>
        </h2>
    </header>
  </div>
  <div class="slds-card__body">
      <p>Email: {!singleCon.Email}</p>
      <p>Phone: {!singleCon.Phone}</p>
      <p>MailingStreet: {!singleCon.MailingStreet}</p>
      <p>MailingCity: {!singleCon.MailingCity}</p>
      <p>MailingState: {!singleCon.MailingState}</p>
      <p>MailingPostalCode: {!singleCon.MailingPostalCode}</p>
      <p>MailingCountry: {!singleCon.MailingCountry}</p>
      <p>Password: {!singleCon.Password__c}</p>
      <p>Account Name: {!singleCon.Account.Name}</p>
  </div>
</article>
    
    </aura:iteration>
</aura:component>

Server side controller:
public class loginController {

    @AuraEnabled
    public static Contact login(string strEmail, string strpwd)
    {
        return [SELECT FirstName,LastName,Account.Name,Email,Phone,MailingStreet,MailingCity,MailingState,MailingPostalCode,MailingCountry,Password__c ,accountId FROM contact where  Email=:strEmail AND Password__c=:strpwd limit 1];
     }
      
}

Please help me to know what i am missing here and also help me to show error message on login page if user entered email or password is not invalid.
​
Regards,
Shaik