salesforce lightning component site.changepassword method error handling

Question

I am trying to create a change password component using the standard site.changePassword() function . Its is not working as expected as the return type of site.changepassword is of a page reference and the pagereference methods are not supported in @AuraEnabled annotation. Please help me with some sample example for change password custom component

Here the code as follows Component`

<aura:component controller="Hlp_UserModel" implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,forceCommunity:profileMenuInterface" access="global">
 <aura:handler name="init" value="this" action="{!c.doInit}"/>

    <aura:attribute name="userInfo" type="Hlp_UserModel"/> 
    <aura:attribute name="newPassword" type="String"  />
    <aura:attribute name="confirmNewPassword" type="String" />
    <aura:attribute name="oldPassword" type="String"  />
    <aura:attribute name="submitButtonLabel" type="String" />
    <aura:attribute name="errorMessage" type="string" />
    <aura:attribute name="showError" type="string"/>
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
        <div class="slds-media__body">
            <h2>
                <span class="slds-text-heading_small">
                Current User Information
                </span>
            </h2>
        </div>
    </header>    
    <div class="slds-media__body">
        <p class="slds-text-heading_small">Last Name : {!v.userInfo.username}</p>
    </div>
    <div class="slds-media__body">
        <p class="slds-text-heading_small">Email Address : {!v.userInfo.useremail}</p>
    </div>


    <div id="sfdc_password_container" class="sfdc">
        <span id="sfdc_lock" class="login-icon sfdc" data-icon="c"></span>
        <ui:inputSecret label="Old Password" aura:id="OldPassword" placeholder="{!v.oldPassword}" class="input sfdc_passwordinput sfdc" />
    </div>
    <div id="sfdc_password_container" class="sfdc">
        <span id="sfdc_lock" class="login-icon sfdc" data-icon="c"></span>
        <ui:inputSecret label="New Password" aura:id="NewPassword1" placeholder="{!v.newPassword}" class="input sfdc_passwordinput sfdc" />
    </div>
    <div id="sfdc_password_container" class="sfdc">
        <span id="sfdc_lock" class="login-icon sfdc" data-icon="c"></span>
        <ui:inputSecret label="Confirm New Password" aura:id="NewPassword2" placeholder="{!v.confirmNewPassword}" class="input sfdc_passwordinput sfdc"/>
    </div>

        <ui:button aura:id="submitButton" label="Submit" press="{!c.handleChangePassword}" class="sfdc_button"/>
        {!v.errorMessage}
</aura:component>

`

Java script controller

({

  handleChangePassword: function (component, event, helpler) {
        var newpasswordref = component.find("NewPassword1").get("v.value");
        var newpasswordconfirmref = component.find("NewPassword2").get("v.value");
        var oldpasswordref = component.find("OldPassword").get("v.value");
        var action = component.get("c.changePassword");
        var message = component.get("c.changePasswordmessage");
        action.setParams({newPassword:newpasswordref,verifyNewPassword:newpasswordconfirmref,oldPassword:oldpasswordref})
        action.setCallback(this, function(a) {
            var rtnValue = a.getReturnValue();
            if (rtnValue == null) {
                component.set("v.errorMessage", message);
                component.set("v.showError",true);
            }
        });
        $A.enqueueAction(action);
    }
})

Apex class:

global class Hlp_UserModel {
 @AuraEnabled public String changePasswordmessage;
 @AuraEnabled
    public static string changePassword(String newPassword, String verifyNewPassword, String oldPassword) { 
    try{
            PageReference pr = Site.changePassword(newPassword, verifyNewPassword, oldpassword);
            if (pr != null) {
                return 'SUCCESS';
            } else {
                return null;
            }
    } catch (Exception ex) {
        //changePasswordmessage = ex.getMessage();
        System.debug(ex.getMessage());
       // System.debug('subrat'+changePasswordmessage);
        return null;
    }
 }

}

I am trying to achieve the following scenario The exception message I can see in debug log for 2 scenario 1: New password and confirm new password not matching 2: The second one is if the new password is less than 8 char (Error message :Your password must be at least 8 characters long and have a mix of letters and numbers) 3: Old password not matching

I am trying to assign the exception message to the string variable and show it on the page

Can anyone please help me with this

Answer 1

The methods of the Site class are designed to work from Visualforce and within a Site so it is possible that this doesn't work in lightning. If you use visualforce inside lightning component then you will get all error message on UI or you can iterate ApexPages.getMessages() collection and you could convert them into string or List of string.

for (ApexPages.Message m : ApexPages.getMessages()) {
    // Add messages to your response string
}