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