modal

[Maxhodges]

any easyish way to make this work as a modal form?

[splendido]

hello @Maxhodges,
I know there was some previous successful attemp to make it with modals.
See this issue on the core repo.

[splendido]

Any progress on this?

[Maxhodges]

This package for modals is very simple. We like it a lot:
https://atmospherejs.com/peppelg/bootstrap-3-modal

You only need to add the a "modal" class to a div wrapper in your template.
Might be a good starting point if someone wanted to integrate modals into useraccounts/bootstrap.

[Maxhodges]

OK here is how I got modals working in a few easy steps

First add this excellent modal package to your Meteor project

peppelg:bootstrap-3-modal package

Next create a signin template and add these modal classes

<template name="login">
  <div class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
        <div id="login" class="form-signin">
            {{> atForm}}
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

To show your modal call Modal.show from your event handler

Modal.show('login'); // login being the template name

example:

Template.header.events({
  'click .__signin': function() {
    Modal.show('login');
  },
});

To hide the modal, add this onSubmitHook to your AccountsTemplate config

AccountsTemplates.configure({
    onSubmitHook: mySubmitFunc
});

then write a callback to hide your signin/signup form

var mySubmitFunc = function(error, state){
  if (!error) {
    if (state === "signIn") {
      // Successfully logged in
      // ...
      Modal.hide('login');
    }
    if (state === "signUp") {
      // Successfully registered
      // ...
      Modal.hide('login');
    }
  }
};

Look Ma! Modal sign-in!

Modal header/footer

If you want to show the form title in the modal-header section, be sure to set the signin title to empty string in AccountsTemplate.config otherwise {{atForm}} will produce a default title in the modal-body block

  title: {
      forgotPwd: "Recover Your Password",
      signIn: "",

then you can just show it yourself in the header
<div class="modal-header>Sign-in</div>

@splendido if you like shall I do a pull request and add this to the project readme?

[splendido]

great work!

...for the PR, since it's bootstrap specific: what about adding all this as an example somewhere around on the wiki?
It's still not well organized, but I hope there will be a time where everything there will be put somewhere well organized!

...perhaps a link to this wiki on the Guide.md wouldn't be bad ;-)

[Maxhodges]

since the modal technique above bypasses all the routing, what do you think of creating a separate repo where we rip out all the routing code in order to keep it super lean?

[splendido]

[email protected] is on the works!

...lets wait for it and we'll have a number of plugin packages to get routing, i18n, modals, etc... ;-)

[splendido]

See the modal-forms card on Trello

[derwaldgeist]

Just came across this and tried to use @Maxhodges approach. It sort of works, but if the user commits the login dialog, my (flow) router always jumps to the home page of the application. Suprisingly, it does not do this if I am using the standard full-page login approach. So I am wondering why this additional routing takes place?

[Maxhodges]

My understanding is that it jumps back to the previous page on login, but
believe you can override this behavior.

see this in guide:

"Path for the home route, to be possibly used for redirects after successful form submission."

https://github.com/meteor-useraccounts/core/blob/master/Guide.md

O

[derwaldgeist]

Thanks for this tip, I have not seen this homeRoutePath. Unfortunately, it can only be set as part of the configuration and not on a per-use base. I will try to set it to "#" to prevent any re-routing.

[Maxhodges]

i came up with another method to have a bit more control over the post login routing. will post when I'm back at my desk. now on holiday.

[splendido]

Hey guys, lets have a look at this discussion.

My suggestion it to set AccountsTemplates.avoidRedirect to true before showing the modal.
Lets also have a look at this thread and especially at this comment

[splendido]

...realizing now the above applies to useraccounts:iron-routing, but useraccounts:flow-routing is currently missing this part.

See this line for useraccounts:iron-routing

See this line for useraccounts:flow-routing

I'll continue this discussion on meteor-useraccounts/flow-routing#12