added ability to change password

app/client/app.css

@@ -1502,4 +1502,8 @@ input[type="checkbox"]:checked + #two-label:after {
 .settings-option{
     margin: 5px 0;
     font-size: 1.2em;
+}
+
+.settings-input{
+    margin-bottom: 10px;
 }

app/client/client.js

@@ -98,6 +98,26 @@ Template.settings.events({
         $("#delete-account").click(function(){
             Meteor.call("deleteAccount", Meteor.userId());
         })
+    },
+    "click #change-password": function(){
+        var oldPassword = $("#old-password").val();
+        var newPassword= $("#new-password").val();
+        var confirmPassword = $("#confirm-password").val();
+        if(newPassword === confirmPassword){
+            Accounts.changePassword(oldPassword, newPassword, function(err){
+                if(err){
+                    $("#old-password").val("");
+                    $("#new-password").val("");
+                    $("#confirm-password").val("");
+                    $("<div class='alert alert-danger alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Oh Snap! </strong>" + err.reason + "</div>").prependTo($("#head")).delay(7000).fadeOut(1000, function() { $(this).remove(); });
+                } else {
+                    $("#old-password").val("");
+                    $("#new-password").val("");
+                    $("#confirm-password").val("");
+                    $("<div class='alert alert-success alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Hooray!</strong> You changed your password successfully.</div>").prependTo($("#head")).delay(7000).fadeOut(1000, function() { $(this).remove(); });
+                }
+            });
+        }
     }
 });
 

app/client/templates/settings.html

@@ -1,4 +1,5 @@
 <template name="settings">
+    <div id="head"></div>
     {{> header}}
     <div class="row">
         <h1 id="profile-name">{{username}}</h1>
@@ -14,7 +15,12 @@
                             Show your likes/dislikes on your public profile
                         </label>
                     </div>
-                    <button class="btn btn-warning btn-block" id="save-settings">Save</button>
+                    <button class="btn btn-success btn-block" id="save-settings">Save</button>
+                    <p class="settings-option">Change Password</p>
+                    <input type="password" id="old-password" class="form-control settings-input" placeholder="Old password">
+                    <input type="password" id="new-password" class="form-control settings-input" placeholder="New password">
+                    <input type="password" id="confirm-password" class="form-control settings-input" placeholder="Re-enter new password">
+                    <button class="btn btn-warning btn-block" id="change-password">Change Password</button>
                     <p class="settings-option">Delete Account</p>
                     <button class="btn btn-danger btn-block" id="delete-account">Delete</button>
                 </div>