The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and most important, the badge generation feature is also up and running. Now the next important thing from User perspective is that there should be a settings panel where user can see its account details like username, Email & password and he should be able to change them if he want to.
I have implemented the setting panel in Badgeyay where user can see his account details. In this blog, I will be discussing how I implemented Update Password functionality in my Pull Request so that the User can change his Password at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User Password component with help of ember cli.
Step 2:
Make changes in Handlebar of User Password. We will be using semantic UI form for making the changes in Handlebars.
<h2 class="ui header">Password</h2> <h5 class="ui dividing header">Change your password.</h5> <form class="ui form" {{action 'updateUserPassword' on="submit"}}>class="field"> New Passwordclass="fields">class="ten wide field"> {{input type="password" id="newPassword" name=newPassword value=user.password}}</div> </div>class="field"> Verify Passwordclass="fields">class="ten wide field"> {{input type="password" id="newPasswordVerify" name=newPasswordVerify placeholder="Re-enter Password"}}</div> </div> <button type="submit" class="ui basic orange button" tabindex="0"> Save Changes </button> </form>
We have used action on submitting the Form for changing and updating the Password in Database and Firebase.
Step 3:
We will now define the action in user component JS file. We will also add the validations in Form so that empty form cannot be submitted to the server.
import Component from '@ember/component'; export default Component.extend({ init() { this._super(...arguments); }, actions: { updateUserPassword() { let password = this.get('newPassword'); this.get('sendUserPassword')(password); } }, didRender() { this.$('.ui.form') .form({ inline : true, delay : false, fields : { newPassword: { identifier : 'newPassword', rules : [ { type : 'empty', prompt : 'Please enter a password' }, { type : 'minLength[6]', prompt : 'Your password must have at least {ruleValue} characters' } ] }, newPasswordVerify: { identifier : 'newPasswordVerify', rules : [ { type : 'match[newPassword]', prompt : 'Passwords do not match' } ] } } }); } });
Step 4:
We will now configure the controller to customize the action that we have defined above.
....... export default Controller.extend({ routing : service('-routing'), notify : service('notify'), uid : '', actions : { ............... updateUserPassword() { this.get('user').save() .then(() => this.get('notify').success('Password Successfully Updated!')) } } });
Step 5:
We have configured the frontend for sending the details to backend. Now, we have to edit the endpoint so that if Password changes in params, It should change the password and send the response with the updated user schema.
api/controllers/registerUser.py ............... if 'password' in data.keys(): user.password = data['password'] update_firebase_password(user.id, user.password) user.save_to_db()
Now, I am done with doing all the changes in backend API and Frontend.
Step 6:
Now run the Frontend & Backend to see the implemented changes.
- User password Panel
Now, we are done with implementation of Update password Functionality.
Resources:
