[auth] Save button on TOTP element editing

[Eseltwift]

Hi!

I find the current ergonomics of the button to save modifications made to a TOTP code quite poor.

Indeed, on iPhone (iOS 17), the keyboard covers the Save button. By reflex, I tend to click the back arrow located at the top left of the page. However, by doing this, no data is saved.

Here are the solutions I propose:

1. Move the Save (or Done) button to the top right of the page as recommended by the iOS Design System. In this case, it would be wise to replace the back arrow with a clearer term like Cancel.

2. Make the changes save automatically. This way, the save button could be removed. This obviously has a great advantage in terms of user experience as there is no need to search for how to save the modifications. However, it also presents risks in case of mishandling, which could lead to the loss of the secret key.

Personally, I find that the first solution is clearer and avoids user errors. It also respects the design rules on iOS much better (I don't know about Android).

[mnvr]

I agree with the problem, but not with the solutions.

The first solution is not good because it forces the user to use two hands (and it is not in the "iOS design system" to place the done button at the top right). If you look at Apple themselves, they're slowly realizing this and moving more and more of user interactable elements to the bottom of the screen where they can be reached by people without needing to move their hand out of position or involve the second hand. For example, they moved the address bar in Safari at the bottom.

The second solution is not appropriate too, as you mentioned.

Luckily, I think the fix is simple, it just seems like a bug that the save button is not moving alongwith the keyboard. If the save button were to move up alongwith the keyboard, it'd be always reachable, and wouldn't also not require juggling the keyboard. And there is enough space on this screen to make everything cosy even if we have a big save button visible.

Another improvement that can be made is to use the keyboard done button as another save button (in addition to the main one). Next Next Done.

[Eseltwift]

Indeed, if it's possible to move the Save button with the appearance of the keyboard that would be perfect.

However, I think it's still necessary to replace the return arrow at the top left with the word Cancel (or else keep the arrow with the Cancel label). This would make the return action much clearer and also improve accessibility.

[mnvr]

Agreed! It's not so much as the arrow vs cancel but the fact that it doesn't prompt before discarding changes. A cancel is more common on a modal / sheet, whereas here we are navigating with a swipe so a back button is still appropriate. But the silent discarding of changes is an issue with a back arrow (and wouldn't be with a cancel button), so if we stick with an arrow we should introduce a confirmation.

(I'm just drive by commenting here, I overall agree with the problems you're outlining, but I'll let our design folks decide on what is the most appropriate solution)