Create UI

[pkevan]

Pulling out the discussion from slack and including the screenshots for reference. All text pulled as is, so not necessarily me saying it 😄

https://a8c.slack.com/archives/C0393K4ADM3/p1668679184861899?thread_ts=1668663080.269429&cid=C0393K4ADM3
So to summarize my advice, and I’m sure there are a lot of technical gotchas that make this a unique challenge:

• Unify profiles if you can, otherwise place the flow where it makes the most sense. My instinct is the main profile, but if your instinct says forum profile, alright then.
• Instead of a single box that sits on the main profile, see if it can be a single “activate” and “deactivate” button, that moves you into a stepped flow instead of all happening in the same place.

Example of the potential flow:

the WP.org profile could have a similar single button under a “Security” subheading: “enable 2fa”.

Clicking said “enable 2fa” button would take you to an entirely new page, step 1 of a sequence of steps, and the first step could be choosing an app or sms, depending on the tech available

That would then show the QR code contextually to the step

Activating would let you see backup codes, and you can check the box to enable the next step

Finally, a nice little notice that you’ve activated 2fa, and the “Activate 2fa” button on the security section of your profile would instead become “disable 2fa”.

[pkevan]

In follow-up to #5

[tellyworth]

Also related, #15 (which is about the question of on what page the UI should go).

Let's aim for the simplest and most flexible thing that will work. Perhaps:

• Add a simple "enable/change 2fa" link somewhere on the Edit Profile page, similar to the way Github linking was done:

• Wrap the UI in a class/function/block/whatever that's fairly easy to put in any page we want.
• Have the "enable" link take you straight to the QR screen? (since we're not allowing sms as an option)
• More-or-less duplicate the Dotcom UI - mostly it would just need the QR code and backup code pages.
• For initial dev/test purposes, put it on a public test page anywhere that makes sense, with a sandbox/proxy gateway if it needs to be deployed.

[iandunn]

Closing this since we now have smaller issues for all of this.