added ability to change username

app/client/client.js

@@ -96,6 +96,7 @@ Template.settings.events({
 });
 
 Template.profile.events({
+    //Edit reak name
     "click #edit-name": function(){
         $("#name").hide();
         $("#name-div").show();
@@ -120,6 +121,33 @@ Template.profile.events({
         $("#edit-name").show();
         $("#cancel-edit").hide();
         $("#input-name").val("");
+    },
+    //Edit username
+    "click #edit-username": function(){
+        $("#username").hide();
+        $("#username-div").show();
+        $("#edit-username").hide();
+        $("#cancel-username").show();
+    },
+    "click #submit-username": function(){
+        var user = Meteor.user()
+        $("#username").show();
+        $("#username-div").hide();
+        $("#edit-username").show();
+        $("#cancel-username").hide();
+        var username = user.username;
+        var newUserName = $("#input-username").val();
+        $("#profile-name").text(newUserName)
+        $("#username").text("Username: " + newUserName);
+        $("#input-username").val("")
+        Meteor.call("updateUserName", username, newUserName);
+    },
+    "click #cancel-username": function(){
+        $("#username").show();
+        $("#username-div").hide();
+        $("#edit-username").show();
+        $("#cancel-username").hide();
+        $("#input-username").val("");
     }
 })
 

app/client/templates/profile.html

@@ -20,6 +20,14 @@
                             <div id="name-div" style="display: none">
                                 <input type="text" id="input-name"><button id="submit-name" class="btn btn-primary btn-sm">Submit</button>
                             </div>
+                            {{#if currentUser}}
+                                <a href="#" id="edit-username" class="profile-action">Edit</a>
+                                <a href="#" id="cancel-username" class="profile-action" style="display:none;">Cancel</a>
+                            {{/if}}
+                            <li class="user-stat" id="username">Username: {{username}}</li>
+                            <div id="username-div" style="display: none">
+                                <input type="text" id="input-username"><button id="submit-username" class="btn btn-primary btn-sm">Submit</button>
+                            </div>
                             <li class="user-stat">Joined: {{first_joined}}</li>
                             <li class="user-stat">Rank: {{rank}}</li>
                         </ul>

app/server/server.js

@@ -956,6 +956,9 @@ Meteor.methods({
     },
     updateRealName: function(username, realname){
         Meteor.users.update({"profile.username": username}, {$set: {"profile.realname": realname}});
+    },
+    updateUserName: function(username, newUserName){
+        Meteor.users.update({"username": username}, {$set: {"username": newUserName, "profile.username": newUserName, "profile.usernameL": newUserName.toLowerCase()}})
     }
 });