Replacing the manage registrations UI

The App SDK provides a default UI for registering, deregistering, and renaming UAF and FIDO2 credentials implemented as a view object.

Manage Registration uses the Model-View-Controller (MVC) architecture, which makes it easy to replace the UI without having to reimplement the core logic. To provide your own UI, you need to provide your own implementation of the view objects. Your view object (View or Fragment in the sequence diagram below) uses the ManageRegistrationsController (Controller) object, which responds to the user input from your UI and calls the internal SDK functions (Model) to trigger the required functionality such as adding or removing an authenticator. The ManageRegistrationsController calls back to your view object to show the updates.

The following diagram illustrates the MVC flow when the user removes an authenticator. The yellow boxes represent your code. This flow assumes that your application has already called ManageRegistrationsUIFactory.setInstance() to provide an instance of the custom implementation of the ManageRegistrationsUIFactory base class.

The steps in this diagram are described below:

1. Your application calls the AppSdk.getManageRegistrationsView() to obtain the instance of your custom BaseManageRegistrationsView implementation.

2. The App SDK calls the createView() method of your custom ManageRegistrationsUIFactory implementation to obtain the instance of your custom BaseManageRegistrationsView implementation.

3. Your application calls the BaseManageRegistrationsView.show() method on the obtained View.

4. Once your View is initialized, it calls the Controller's onRefresh().

5. The Controller calls the Server to get the list of registrations for the user.

6. The Controller calls the Live Data's setMethods() with the list of registrations.

7. The Live Data object calls your View's setMethods() with the list.

8. Your View displays the list of registrations.

9. The user selects a registration to remove.

10. Your View calls the Controller's onRemove() with the selected registration.

11. The Controller removes the registration.

12. After removing the registration, the Controller calls the Live Data's onRemoveCompleted().

13. The Live Data object calls your View's onRemoveCompleted().

Refer to the Client API Docs for the ManageRegistrationsController and ManageRegistrationsUIFactory classes and the BaseManageRegistrationsView and IManageRegistrationsLiveData interfaces for more details.

Working examples in Tutorial web app

• Refer to the SampleManageRegistrationsUIFactory and SampleManageRegistrationsView classes in the file js/samples.js for implementation.

• Refer to initialize() and showManageRegistrationsFragment() in js/Controller.js for usage.