Useraccounts with imports directory structure


#1

The todos app implements useraccounts with the following structure and files:

imports/startup/client/useraccounts-configuration.js contains the AccountsTemplates.configure() code.

imports/startup/client/routes.js contains the AccountsTemplates.configureRoute() code.

However the routes.js file also does an import of another .js file that has code to override the built-in accounts templates. When I disable the import of this code, the built-in templates do not appear.

So how can I use the built-in useraccounts templates? Do I need to import something?

The Users and Accounts section of the Meteor Guide describes many things about useraccounts but does not mention anything about how to get it working with the imports directory structure. Maybe it should.


#2

The file your referring to

import '../../ui/accounts/accounts-templates.js';

imports the accounts template HTML

import './accounts-templates.html';

which includes the needed user accounts {{> atForm}} template call. If you want to disable the todos custom user accounts templates for example, just make sure you’re still importing a template that includes the {{> atForm}} call somewhere.


#3

I see that accounts-templates.html contains a custom template Auth_page that contains the {{> atForm}} template call:

<template name="Auth_page">
  <div class="page auth">
    <nav>
      <div class="nav-group">
        <a href="#" class="js-menu nav-item">
          <span class="icon-list-unordered"></span>
        </a>
      </div>
    </nav>

    <div class="content-scrollable">
      <div class="wrapper-auth">
        {{> atForm}}
      </div>
    </div>
  </div>
</template>

But I don’t want to use the {{> atForm}} template call. I want the built-in atSignIn template loaded in to my App_body template when the /sign-in route is requested.

It worked fine before I had started to transition to the imports directory structure, simply by writing

AccountsTemplates.configureRoute('signIn', {
    layoutType: 'blaze',
    layoutTemplate: 'App_body'
});

#4

Okay - makes sense. In that case continuing with the todos example, you would just want to disable the defaultTemplate option in the useraccounts-configuration.js file. It’s currently referencing the Auth_page template which is imported in accounts-templates.js. So make the following changes to get the default

AccountsTemplates.configureRoute('signIn', {
  name: 'signin',
  path: '/signin',
});

to show:

  1. In routes.js comment out import '../../ui/accounts/accounts-templates.js';
  2. In useraccounts-configuration.js comment out defaultTemplate: 'Auth_page'

#5

Thanks, that now works in the todos app.

But in my own app the Sign In route is still not found. Strangely, my app doesn’t tell me a “route not found” error message but instead shows the loading template for any route that doesn’t exist. I don’t know why it does that.

When I remove the loading template from my app I get the error message in the console No such template: loading.

All other non-useraccounts routes work fine.


#6

I worked out why the loading template was being shown. It was because I had made a last-resort route (that I had forgotten about), like FlowRouter.route(’/:Id’), so that was being loaded when all previously defined routes did not match the requested route. The route is for user-generated content, so that their content can be accessed using a URL.

I disabled that route and now the useraccounts templates show. Now I need to work out how I can re-enable the route whilst still have useraccounts templates working.


#7

I simply had to move the last-resort route definition to the bottom of the file. The order of route definition definitely matters.