Meteor useraccounts - Internal States

Question

I use a meteor package "useraccounts" which provides me a 2 forms - "login" and "register".

I want to use these 2 forms in 2 different modals - one for registration, another one for login.

When I use {{> atForm}} I can switch between "login" and "register" states but at the beginning it always a "login" state, no matter which modal I open.

So if the user open "register" modal it should show "register" form. If "login" modal - "login" form".

Right now it's always "login" state in both cases.

When I use {{> atForm state='signUp'}} it disables a toggling between states and I need to keep this option.

How could I achieve that?

Answer 1

You could implement just one modal for both, register and login templates. Then you could switch the atForm state by calling AccountsTemplates.setState(new_state).

For example:

Template.accountsModal.events({
  'click #login': function(e) {
    e.preventDefault();
    AccountsTemplates.setState('signIn');
    $('#accountsModal').modal();
  },
  'click #register': function(e) {
    e.preventDefault();
    AccountsTemplates.setState('signUp');
    $('#accountsModal').modal();
  }
});

---

<template name="accountsModal">
  <div class="modal fade" id="accountsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          {{> atForm}}
        </div>
      </div>
    </div>
  </div>
</template>