Add enabled/disabled badge for OTP & Webauthn

[george-ma]

What problem are you solving?

Closes: https://github.com/Shopify/ruby-dependency-security/issues/320

Context: "It's a bit hard to distinguish what devices are enabled and disabled, you need to actually read the text for this. We should provide a pill or some other text to show the user easily and clearly if a device is enabled."

What approach did you choose and why?

Added a badge to easily at a glance see whether your MFA is enabled / disabled.

Testing

Visit: http://localhost:3000/settings/edit, see that OTP / Webauthn are "Disabled" initially. Add OTP / Webauthn and then see that they change to "Enabled"

Final design:

[codecov]

Codecov Report

Merging #3936 (cfc4d3d) into master (87ebbb5) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head cfc4d3d differs from pull request most recent head 711f894. Consider uploading reports for the commit 711f894 to get more accurate results

@@           Coverage Diff           @@
##           master    #3936   +/-   ##
=======================================
  Coverage   98.80%   98.80%           
=======================================
  Files         217      217           
  Lines        5417     5436   +19     
=======================================
+ Hits         5352     5371   +19     
  Misses         65       65           

Impacted Files	Coverage Δ
app/helpers/application_helper.rb	97.14% <ø> (-0.16%)	⬇️
app/avo/resources/user_resource.rb	100.00% <100.00%> (ø)
...ollers/api/v1/webauthn_verifications_controller.rb	100.00% <100.00%> (ø)
app/controllers/application_controller.rb	100.00% <100.00%> (ø)
...p/controllers/webauthn_verifications_controller.rb	100.00% <100.00%> (ø)
app/models/concerns/user_multifactor_methods.rb	100.00% <100.00%> (ø)
app/models/concerns/user_totp_methods.rb	100.00% <100.00%> (ø)
app/models/concerns/user_webauthn_methods.rb	100.00% <100.00%> (ø)
app/models/webauthn_credential.rb	100.00% <100.00%> (ø)
app/models/webauthn_verification.rb	100.00% <100.00%> (ø)

[bettymakes]

Adding these pills/badges is a huge UX upgrade! It's a lot easier to tell at a glance what's enabled vs. disabled 💯 .

I'm torn on this visual treatment though. It's looks too similar to the buttons. There's a few tweaks we can make (e.g. revising the colour, border-radius, font-weight/font-size). We're close, some minor tweaks should get us there.

[george-ma]

Agreed on it being too similar to the buttons, I just used the .css from the draft without too much thought, I'm not much of a designer but I inverted the colour of the text and got rid of the actual "pill" outline part of the badge and think it actually looks pretty good this way. I tried it with a black/grey outline but found it looks better without the outline when the text is orange. Let me know your thoughts!

[george-ma]

Improved the styling with Betty and removed the !important in the .css!
Note: The yellow (#fff6d2) comes from the flash in this proposed PR

[Schwad]

I'm not the person to be giving idiomatic css feedback 😂 but with the context I have this looks good George! :)

[george-ma]

Should be good now with the new changes: (thanks @jenshenny!)

[jenshenny]

Looking good from the screenshot! However, I don't see the colour + gap changes up when I tested the branch again. Did you push these changes up?

[bettymakes]

We're in the right direction 😄! Got some small changes and additional thought on colour palette to consider.

[bettymakes]

Small fix and then I've got no more comments 😝 . Thanks a bunch!

[ericherscovich]

I really like this, looks really good - miles better than what we started with 👍. Could you update the original PR description to include the screenshot with the final implementation, just so it's clear at first glance what the outcome of this PR was?

[george-ma]

Appreciate the fantastic .css feedback, Betty/Jenny! I also think this looks mighty fine now, and can do Eric!

edit: updated the PR description with the new design!

[simi]

Looks briliant!