Let users confirm their TOTP setup before enforcing the provider

[ChristophWurst]

Users might have trouble get their TOTP app to work. By checking
whether their basic setup is configured correctly, we lower the
risk of users being locked out unexpectedly.

TODO

• The 2FA provider must not be used before the user confirmed that the TOTP setup works by providing a sample key
• Better UI and UX, maybe by splitting the interaction into different steps the user has to complete.
• Tests

Fixes #22

[ChristophWurst]

@rigrig @RobThree @MariusBluem @trockenasche @Finkregh @Myatu @My1 @z3ntu @ngrundmann @r2evans @Xuanwo @Framartin here it is, the feature you gave your 👍 for :-) Please help test and review this PR, then I can release this in about two weeks (translators should get a chance to translate the new strings) 😉

[ChristophWurst]

If you want to see it in action, watch the automated test run: https://saucelabs.com/beta/tests/e243977543794352bbde1cba61131803/watch#38 🍿

[rigrig]

Awesome, thanks for implementing this.

I don't have flash installed, so had to test it myself ;-)

What I did:

1. Unchecked the TOTP box
2. Checked the TOTP box -> I was shown a new key, QR code and asked to input a valid code
3. Verified the key matched the QR code
4. Entered the new key in my authenticator app
5. Entered a wrong code -> I was told the code was wrong, TOTP was not enabled
6. Entered the right code -> TOTP was enabled
7. Logged out
8. Tried to log in with a wrong code -> I was told the code was wrong
9. Entered the right code -> I was logged in

As far as I can tell everything works fine.

[ChristophWurst]

Hey cool, thanks for testing manually :-)

Let's wait, maybe we can get a second review/test, this is a relatively big change compared to the other PRs -> "given enough eyeballs, all bugs are shallow" 😉

[rigrig]

Actually: while the code seems to be working fine, screenshots/settings.png now is wrong.

I'm using some horrible dark theme myself, so the best I can offer is edited versions of the original screenshot with the new interface

Or without the NC version header (because it now looks a bit cramped without the proper spacing)

: