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>

ava 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)

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 

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

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