javascript - Meteor - Can't submit user after adding routes with iron.Router to the login and register form -
i want create simple login, register , logout menu meteor , iron router. before used iron router package submit new user , login or logout. therefore had code in html document:
<body> {{#if currentuser}} {{> dashboard}} {{else}} {{> register}}<br> {{> login}} {{/if}} </body> now want route login , register form. if press login button should get: lochalhost:3000 login (which works fine).
but don't know:
- why can't submit new user anymore
- how can change successful login route dashboard route
- and how can logout (couldn't test yet)
i'm new js , meteor. still didn't find solution in internet or way fix on own.
my complete document looks like:
main.html:
<head> <title>routing</title> </head> <body> {{#if currentuser}} {{> dashboard}} <!--{{else}} {{> register}}<br> {{> login}} --> {{/if}} </body> <template name="main"> <h1>text</h1> {{> navigation}} {{> yield}} <hr /> <p> copyright © </p> </template> <template name="home"> <p> welcome <b>text</b> website. </p> </template> <template name="navigation"> <ul> <li><a href="{{pathfor route='home'}}">home</a></li> <li><a href="{{pathfor route='register'}}">register</a></li> <li><a href="{{pathfor route='login'}}">login</a></li> </ul> </template> <template name="register"> <form> <input type="text" id="username"> <input type="text" id="email"> <input type="password" id="password"> <input type="submit" value="register"> </form> </template> <template name="login"> <form> <input type="text" id="login-email"> <input type="password" id="login-password"> <input type="submit" value="login"> </form> </template> <template name="dashboard"> <p> yor're logged in. <a href="{{pathfor route='home'}}" class="logout">logout</a> </p> </template>main.js
router.route('register'); // default name register router.route('login'); // default name login router.route('dashboard'); router.route('/', { name: 'home', template: 'home' }); router.configure({ layouttemplate: 'main' }); if (meteor.isclient) { template.register.events({ 'submit form': function(event, template) { event.preventdefault(); var usernamevar = template.find('#username').value; var emailvar = template.find('#email').value; var passwordvar = template.find('#password').value; accounts.createuser({ username: usernamevar, email: emailvar, password: passwordvar }) } }); template.login.events({ 'submit form': function(event, template) { event.preventdefault(); var emailvar = template.find('#login-email').value; var passwordvar = template.find('#login-password').value; meteor.loginwithpassword(emailvar, passwordvar); } }); template.dashboard.events({ 'click .logout': function(event) { event.preventdefault(); meteor.logout(); prompt("you logged out"); } });}
and added:
- the
iron:routerpackage meteor add accounts-ui accounts-password
i say, read official documentation iron router , meteor have better understanding. took code , did testing, works fine. added iron:router accounts-ui (look documentation this, can create easy login , signup package) , accounts-password.
main.html
<head> <title>routing</title> </head> <body> {{#if currentuser}} {{> dashboard}} <!--{{else}} {{> register}}<br> {{> login}} --> {{/if}} </body> <template name="main"> <h1>text</h1> {{> navigation}} {{> yield}} <hr /> <p> copyright © </p> </template> <template name="home"> <p> welcome <b>text</b> website. </p> </template> <template name="navigation"> <ul> <li><a href="{{pathfor route='home'}}">home</a></li> {{#unless currentuser}} <li><a href="{{pathfor route='register'}}">register</a></li> <li><a href="{{pathfor route='login'}}">login</a></li> {{/unless}} </ul> </template> <template name="register"> {{#unless currentuser}} <form> <input type="text" id="username"> <input type="text" id="email"> <input type="password" id="password"> <input type="submit" value="register"> </form> {{/unless}} </template> <template name="login"> {{#unless currentuser}} <form> <input type="text" id="login-email"> <input type="password" id="login-password"> <input type="submit" value="login"> </form> {{/unless}} </template> <template name="dashboard"> <p> yor're logged in. <a href="{{pathfor route='home'}}" class="logout">logout</a> </p> </template> main.js
gohome =function(){ if(meteor.userid()){ router.go('/'); } } router.configure({ layouttemplate: 'main' }); router.route('/register', { template:'register', onbeforeaction:function(){ gohome(); this.next(); } }); // default name register router.route('/login', { template:'login', onbeforeaction:function(){ gohome(); this.next(); } }); router.route('/dashboard',{ template:'dashboard' }) router.route('/', { name: 'home', template: 'home' }); if (meteor.isclient) { template.register.events({ 'submit form': function(event, template) { event.preventdefault(); var usernamevar = template.find('#username').value; var emailvar = template.find('#email').value; var passwordvar = template.find('#password').value; accounts.createuser({ username: usernamevar, email: emailvar, password: passwordvar }, function(error){ if(!error){ router.go('/'); } }) } }); template.login.events({ 'submit form': function(event, template) { event.preventdefault(); var emailvar = template.find('#login-email').value; var passwordvar = template.find('#login-password').value; meteor.loginwithpassword(emailvar, passwordvar, function(error){ if(!error){ router.go('/'); } }); } }); template.dashboard.events({ 'click .logout': function(event) { event.preventdefault(); meteor.logout(); prompt("you logged out"); } }); }
Comments
Post a Comment