[totp] feat: set and verify tools

[victorgcramos]

This PR Closes #2120

This diff adds the SET and VERIFY TOTP (Time-based One-Time Password) features. Now users will be able to set the Two-Factor Authentication (2FA) on their accounts , which will be required to perform the login action once it's enabled.

How to set the 2FA?

This tutorial was made using the FreeOTP app, an open source two-factor authentication application for systems utilizing one-time password protocols.

1. 👤 On your Account page, go to the Two-Factor Authentication tab.
   Before setting the 2FA on your account, please remember to save the backup key. This will be required in case you lost your authenticator.

   The backup key should be treated the same way you treat a password and should not be stored digitally.

2. 🤳 Scan the QR Code with your authentication app. In this case, we'll be using FreeOTP.

3. 📲 Verify the 6-digits code generated by the authenticator.

Example:

The 2FA can also be enabled on CMS

😄 🔐 Done! You have enabled the 2FA on your account

How to disable the 2FA

After setting the TOTP, you can disable it on Account > Two-Factor Authentication.

Just fill in the blanks with the 6-digits code generated by your authenticator

Example:

How to recover the authentication code.

Once you have the backup key saved, you can recover it by generating a new QR Code from it. In this case, I'll be using the FreeOTP QR Code Generator:

1. Change the algorithm to SHA1 instead of SHA256

2. Set it to Timeout

3. On Account field, type your username

4. On Secret (Base 32) insert the saved backup key

   You should see something like this:
   

5. Scan the generated QR Code. Now you have recovered it and you can use it to login to your account.

[alexlyp]

tACK works well and looks pretty good.

[alexlyp]

works great on login!

only suggestion i have is to have a definite cursor or highlight on mousing over an already populated digit.

Currently once a digit is populated the blue line doesn't change to it's hard to know if you have that digit selected.

Maybe change it to a slightly darker blue tone when already populated and hovered?

[tiagoalvesdulce]

Good job, left a few comments.

[thi4go]

Hey mate functionality working great, nice job. Got just few comment.

As of now, I have to fail a login first to enable totp code insertion, and then do a successful login. Not sure the best way to go here, but I thought of two things; we can store this info on the user's browser (not a fan of this), or we could add a checkbox on the login form that shows/hides the totp input part.

[tiagoalvesdulce]

Code is looking pretty good.

Some points:

1. These should be submitted when hitting enter.

2. The switch should be focused after hitting tab on password (tabindex)

3. This loading indicator should be centered

4. Question: Can you edit the recommended logo in the TOTP authenticator app?

[victorgcramos]

@tiagoalvesdulce updated the code to include the requested changes. About item 4, I don't think we can change that. From what I could see, this is up to the TOTP App, not the code itself.

After taking a look at https://github.com/pquerna/otp (the one we use on backend), I couldn't figure a way out to handle this default image.

[tiagoalvesdulce]

Looking great!