Two UX improvements on the 2FA form

[nhoening]

Description

Implement two UX improvements on the 2FA form, which we found in a user test.

Closes #1761 See that issue for other suggestions which we are not tackling here.

Look & Feel

Before:

After:

TODO

• [x] Fix user message
• [x] Hide form content which is only used when user has trouble
• [ ] Added changelog item in documentation/changelog.rst

[read-the-docs-community[bot]]

Documentation build overview

📚 flexmeasures | 🛠️ Build #30763121 | 📁 Comparing 4c20e83e278615568c27d2eec3b2d62ed64b7402 against latest (75e05d40de5f87930caaf0e8cda99907bbdc8691)

🔍 Preview build

Show files changed (2 files in total): 📝 2 modified | ➕ 0 added | ➖ 0 deleted

File	Status
changelog.html	📝 modified
api/v3_0.html	📝 modified

[joshuaunity]

I have seen this page while using the live staging, but on my local, i don't actually come across this page. What can i do to get to see this page?

My local goes straight to dashboard when i login.

@nhoening @Flix6x

[joshuaunity]

Although a different approach was mentioned in the issue, I believe this design would be better. We don't have to create an extra page for the other form(as its a pretty small component), it can still be left here and can be visible on command.

@Flix6x

[joshuaunity]

Also, have you tested if this works on a mobile device? I see you used data-bs-toggle="collapse" so that is a good, stable choice and I expect it would, but let's be sure.

I tested this and it works fine