How to display a login view as a popup window during navigation between views

This approach can be applied starting with 13.2.9

This example demonstrates how to check whether the user is logged in and display a login view when it is necessary during navigation.

It is necessary to perform the following steps to accomplish this task:

1. Add a new view and place a dxPopup in it.

2. Implement the required logic for this view in a corresponding view model.

3. Handle the HtmlApplication.initialized event. In this event handler, get the login view template using the HtmlApplication.getViewTemplate method and add the view to the view port. This will allow you to display its internal popup using options from its view model.

4. Bind the login view model to the view markup using Knockout.

5. Declare a global variable for determining when a user is logged in. In this example we set this option to false by default, and we will set it to true when a user is logged in. This variable can be accessed from any part of the application and we can change its value in the login view model.

6. Handle the HtmlApplication.navigating event. In this event handler, we can get a view info (see HtmlApplication.getViewTemplateInfo) for the navigated view and check user credentials if necessary. For this purpose, we added the secure option to those views that should not be displayed for unauthorized users. If the user unauthorized, we can call a method from the login view model to display dxPopup from the login view. Moreover, you can cancel navigation by setting the cancel parameter of the event handler to true.

See also:
How to send authenticated requests to the OData service