How do you edit and add new fields to the Current User in Meteor?

Question

In Meteor the current user simply has a "name" field. I want to add a first_name and last_name under profile.

My user_edit.html form:

<template name="userEdit">
  <div id="login-wrapper">
    <form id="login-form" action="action" class="form login-form">
      <div class="control-group">
        <div class="controls">
          <input name="first_name" type="text" value="" placeholder="First Name"/>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <input name="last_name" type="text" value="" placeholder="Last Name"/>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <input type="submit" value="Submit" id="submit-website-button" class="btn btn-primary"/>
        </div>
      </div>
    </form>
  </div>
</template>

I have a form for editing the current user:

I'm not too sure how to update the current user in user_edit.js and add additional fields for first and last name. The code below doesn't work.

Template.userEdit.events({

  'submit form': function(e) {
    e.preventDefault();

    var currentUserId = this._id;

    var userProperties = {
      first_name: $(e.target).find('[name=first_name]').val(),
      last_name: $(e.target).find('[name=last_name]').val()
    }

    User.update(currentUserId, {$set: userProperties}, function(error) {
      if (error) {
      // display the error to the user
      alert(error.reason);
      } else {
        Router.go('userPage', {_id: currentUserId});
      }
    });

  }

});

EDIT

Here is the working version of my JS file after applying the answer:

Template.userEdit.events({

  'submit form': function(e) {
    e.preventDefault();

    Meteor.users.update( Meteor.userId(),
      {
        $set: {
          'profile.first_name': $(e.target).find('[name=first_name]').val(),
          'profile.last_name': $(e.target).find('[name=last_name]').val(),
          'profile.cell_phone': $(e.target).find('[name=cell_phone]').val(),
          'profile.email': $(e.target).find('[name=email]').val(),
          'profile.business_name': $(e.target).find('[name=business_name]').val(),
          'profile.website': $(e.target).find('[name=website]').val()
        }
      },

      function(error) {
        if (error) {
        // display the error to the user
        alert(error.reason);
        } else {
          Router.go('userPage', {_id: Meteor.userId() });
        }
      }
    );
  }
});

Answer 1

A couple of things. I haven't used the past couple of updates of Meteor so maybe 'User' has been added as a cursor to update the current user but from my experience this is how you would update the current user:

Meteor.users.update( Meteor.userId(), { $set: { 'profile.first_name': "example" } } );

Also note how I had to specify 'profile.first_name', in your snippet you would be trying to set first_name and last_name in the base of the user object when users are only allowed to edit the profile section client side. Lastly I'm not sure what 'this' is in the context of your Template so I would set currentUserId = Meteor.userId(), a convenient way to get the current user's id.