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

help
1

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!

2

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

```
code
here
```
3

Of course, edited, thanks.

4

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.

5

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