Create login/signup page before routing to main page in Meteor?

Question

I have a global route that uses layout.html which specifies the header.html. I would like to know how to:

1) have a main landing page for login/sign up with the proper formatting, without the header. (Im using UserAccounts from Atmosphere but formatting is different, not sure why). Also the header in layout.js cannot be removed.

2) Upon login/sign in, it should go to main page.

Can someone advise how ?

Router.configure({
      layoutTemplate: 'layout', //This is where header is specified globally
      waitOn: function() { 
        return [Meteor.subscribe('notifications')]
      }
    });

Router.route('/', {
  name: 'auth'
}); //added this new line

Router.route('/posts', {
  name: 'home',
  controller: NewPostsController
});

var requireLogin = function() {
  if (! Meteor.user()) {
    if (Meteor.loggingIn()) {
      this.render(this.loadingTemplate);
    } else {
      this.render('accessDenied');
    }
  } else {
    this.next();
  }
}

Router.onBeforeAction('dataNotFound', {only: 'postPage'});
Router.onBeforeAction(requireLogin, {only: 'postSubmit'});

This is the layout.html defined globally.

<template name="layout">
  <div class="container">
    {{> header}}
    {{> errors}}

    <div id="main">
      {{> yield}}
    </div>
  </div>
</template>

Update after @Chase's suggestion. - It works on the routing and header is gone. - Formatting is different from the website though.

What I have is shown below while its supposed to look like http://useraccounts.meteor.com/

Answer 1

Using this set up you won't need to set the layout with header for every route.

The User Accounts package has a Iron Router plugin to ensure the user is signed in that I use (more info). I also configure routes supplied by the User Accounts package (more info) so I can directly route to a User Accounts sign up page.

Javascript

Router.configure({
    layoutTemplate: 'layout' //main layout with header
});

//Iron router plugin to ensure user is signed in
AccountsTemplates.configureRoute('ensureSignedIn', {
    template: 'atTemplate', //template shown if user is not signed in
    layoutTemplate: 'atLayout' //template for login, registration, etc
});

//Don't require user to be logged in for these routes
Router.plugin('ensureSignedIn', {
    except: ['login', 'register']
});

//Configure route for login
AccountsTemplates.configureRoute('signIn', {
    name: 'login',
    path: '/login',
    template: 'atTemplate',
    layoutTemplate: 'atLayout',
    redirect: '/'
});

//Configure route for registration
AccountsTemplates.configureRoute('signUp', {
    name: 'register',
    path: '/register',
    template: 'atTemplate',
    layoutTemplate: 'atLayout',
    redirect: '/'
});

//Home page to show once logged in
Router.route('/', {
    name: 'home',
    action: function(){
        this.render('home');
    }
});

HTML

<template name="layout">
    <div class="container">
        {{> header}}
        {{> errors}}

        <div id="main">
            {{> yield}}
        </div>
    </div>
</template>

<template name="atLayout">
    <div class="at-container">
        {{> yield}}
    </div>
</template>

<template name="atTemplate">
    {{> atForm}}
</template>