I created in meteor.js a user profile edit page based on autoform and simpl-schema packages. I also added Tracker to schema.
I wanted to make field Profile.Username required but it's validate when field is empty. This field is also unique and handling this property works good.
Also Email field is required and there Tracker works good.
Here is my code:
users.js
import { Mongo } from 'meteor/mongo';
import { Tracker } from 'meteor/tracker';
import SimpleSchema from 'simpl-schema';
SimpleSchema.extendOptions(['autoform']);
Schema.User = new SimpleSchema({
emails: {
type: Array,
optional: true
},
'emails.$': {
type: Object,
optional: true,
},
'emails.$.address': {
type: String,
regEx: SimpleSchema.RegEx.Email
},
'emails.$.verified': {
type: Boolean,
optional: true,
autoform: {
type: 'boolean-checkbox'
}
},
createdAt: {
type: Date,
autoValue: function() {
return new Date();
},
autoform: {
type: 'hidden'
}
},
profile: {
type: Schema.UserProfile,
optional: true
},
services: {
type: Object,
optional: true,
blackbox: true,
autoform: {
type: 'hidden'
}
}
}, {tracker: Tracker});
Meteor.users.attachSchema(Schema.User);
Meteor.users.allow({
insert: function () { return true; },
update: function () { return true; },
remove: function () { return true; }
});
profile.js
import { Mongo } from 'meteor/mongo';
import { Tracker } from 'meteor/tracker';
import SimpleSchema from 'simpl-schema';
SimpleSchema.extendOptions(['autoform']);
Schema = {};
Schema.UserProfile = new SimpleSchema({
username: {
type: String,
label: 'Username',
unique: true,
},
firstName: {
type: String,
optional: true
},
lastName: {
type: String,
optional: true
},
birthday: {
type: Date,
optional: true,
autoform: {
type: 'bootstrap-datepicker',
datePickerOptions: {
autoclose: true
}
}
},
gender: {
type: String,
optional: true,
autoform: {
type:'select-radio',
options: function () {
return [
{ label: 'Male', value: 'Male'},
{ label: 'Female', value: 'Female'},
];
},
}
}
}, {tracker: Tracker});
and ProfileEdit.html
<template name="ProfileEdit">
{{> Header}}
{{> SideNav}}
<div class="main-layout">
<legend>Update Profile</legend>
{{#if Template.subscriptionsReady}}
{{# autoForm id="profileEdit" collection="Meteor.users"
doc=currentUser type="update"}}
{{> afObjectField name="emails.0"}}
{{> afObjectField name="profile"}}
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
{{/autoForm}}
{{/if}}
</div>
</template>
Please, help me.
Related
I'm trying to use Facebook to connect and register into my Meteor.js application. In my login template I put a button to do this. I call the function Meteor.loginWithFacebook() but it doesn't work... I'm guessing that Meteor try to create a new user and that it doesn't find the username information but I don't know how to manage that.
My handler to call the login :
'click #facebook-login': function(event) {
Meteor.loginWithFacebook({}, function(err){
if (err) {
throw new Meteor.Error("Facebook login failed");
Materialize.toast('Echec de connexion!', 4000);
}
else {
Router.go(Utils.pathFor('home'));
Materialize.toast('Bon retour parmis nous ' + Meteor.user().username + ' !', 5000);
}
});
}
The error I have :
I20160428-12:44:56.099(2)? Exception while invoking method 'login' Error: Nom d'utilisateur is required
I20160428-12:44:56.100(2)? at getErrorObject (packages/aldeed_collection2-core/lib/collection2.js:437:1)
I20160428-12:44:56.101(2)? at [object Object].doValidate (packages/aldeed_collection2-core/lib/collection2.js:420:1)
I20160428-12:44:56.101(2)? at [object Object].Mongo.Collection. (anonymous function) [as insert] (packages/aldeed_collection2-core/lib/collection2.js:173:1)
I20160428-12:44:56.101(2)? at AccountsServer.Ap.insertUserDoc (packages/accounts-base/accounts_server.js:1250:25)
I20160428-12:44:56.101(2)? at AccountsServer.Ap.updateOrCreateUserFromExternalService (packages/accounts-base/accounts_server.js:1386:20)
I20160428-12:44:56.102(2)? at [object Object].Package (packages/accounts-oauth/oauth_server.js:55:1)
I20160428-12:44:56.103(2)? at packages/accounts-base/accounts_server.js:464:32
I20160428-12:44:56.103(2)? at tryLoginMethod (packages/accounts-base/accounts_server.js:241:14)
I20160428-12:44:56.103(2)? at AccountsServer.Ap._runLoginHandlers (packages/accounts-base/accounts_server.js:461:18)
I20160428-12:44:56.103(2)? at [object Object].methods.login (packages/accounts-base/accounts_server.js:524:27)
I20160428-12:44:56.129(2)? Sanitized and reported to the client as: Nom d'utilisateur is required [400]
User schema :
Globals.schemas.UserProfile = new SimpleSchema({
firstName: {
type: String,
regEx: /^[a-zA-Z-]{2,25}/,
optional: true,
label: "Prénom"
},
lastName: {
type: String,
regEx: /^[a-zA-Z-]{2,25}/,
optional: true,
label: "Nom"
},
birthDay: {
type: Date,
optional: true,
label: "Date de naissance",
min: new Date("1900-01-01T00:00:00.000Z"),
autoform: {
value: new Date("1900-10-18T00:00:00.000Z")
}
},
gender: {
type: String,
allowedValues: ['M', 'F'],
optional: true,
label: "Genre",
autoform: {
options: [
{
label: "Homme",
value: "M"
},
{
label: "Femme",
value: "F"
}
],
firstOption: "(Veuillez sélectionner une réponse)"
}
},
level: {
type: Number,
autoValue: function () {
if (this.isInsert) {
return 1;
}
},
autoform: {
omit: true
},
min: 0,
max: 1000,
label: "Niveau"
},
picture: {
type: String,
optional: true,
autoform: {
omit: true
},
label: "Photo"
}
});
// Schéma principal
Globals.schemas.User = new SimpleSchema({
username: {
type: String,
regEx: /^[a-z0-9A-Z_]{3,30}$/,
label: "Nom d'utilisateur"
},
password: {
type: String,
label: "Mot de passe",
optional: true,
autoform: {
afFieldInput: {
type: "password"
}
}
},
confirmation: {
type: String,
label: "Confirmation",
optional: true,
custom: function(){
if(this.value !== this.field('password').value){
return "passwordMissmatch";
}
},
autoform: {
afFieldInput: {
type: "password"
}
}
},
emails: {
type: [Object],
optional: false,
label: "Adresses Email"
},
"emails.$.address": {
type: String,
regEx: SimpleSchema.RegEx.Email,
label: "Adresses Email"
},
"emails.$.verified": {
type: Boolean,
optional: true,
autoform: {
omit: true
}
},
createdAt: {
type: Date,
autoValue: function () {
if (this.isInsert) {
return new Date;
} else {
this.unset();
}
},
autoform: {
omit: true
}
},
profile: {
type: Globals.schemas.UserProfile,
optional: true
},
services: {
type: Object,
optional: true,
blackbox: true,
autoform:{
omit: true
}
},
roles: {
type: Object,
optional: true,
blackbox: true,
autoform: {
omit: true
}
}
});
Thank's for any help !
The problem is that your schema requires Meteor.users to have a username field, which they don't contain by default. You can, however, generate this field by taking their name name from the Facebook profile.
Accounts.onCreateUser(function(options, user) {
user.username = user.services.facebook.name;
return user;
});
http://docs.meteor.com/#/full/accounts_oncreateuser
When using autoform with type="method-update" meteormethod="someMethod" the method will not actually get called.
The autoform I am having trouble with:
{{#autoForm id="archiveIssue" type="method-update" meteormethod="editIssue" collection="Collections.Issues" validation="keyup" doc=doc autosaveOnKeyup="true" resetOnSuccess="true"}}
<fieldset>
{{> afQuickField name="Archived.Archived_By" id="Archived.Archived_By" autocomplete="off"}}
{{> afQuickField name="Archived.Archive_Notes" id="Archived.Archive_Notes" autocomplete="off" rows=5}}
<div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#archiveIssue">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</fieldset>
{{/autoForm}}
This is the method that I am trying to call (The PRINT never shows up in the in the server console):
editIssue: function(doc) {
console.log("PRINT");
Collections.Issues.update({
"_id": doc._id
},
{
$set: {
"Archived.Archived": true,
"Archived.Archived_By": doc.Archived_By,
"Archived.Archive_Notes": doc.Archive_Notes
}
});
}
The 2 functions that should help get the doc:
Template.archiveIssue.helpers({
doc: function () {
var tmp = Session.get("archiveDoc");
return tmp;
}
});
Template.archiveIssueModal.events({
"click .archiveButton": function (event) {
Session.set("archiveDoc", this);
}
});
Schemas
Schema.Archived = new SimpleSchema({
Archived: {
type: Boolean,
optional: true
},
Archived_By: {
type: String,
optional: true
},
Archive_Notes: {
type: String,
max: 200,
optional: true
}
});
Schema.Issues = new SimpleSchema({
Description: {
type: String,
max: 500,
optional: true
},
Comments: {
type: [Schema.Comments],
max: 500,
optional: true
},
User: {
type: String,
label: "User",
optional: true
},
Archived: {
type: Schema.Archived,
optional: true
},
});
Not sure if you need an answer now.
You need to define with Meteor.methods like this.
Meteor.methods({
demoSubmission: function () {
I have this Schema (using meteor-collection2):
Settings = new Mongo.Collection("settings");
var Schema = {};
Schema.Settings = new SimpleSchema({
user_id: {
type: String,
optional: false
},
settings_firm_name: {
type: String,
optional: false
},
settings_firm_primary_branch: {
type: String,
optional: false
},
settings_firm_employees_num: {
type: Number,
optional: false,
min:1
},
settings_firm_address: {
type: String,
optional: false,
},
settings_firm_email: {
type: String,
regEx: SimpleSchema.RegEx.Email,
optional: false,
},
settings_firm_web_page: {
type: String,
optional: false,
},
settings_firm_contact_phone: {
type: String,
optional: false,
},
settings_firm_fax: {
type: String,
optional: false,
},
settings_firm_social: {
type: [Object],
optional: false,
},
"firm_social.$.name": {
type: String
},
"firm_social.$.link": {
type: String,
regEx:SimpleSchema.RegEx.Url
}
});
I want to add to my database data that is validated by this schema. settings_firm_social is array of object. That objects are created from three different input fields where each object have name and link fields. How can I insert that document in my database? I simply try with:
Settings.insert(settings, function(error,result){
if(error){console.log(error)}
});
But my array then is populated with three empty objects ({}).
EDIT
When I log settings object that I pass to Meteor method befor insert:
I20150627-00:29:36.523(2)? Server log
I20150627-00:29:36.543(2)? { settings_firm_name: 'Test',
I20150627-00:29:36.543(2)? settings_firm_primary_branch: 'test',
I20150627-00:29:36.543(2)? settings_firm_employees_num: '200',
I20150627-00:29:36.543(2)? settings_firm_address: 'Test',
I20150627-00:29:36.544(2)? settings_firm_contact_phone: '12345',
I20150627-00:29:36.544(2)? settings_firm_fax: '123445',
I20150627-00:29:36.544(2)? settings_firm_web_page: 'http://localhost:3000/settings/ZQwjxYzBuSfodxHvF',
I20150627-00:29:36.544(2)? settings_firm_email: 'test#hotmail.com',
I20150627-00:29:36.544(2)? settings_firm_social:
I20150627-00:29:36.545(2)? [ { name: 'Facebook',
I20150627-00:29:36.545(2)? link: 'http://localhost:3000/settings/ZQwjxYzBuSfodxHvF' },
I20150627-00:29:36.545(2)? { name: 'Twitter',
I20150627-00:29:36.546(2)? link: 'http://localhost:3000/settings/ZQwjxYzBuSfodxHvF' },
I20150627-00:29:36.546(2)? { name: 'LinkedIn',
I20150627-00:29:36.546(2)? link: 'http://localhost:3000/settings/ZQwjxYzBuSfodxHvF' } ],
I20150627-00:29:36.546(2)? user_id: 'ZQwjxYzBuSfodxHvF' }
After insert:
I20150627-00:31:23.185(2)? { settings_firm_name: 'Test',
I20150627-00:31:23.185(2)? settings_firm_primary_branch: 'test',
I20150627-00:31:23.185(2)? settings_firm_employees_num: 200,
I20150627-00:31:23.185(2)? settings_firm_address: 'Test',
I20150627-00:31:23.185(2)? settings_firm_contact_phone: '12345',
I20150627-00:31:23.186(2)? settings_firm_fax: '123445',
I20150627-00:31:23.186(2)? settings_firm_web_page: 'http://localhost:3000/settings/ZQwjxYzBuSfodxHvF',
I20150627-00:31:23.187(2)? settings_firm_email: 'test#hotmail.com',
I20150627-00:31:23.187(2)? settings_firm_social: [ {}, {}, {} ],
I20150627-00:31:23.187(2)? user_id: 'ZQwjxYzBuSfodxHvF' }
You can add a new schema object to validate settings_firm_social.
Schema.settings = new SimpleSchema({
settings_firm_social: {
type: [settingsFirmSocialSchema]
}
});
And then:
var settingsFirmSocialSchema = new SimpleSchema({
name: {
type: String
},
link: {
type: String
}
});
After following the README in the autoform summernote package, whenever I try to submit the form I get this error:
Uncaught TypeError: undefined is not a function
Clicking on the error shows this code:
AutoForm.addInputType('summernote', {
template: 'afSummernote',
valueOut: function() {
return this.code(); //This as the offending line (marked with an x)
}});
I am not sure if I am doing something wrong or it is the package
schema
//Creating a new Collection
Todos = new Mongo.Collection("Todos");
//Defining the schema
Todos.attachSchema(new SimpleSchema({
name: {
type:String,
label: "Name",
max:200
},
description: {
type:String,
label: "Description",
autoform: {
afFieldInput: {
type: 'summernote'
}
}
},
todo_type: {
type: String,
label: "Todo Type",
allowedValues: ['normal', 'survey'],
defaultValue: "normal",
autoform: {
type: "select",
options: function () {
return [
{label: "normal", value: "normal"},
{label: "survey", value: "survey"}
];
}
}
},
survey_questions: {
type: [Number],
label: "Survey Questions",
optional: true,
autoform: {
type: "hidden"
},
},
user_id:{
type: String,
autoform: {
type: "hidden",
label: false
},
autoValue: function(){
if (this.isInsert) {
return Meteor.userId();
} else if (this.isUpsert) {
return {$setOnInsert: Meteor.userId()};
} else {
this.unset();
}
},
denyUpdate:true
},
last_modified: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue: function () {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
}
},
created_at: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue: function () {
if (this.isInsert) {
return new Date;
} else if (this.isUpsert) {
return {$setOnInsert: new Date};
} else {
this.unset();
}
},
denyUpdate: true
}
}));
.html
<template name='todo_create'>
{{#autoForm collection="Todos" id="todo_create" type="insert"}}
<fieldset>
<legend>Add a Todo</legend>
<div style="float:left; margin-top:10px;">
<div class="textField">
{{> afQuickField name='name'}}
</div>
<div class="textField" style="margin-left:20px;">
{{> afQuickField name='todo_type'}}
</div>
</div>
<div class="descriptionText">
{{> afFieldInput name='description'}}
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Add a Todo</button>
{{/autoForm}}
<div class="tableHolder">
{{> tabular table=TabularTables.Todos class="table table-striped table-bordered table-condensed"}}
</div>
</template>
I'm using accounts-ui for the login system. I want to a create a profile form which I've got displaying using autoform. When I try to submit the form the params are passed in the URL and the page refreshes but nothing is saved to the collection.
Any ideas?
Here's my schema (I've also tried just using a UserProfile schema but that didn't work)
Schema = {};
Schema.UserProfile = new SimpleSchema({
firstName: {
type: String,
regEx: /^[a-zA-Z-]{2,25}$/
},
lastName: {
type: String,
regEx: /^[a-zA-Z]{2,25}$/
},
gender: {
type: String,
allowedValues: ['Male', 'Female']
},
bio: {
type: String,
},
avatar: {
type: String,
},
pinCode: {
type: Number,
min: 7,
max: 7
},
phoneNumber: {
type: Number,
min: 9,
max: 10
}
});
Schema.User = new SimpleSchema({
_id: {
type: String,
regEx: SimpleSchema.RegEx.Id
},
email: {
type: String,
regEx: SimpleSchema.RegEx.Email
},
createdAt: {
type: Date
},
profile: {
type: Schema.UserProfile,
},
services: {
type: Object,
optional: true,
blackbox: false
}
});
Meteor.users.attachSchema(Schema.User);
Template.signupForm.helpers({
users: function () {
return Meteor.users;
},
userSchema: function () {
return Schema.User;
}
});
/* as an idea ....
Template.signupForm.editingDoc = function () {
return Meteor.users.find({_id: Meteor.userId()});
};
*/
//template
<template name="signupForm">
<div class="panel-body">
{{#autoForm schema=userSchema id="signupForm" doc=editingDoc type="update"}}
<fieldset>
{{> afObjectField name='profile'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</div>
</template>
This is really late but if anyone need this, the issue you where having is you never gave it the user collection:
{{#autoForm
collection='Meteor.users' //this was your issue
id="signupForm"
doc=editingDoc
type="update"
}}
If you wanted to you could even limit the form to just the profile with:
{{#autoForm
collection='Meteor.users'
schema="Schema.UserProfile" //both collection & schema will render schema
id="signupForm"
doc=editingDoc
type="update"
}}