Improve UX of registering a new WebAuthn authenticator

[abias]

This issue is based on a user testing of the new WebAuthn factor.
The first test was made based on a code base status of 3d40ef9, the re-test was made on a code base status of 850a528.

---

On the "Setup authenticator" page, there are several widgets:
• An input field labeled "Authenticator name"
• A button "Register authenticator" which is shown in grey
• A button "Save changes" which is shown in blue
• A button "Cancel"

For an unexperienced end user, the process on this page is not clear.
We have seen these mistakes happen:

a) The user inputs an authenticator name and clicks "Save changes" as this button is the most eye-cathing one. In this case, nothing happens at all.
I think that the "Register authenticator" button should be the most eye-catching button and the Save changes button should either not exist at all or be disabled until the device is registered.

b) The user inputs an authenticator name and clicks "Register authenticator". A browser popup is shown and the user might have never seen this kind of popup before. He is confused and cancels the browser popup. To restart the process, he clicks "Register authenticator" again. In this case, nothing happens and the browser popup is not shown again.
[We have seen this issue in the first test. In the re-test with the updated codebase, the browser popup opened again correctly. I still document this to show that real end users run into such problems].

c) The user inputs an authenticator name and clicks "Register authenticator". A browser popup is shown and the user confirms the registration on his FIDO2 hardware key. Afterwards, the browser popup closes and the user is on the page again. The "Register authenticator" button is still there and the user is confused if the registration has worked or failed and if he has to click it again or not.
[We have seen this issue in the first test. In the re-test with the updated codebase, the page is redirected to the existing authenticators page as soon as the registration is confirmed on the FIDO2 hardware key. This is fine. I still document this to show that real end users run into such problems and to highlight that in this case the "Save changes" button is useless and misleading now].

[abias]

The latest codebase with @alexmorrisnz 's improvements is a real improvement.

I am just wondering if the "Save changes" button is needed at all or if it could be removed completely as it is disabled when the page is opened and as there is no need to click it as there is an automatic redirect directly after registering the authenticator successfully.

[danmarsden]

I suspect not all tokens work in this way and may need to manually enter a value and register? so in some cases the save changes might still be needed?