Hi Guys , I am creating a custom lightning component for change password page. Can anyone share me the code for change password sample controller

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

February 26, 2018
·
Like
0
·
Follow
1

Best Answer chosen by subrat panda 21

Nagendra (Salesforce Developers)
Hi Subrat,

Please try the sample code below and tweak it as per your requirement which should probably help you to start off with.

Component Code:
<aura:component implements="forceCommunity:availableForAllPageTypes" controller="B2B_Partners_Form_Controller"> <aura:attribute name="isManditory" type="boolean" default='false' access="public" /> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="labels" type="Object" description="labels of the fields"/> <aura:attribute name="stepnumber" access="public" type="integer" description="number of step"/> <aura:attribute name="checked" access="public" type="boolean" description="checkbox input" default="false"/> <aura:attribute name="highestNumber" access="public" type="integer" description="highestNumber"/> <aura:attribute name="password" type="String" default="" /> <aura:attribute name="oldPassword" type="String" default="" /> <aura:attribute name="terms" type="boolean" default="" />  <div class="slds-p-top--xx-large"> <div class="slds-grid start_middle"> <div class="slds-col slds-card slds-size_1-of-2 slds-p-left--xx-large "> <div class="slds-p-right--xx-large "> <div class=" slds-p-top--large slds-p-bottom--medium slds-text-heading--large boldFont">{!$Label.c.B2B_Partners_SetupPassword}</div><br/> <div class="slds-p-top--large "> <div class="slds-grid slds-has-divider--bottom bookFont"> <lightning:input type="Password" label="Your current password" value="{!v.oldPassword}" aura:id="inputOldPasswordSecret" onchange="{!c.onKeyUp}" class="border widthPassword slds-show" name="inputPasswordSecret" /> <lightning:input value="{!v.oldPassword}" label="Your current password" aura:id="inputOldPasswordText" onchange="{!c.onKeyUp}" class="border input widthPassword slds-hide sfdc" name="inputPasswordText" /> <div class="slds-align--right"> <div class="slds-clearfix"> <div class="slds-p-top--large slds-float--right"> <a href="javascript:void(0);" onmousedown="{!c.toggleOldPassword}" onmouseup="{!c.toggleOldPassword}"> <lightning:icon iconName="utility:preview" size="small" class=""/> </a> </div> </div> </div> </div> </div> <div class="slds-p-top--large "> <div class="slds-grid slds-has-divider--bottom bookFont"> <lightning:input type="password" label="{!$Label.c.B2B_Partners_Choose_Password}" value="{!v.password}" aura:id="inputPasswordSecret" onchange="{!c.onKeyUp}" class="border widthPassword slds-show" name="inputPasswordSecret" /> <lightning:input value="{!v.password}" label="{!$Label.c.B2B_Partners_Choose_Password}" aura:id="inputPasswordText" onchange="{!c.onKeyUp}" class="border input widthPassword slds-hide sfdc" name="inputPasswordText" /> <div class="slds-align--right"> <div class="slds-clearfix"> <div class="slds-p-top--large slds-float--right"> <a href="javascript:void(0);" onmousedown="{!c.togglePassword}" onmouseup="{!c.togglePassword}"> <lightning:icon iconName="utility:preview" size="small" class=""/> </a> </div> </div> </div> </div> </div> <div class=" slds-m-top--large slds-text-align--right slds-p-bottom--medium">  <lightning:button label="Cancel" variant="bare" onclick="{!c.onClickCancel}" iconName="{!$Resource.B2B_Partners_goBack}" class="slds-m-horizontal--small buttonSize boldFontBlue"> <div class="slds-grid"> <div class="slds-col"> <img class="goBack slds-m-right--x-small" src="{!$Resource.B2B_Partners_goBack}"/> </div> <div class="slds-col slds-m-right--medium previousColor"> <p>{!$Label.c.B2B_Partners_Previous}</p> </div> </div> </lightning:button>  <lightning:button label="Save changes" variant="brand" onclick="{!c.onClickSave}" class="sfdc_button slds-p-left--large slds-p-right--large borderButton mediumFont"/> </div> </div> </div> </div> </div>
Controller:
onClickSave: function(component, event, helper){ helper.savePassword(component, event, helper); }
Helper:
savePassword: function(component, event, helper){ var password = component.get ('v.password'); var password2 = component.get ('v.password'); var oldPassword = component.get ('v.oldPassword'); var action = component.get("c.changePassword"); action.setParams({ "password": password, "password2": password2, "oldPassword": oldPassword }); action.setCallback(this,function(a){ var state = a.getState(); console.log('helper 3') if(state == "SUCCESS"){ console.log('succes') } else if (state =="ERROR"){ component.set('v.message', 'echt niet'); } }); $A.enqueueAction(action); },
Apex Class:
@AuraEnabled public static String changePassword(String password, String password2, String oldPassword){ return JSON.serialize(Site.changePassword(password, password2, oldPassword)); }
Hope this helps.

Thanks,
Nagendra

February 26, 2018
·
Like
0
·
Dislike
0

This was selected as the best answer

subrat panda 21
@Nagendra
I tried the same but
1: I can see you have Hard coded the error message in the Java script handler
2: The APEX method is returning the JSON .

so it was not easy for me to access the JSON and get the error message on the component.

I tried doing in beow way
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)

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

Can you please help me with this

February 27, 2018
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Hi Guys , I am creating a custom lightning component for change password page. Can anyone share me the code for change password sample controller

All Answers

You need to sign in to do that.