The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and the 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 Username functionality in my Pull Request so that the User can change his username at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User account component with help of ember cli.
$ ember g component user-component/user-account
Step 2:
Make changes in Handlebar of User Account. We will be using semantic UI form for making the changes in Handlebars.
// user-account.hbs <h2 class="ui dividing header">Account</h2> <form class="ui form" {{action 'updateUserName' on="submit"}}>class="ui field"> Usernameclass="ui fields">class="ten wide field"> {{input type="text" id="profileName" name=profileName value=user.username}}</div> </div>class="ui field"> Emailclass="ui fields">class="ten wide disabled field"> {{input type="email" name=email value=user.email}}</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 username 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: { updateUserName() { let profileName = this.get('profileName'); this.get('sendUserName')(profileName); } }, didRender() { this.$('.ui.form') .form({ inline : true, delay : false, fields : { username: { identifier : 'profileName', rules : [ { type : 'empty', prompt : 'Please enter a valid username' } ] } } }); }});
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 : { …………... updateUserName(profileName) { const _this = this; const user = this.get('store').peekAll('user'); user.forEach(user_ => { _this.set('uid', user_.get('id')); }); _this.get('user').save(); _this.get('notify').success('Username 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 username is change in params, It should change the username and send the response with the updated username.
api/controllers/registerUser.py …………... if 'username' in data.keys(): user.username = data['username'] update_firebase_username(user.id, user.username) 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 Account Panel
Now, we are done with implementation of Update Username Functionality.
Resources:
