Push component state into browser history

I’m building a sign in component, which shows two panes. The first pane will ask the user to enter their e-mail address. The user then clicks next, and the next pane appears. This pane will ask the user to enter their password. To support password managers both panes need to exist in the html, so I cannot use separate routes. When the second pane is shown, I want the user to be able to use their browser’s back button which should show the first pane again. In order to do this, I need to add some state to the browser’s history api. How would I go about this using Ember?

So my component (/controller) will have to do the following:

  • Have two pane (<div />) elements, initially only showing the first
  • After completing the first pane, it is hidden and the second pane is shown (CSS conditional visibility)
  • Using the history API the current state of the component is tracked, allowing the user to go back to the previous pane

If you can’t do separate routes my first thought would be a query param. The default uses pushState which is probably what you want, but you could also use replaceState (replace: true) if you wanted different behavior.

You could also experiment with pushState manually but that might be more trouble than it’s worth.

Ideally I would push some arbitrary state with the history as well, like the user’s input. I don’t want that to go into the URL. I could experiment with using pushState directly, but that feels like working around ember’s back. I expect to run into bears along the way.

Yeah that would be my concern. But could you keep that state in component/controller and just use a query param for the history entry part e.g. step=1 or something like that? Or do you need that state to persist across refresh?

The state wouldn’t need to persist across refresh. However I’d like to keep the component’s state in the history. That would allow me to restore the component’s state when going back (on popstate).