open panel/modal in route - Ember.JS

Question

I have created now a simple authentication with this tutorial:

http://www.embercasts.com/episodes/client-side-authentication-part-1

So i have created the AuthenticatedRoute, and all the other routes, that need a logged in user, are extending the AuthenticatedRoute.

And in the beforeModel, i check if the user is logged in. And if he's not logged in, i call: this.transitionTo("login").

My question is now: How could i put the whole login form in a Panel? My idea was to open the panel in the AuthenticatedRoute -> beforeModel event, and if the login was successful, do retry the redirect.

My idea, but i dont know how to implement it.

App.AuthenticatedRoute = Ember.Route.extend({
  beforeModel: function(transition) {
    if (!App.get("currentUser")) {
      transition.abort(); // loading spinner doesn't disappears if i call this??
      this.showLogin(transition);
    }
  },

  showLogin: function(transition) {
    var loginController = this.controllerFor("login");
    loginController.set("attemptedTransition", transition);

    // OPEN PANEL, if the panel gets closed, do nothing. If login successfull, redirect to attemptedTransition and hide the panel.
  }
});

Answer 1

The bottom of this page tells how to persist a transition and retry it later.

This page tells how to setup a modal, although in recent versions of ember you want to call disconnectOutlet rather than rendering an empty template into the modal outlet.