I am new to Meteor.js and followed the tutorial on meteor.com to create a task list to log into and post tasks. It was very easy to add the accounts-ui & accounts-password packages to the project. However when signing up, I also want the user to provide home address information and possibly more. I want this information to be stored in mongodb linked to the id of the user. How would you do this?
You can add the information on the profile field of the user.
Something like this on the event (client side code)
Template.example.events({
'click #register':function(event,template){
var homeAddress = template.$('homeAddress').val();
Accounts.createUser({
email: email,
password: password,
profile: { homeAddress: homeAddress }
});
}
})
Remember that username
,email
and profile
fields are published by default by the accounts-password package.
What you are looking for is the extra option of profile when using Accounts.createUser(). Check the documentation for more details on how to use: http://docs.meteor.com/#/full/accounts_createuser.
The profile option takes an object which is adding to the database document associated with the user. After trying the example below, run the following commands to see that it is stored in the database.
In the directory of your project:
$ meteor mongo
$ db.users.find()
the following example returns:
{ "_id" : "kJNaCtS2vW5qufwJs", "createdAt" : ISODate("2015-05-11T20:50:21.484Z"), "services" : { "password" : { "bcrypt" : "$2a$10$LrcZ5lEOlriqvkG5pJsbnOrfLN1ZSCNLmX6NP4ri9e5Qnk6mRHYhm" }, "resume" : { "loginTokens" : [ { "when" : ISODate("2015-05-11T20:50:21.493Z"), "hashedToken" : "CXKwUhEkIXgdz61cHl7ENnHfvdLwe4f0Z9BkF83BALM=" } ] } }, "emails" : [ { "address" : "[email protected]", "verified" : false } ], "profile" : { "firstName" : "shark", "lastName" : "byte" } }
Just as a warning, I am not using accounts-ui, only accounts-password without the built in ui. But here is how to create a simple create account template with extra fields (in this example: first & last name, and organization).
html code:
<head>
<title>test</title>
</head>
<body>
<!-- checks if someone is logged in -->
{{#if currentUser}}
{{> userPage}}
{{else}}
{{> loginPage}}
{{/if}}
</body>
<template name="userPage">
<button id="logout">logout</button>
<p>You are logged in!</p>
</template>
<template name="loginPage">
<form><!-- create account form, use a different one for normal logging in -->
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<input type="text" id="organization" placeholder="Organization (optional)">
<input type="text" id="email" placeholder="Email Address">
<input type="password" id="password" placeholder="Password">
<input type="password" id="confirmPassword" placeholder="Confirm Password">
<input type="submit" id="createAccount" value="Create Account">
</form>
</template>
javascript code:
if (Meteor.isClient) {
Template.loginPage.events({
'submit form': function(event, template) {
event.preventDefault();
console.log('creating account');
var passwordVar = template.find('#password').value;
var confirmVar = template.find('#confirmPassword').value;
if (passwordVar === confirmVar) {
Accounts.createUser({
email: template.find('#email').value,
password: passwordVar,
// you can add wherever fields you want to profile
// you should run some validation on values first though
profile: {
firstName: template.find('#firstName').value,
lastName: template.find('#lastName').value
}
});
}
}
});
// make sure to have a logout button
Template.userPage.events({
'click #logout': function(event, template) {
Meteor.logout();
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With