Modal forms for sign-in / sign-up

[splendido]

something to design as a plugin-package to be added with something like

meteor add useraccounts:modal

should be something on the lines pioneered by @zachdixon and @BradRyan as stated in #153

[bobmonsour]

Hi Luca, on a "modal" related note. While I do not want to have my signin/up forms come up in a modal, one thing that I would like to have come up in a modal is my privacy policy. Right now, if someone is on the signup form, they click the privacy policy link that takes them to a new page. I do have a couple of places on that page that encourage them to return to the signup form, but I think it would be better to have the policy come up in a modal (in my case, the policy is pretty short, so a modal is appropriate; for others, it might be too long to make sense for a modal). I bring this up as I just implemented a modal for my Community Commenting guidelines on pages where users can comment.

Perhaps you could add this to your roadmap. Thanks again for a great package.

P.S. I have my final exam for Italian 101 on Wednesday.

[splendido]

Hi Bob!

...so basically you'd like to have a hook where to put your polocy.modal('toggle') to override the default Router.go('policyRoute') action, right?

It's good to know! we'll definitely keep this in mind when reworking the package.

This is exactly how I'd like useraccounts users to behave: open criticism and purposeful/proactive behavior ;-)
In bocca al lupo per il tuo esame!

[bobmonsour]

Yes Luca, you are correct. And thanks for the kind words.
Ciao!
-Bob

[fpoirier1]

Hey Splendido,

I am interrested to contribute to this feature. Right now, I am facing a use case where I want the atForm appear in my sidebar it is pretty much the same as a modal. Let me know if you had any idea from where I can start!

[fpoirier1]

At first tought, maybe specifying a callback like this {{> atForm onSuccess=closeModal}} or AccountsTemplate.onSuccess = function(){...} would work? I think the form must be usable without have to configure any routes. What are your thoughts on this ?

[splendido]

Yeah I think that could be the way...

This is something I see implemented with the upcoming package structure (If only I had time... :( ).
I see a useraccounts:modals package which takes the uaForm template and wrap it in a modal, so that you can put {{> uaForm}} somewhere in your layout template and rely on some event/callback to make it visible or hidden.

Closing the modal could be something done automatically after a successful submit.
So, unless we can foreseen some use case which could benefit from having the possibility to specify a callback, there might be no need for the developer to specify a onSuccess routine.

Opening up the modal is a different story...
What about having a UserAccounts.openModal(), with the option to specify the initial state like this UserAccounts.openModal('signIn')?

uaNavButton and the like should also be modify accordingly...
...the major pain would be providing a different modal template for each front-end but I wouldn't want to end up with a modal package for each framework line useraccounts:bootstrap-modals, useraccounts:semantic-ui-modals, at.
So, perhaps, we could have a shadow modal template already included with the other html templates and set it alive whithin the useraccounts:modals package using it to replace the regular uaForm template?

[fpoirier1]

Well, from my point of view, the challenge is not wether to create a modal and including the uaForm in it but more having more control when there is a successful log in. With more control, people will be able to create modals and use the package for other use cases that doesn't require the iron:router.

[splendido]

Ok, I'm interested in hearing such possible usecases ;-)

So do you think an onSuccess callback could be anyway interesting?

[fpoirier1]

I'll fork the package and try for my use case. I'll get back to you on that.

[splendido]

Lets see #201 by @fpoirier1

This should help setting up modal containing atForm, in particular should simplify the modal closure after form submit!

Thanks Francis!

[BradRyan]

@fpoirier1, Thanks for working on the submitHook... worked perfectly. I was working on a new app and this was the solution for redirecting after successful sign in... love my sign in modals :). Without it, AccountsTemplates.avoidRedirect = true was preventing me from redirecting, even though I was setting it to false on user logout. I guess the redirect function was firing before my Tracker function could set it to false.

In case anyone else is interested in modals for sign-in, I'll share my setup. In my navbar, I have a sign in button that show's a modal and set the session var 'currentModal' to true, which I fetch in tracker.autorun to prevent page redirect behind the modal.

In Tracker.autorun:

Tracker.autorun(function() {
if (Meteor.userId()) {
      Session.set('currentModal',false);
  }
AccountsTemplates.avoidRedirect = Session.get('currentModal');
}

Navbar event handler:

Template.AdminLayout.events({
    'click #signIn': function() {
            Session.set('currentModal',true);
            $('#BetaSigninModal').modal('show');
    }
});

In my at_config.js file:

var mySubmitFunc = function(error, state){
  if (!error) {
    if (state === "signIn") {
      // Successfully logged in
      $('#BetaSigninModal').on('hidden.bs.modal', function (e) {
        Router.go('/admin/account');
      })
    }
  }
};

AccountsTemplates.configure({
    onSubmitHook: mySubmitFunc
});

Thanks again for the package!

[splendido]

@BradRyan thanks for sharing!
Lets consider this when I'll be on v2.0 packages

Cheers

[BradRyan]

Sounds good! Just a quick update before I forget. I noticed a bug after my page would reroute on sign-in. I ended up having to wait for the modal to close before calling Router.go, otherwise not all of the modal classes would clear before routing. As a result, my body appeared to be frozen, but the modal-open class had persisted. I updated my code above with the fix.