Implementing “Change Password” API in Open Event Frontend
In Open Event Frontend, users can change the password for their account in the ‘Settings’ section. Changing one’s password will require the previous password of the same account which ensures the security. To implement change in password API, we created a REST endpoint here since the password cannot be included in the user model and thereby exposed to the client.
There is also a check on the server side of the old password. Thus, if the old password entered matches the one on the server, the post is successful and the server saves the new password. We achieve this as follows:
We have a change password form located at ‘settings/change-password’, which contains three input fields for old password, new password and confirm new password.
On submitting the form, we pass the action from the component to the controller.
Components consist of two parts: a template written in Handlebars, and a source file written in JavaScript that defines the component’s behavior.
Controllers behave like a specialized type of Component that is rendered by the router when entering a Route.
We could have handled this action in component itself. But, Ember JS’ main principle is DDAU i.e data down actions up. That is the main reason why we handle the action in out controller.
submit() {
this.onValid(() => {
this.sendAction('changePassword', this.getProperties('passwordCurrent', 'passwordNew'));
});
}
Thus, we handle the action in our controller as follows:
changePassword(passwordData) {
this.set('isLoading', true);
let payload = {
'data': {
'old-password' : passwordData.passwordCurrent,
'new-password' : passwordData.passwordNew
}
};
this.get('loader')
.post('/auth/change-password', payload)
.then(() => {
this.get('notify').success(this.l10n.t('Password updated successfully'));
})
.catch(error => {
if (error.error) {
this.get('notify').error(this.l10n.t(error.error));
} else {
this.get('notify').error(this.l10n.t('Unexpected error. Password did not change.'));
}
})
.finally(() => {
this.set('isLoading', false);
this.setProperties({ 'passwordCurrent': '', 'passwordNew': '', 'passwordRepeat': '' });
});
}
Here, we are getting the old password and the new password passed from the form and making a POST to the endpoint:
v1/auth/change-password
If the old password check goes successful on the server side, the server returns a successful response:
{
"email": "example@example.com",
"id": "1",
"name": "example",
"password-changed": true
}
Thus, the user can change password in Open Event Frontend.
Resources: Docs on loader service in Ember JS
You must be logged in to post a comment.