w Do I Create A Custom Input Field Then Display Data After Login With Meteor.Js?

I’m new Meteor.js and have been through the docs several times, I’m sure I’m missing something small here so I’m hoping someone can point me in the right direction.

I need to create a new input field inside main.html registration form, have main.js capture this to the database and then show after login.

I have the account-passwords package installed to note.

MAIN.HTML

<body>
{{#if currentUser}}
    {{> dashboard}}
{{else}}
    {{> register}}
    {{> login}}
{{/if}}
</body>

<template name="dashboard">
<p>You're logged in.</p>
<p><a href="#" class="logout">Logout</a></p>
</template>

<template name="register" >
<div id="register">
<h1>Register</h1>
<form>
    <input type="email" name="registerEmail">
    <input type="password" name="registerPassword">
    <input type="submit" value="Register">
</form>
</div>
</template>

<template name="login" >  

<div id="login">  
<h1>Login</h1>
<form>
    <input type="email" name="loginEmail">
    <input type="password" name="loginPassword">
    <input type="submit" value="Login">
</form>
</div>
</template>

MAIN.JS

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';


import './main.html';



if (Meteor.isClient) {
Template.dashboard.events({
'click .logout': function(event){
    event.preventDefault();
    Meteor.logout();
}
});

Template.register.events({
'submit form': function(event){
    event.preventDefault();
    var emailVar = event.target.registerEmail.value;
    var passwordVar = event.target.registerPassword.value;
    Accounts.createUser({
        email: emailVar,
        password: passwordVar
    });
}
});

Template.login.events({
'submit form': function(event){
    event.preventDefault();
    var emailVar = event.target.loginEmail.value;
    var passwordVar = event.target.loginPassword.value;
    Meteor.loginWithPassword(emailVar, passwordVar);
}
});
}

Thanks in advance!

Could you please edit your post and wrap your code blocks in triple-backticks. Like this:

```
code
here
```

Of course, edited, thanks.

Looks like you’re missing some “Helpers”.

Also, look in to Iron-Router.

	BlazeLayout.render( 'applicationLayout', { 
		leftbar: 'account_navigation',
		content: 'projects',
	}); 

You also want Meteor Accounts-Base.

Welcome to Meteor. It’s a long, dark road. But then… then it’s awesome.

I think the easiest approach is to capture the value and use a Meteor method to have the value written to a collection. You can publish that collection to have the client reactively display it, or use another Meteor method to interrogate the value if it’s essentially static.

EDIT: @SkyRooms: the OP has accounts-password, which means accounts-base is automatically there, as it’s a dependency. Iron-Router is not considered a good choice of router, and your code snippet appears to be using flow-router anyway. However, this question is not about routing.

1 Like