Show TOTP Copy Button only when TOTP is stored/enabled

Feature name

  • Don’t show the TOTP Copy Button when there’s no TOTP Secret stored

Feature function

  • Removal of the TOTP Copy Icon in the Browser Extension instead of Disabling
  • Users are not disturbed anymore about an Icon that’s still shown next to the Copy Buttons
  • I do not prefer if there is a Settings Option to toggle the view of the button, i would already be happy if the button is not shown :slight_smile:

To me it should look like this, because i have no TOTP Secret stored for Google:
image

Related topics + references

Yeah I was really confused when that button appeared without warning and ended up submitting a help post about it. It’s really poor design to make a button show up that does nothing and not even explain what it is.

2 Likes

Remember, there will be many people that use 2FA wherever they can. Personally I’m really pleased with the change.

3 Likes

I can understand, my list of TOTP Secrets is long, but for security reasons, i do not store them in the same Place where i store my Passwords, because this in my Opinion undermines the Security of the Tokens.
Don’t get me wrong, i understand why people wanted this button for convenience reasons, but for people that simply don’t store tokens, the button is completely unnecessary shown.

Then perhaps an option in settings to toggle the display of this button on/off would be a better idea. I wouldn’t want it to be removed.

2 Likes

sure, also an option, but why show the button, when there’s nothing to copy when TOTP is not configured for the particular entry? I’m not talking about removing in general

If the button is only there some of the time, it could get a bit confusing. People may expect the right-most button to be for TOTP codes but sometimes it’ll be passwords. The design needs to be uniform. Having it there but disabled makes more sense but allowing people to completely turn it off in settings would be a good compromise.

2 Likes

I’m out of votes (we really need more votes per person!), but I welcome the ability to toggle this new icon off.

I have an easy solution for the dev.
Instead of hidding the icon, replace it with a blank one so the grid will look the same.
You already have a different class for an active TOTP button and an inactive one (class=disabled) .

1 Like

Greying it out if no secret is stored for that logon may be the best approach.

2 Likes

Yes, that’s what they do now and it’s my favoured approach.

1 Like

I didn’t like the new TOTP clutter in Bitwarden’s UI, so I removed it.

Here’s my code to accomplish this:

span.disabled[title="Copy Verification Code"] {
	display: none;
}

For the persons who doesn’t know you can say where to put this…
Also this is working only on an English system…

Where do I put that code to hide it??

Which web browser are you using and are you familiar with CSS coding?

Firefox. And no, I’m not really familiar with CSS.

Okay. No problem at all. On a scale of 1 to 10, how good are you with computers? 1 being a beginner and 10 being extremely knowledgeable? I’ll cater the instructions to your level of knowledge.

I’m very familiar with computers and technology, I’m just not a programmer.
I do have a “userChrome.css” already setup in Firefox. Is your code something I can just add to that?

You’re in real good shape with your level of knowledge.

In the same folder as userChrome.css, do you also have userContent.css?

If so, add the following code to the end of that file:

/* remove TOTP icon from each item */
@-moz-document regexp("^moz-extension://.+/popup/index\\.html(?:\\?uilocation=.+)?$") {
   span.disabled[title="Copy Verification Code"] {
      display: none;
   }
}

If you don’t already have a userContent.css file in that folder, simply create a new text file with that code.

That’s it! Now restart Firefox, and voilà, those pesky buttons will be gone!

(Note that this code is specific for the English language, but you can easily adopt it to any language by replacing “Copy Verification Code” with the corresponding string for any language. The case-sensitive string can be identified by using the string in the tooltip presented when hovering over the TOTP button.)

1 Like

Thanks for the clear directions. That worked perfectly! Now the annoyance is gone for me at least. Thanks again!

1 Like