Menu
I have two template forms in a page one for "Log In" and another "Sign Up". Understood to use Accounts package from documentation. But could not figure out how to toggle between these two forms when user clicks on "Log In" link or "Sign Up" link?
Code:
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item" href="#">Home</a>
<a class="blog-nav-item active" href="#">Login</a>
<a class="blog-nav-item active" href="#">Sign Up</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
{{> signInForm}}
</body>
<template name="signInForm">
<div class="container">
<form class="form-signin" role="form" id="signInForm">
<h2 class="form-signin-heading">Please Log in</h2>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email">
<input type="password" class="form-control" placeholder="Password" required="" id="login-password">
<div class="row">
<label class="remember-me">
<input type="checkbox" name="remember-me" value="remember-me" id="remember-me" > Remember me
</label>
<a href="#" class="pull-right">Forgot Password</a>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
<p class="text-left">First time user? <a href="#">Register</a></p>
</form>
</div>
</template>
<template name="signUpForm">
<div class="container">
<form class="form-signin" role="form" id="signUpForm">
<h2 class="form-signin-heading">Please sign up</h2>
<input type="text" class="form-control" placeholder="Name" required="" autofocus="" id="signup-name">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="signup-email">
<input type="password" class="form-control" placeholder="Password" required="" id="signup-password">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
<p class="text-left">Already have account? <a href="#">Login</a></p>
</form>
</div>
413
Well, if you want to do it "The Meteor Way" there are two basic options and you need to decide which suits your need best:
a. you can inject the template you want to use to a placeholder using UI.insert and UI.render (or UI.renderWithData if you need data to be rendered, example:
UI.insert(UI.render(Template.name), document.body)
UI.insert(UI.renderWithData(Template.foo, {bar: "baz"}), document.body)
b: you can use Session based conditions in your template and order it to appear only when a certain Session is set, example:
<template name="signInForm">
<div class="signUp"> click me to make the sign up form appear</div>
<div class="container">
{{#with userPressedSignUp}}
<form class="form-signin" role="form" id="signUpForm">
.. form elements..
</form>
{{/with}
</template>
Template.signInForm.userPressedSignUp = ->
return Session.get 'signUp-visible"
Template.signInForm.events
'click .signUp': (event) ->
Session.set 'signUp-visible', true
Session.set 'signUp_visible', false
# The template will not show the contents of the "with" as long as the session
# variable is 'false', change it by clicking on "signUp" div when you want the form to appear
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