Add "Show TOTP" to context menu

[OLLI-S]

Expected Behavior

At the website of the game Ashes of Creation.com (https://ashesofcreation.com/) the TOTP field is segmented in multiple fields (one field for each number):

It would be cool if KeePassXC fills the TOTP in these segmented fields.

Current Behavior

KeePassXC is not filling the TOTP.

Possible Solution

If KeePassXC can not fill the TOTP in multiple fields, then there should be a new entry in the context menu: KeePassXC Browser -> Show TOTP This shows the dialog with the TOTP and I can type it manually.

[varjolintu]

You can already copy the TOTP using KeePassXC directly.

Could you copy/paste the html code of those input fields as an example? It would be good to know if those have any ID's or anything related so those can be possibly identified as a 2FA fields?

[OLLI-S]

You can already copy the TOTP using KeePassXC directly.

I know that I can search for the entry in KeepassXC and the copy the TOTP code. But my idea prevents me from searching. It you have an other solution in mind, please tell me!

Could you copy/paste the html code of those input fields as an example?

I am really to stupid to copy a larger HTML block in chrome without loosing the line breaks and indent of code. I had to copy the source in an HTML editor, add line breaks and indent the code manually. So here is the code:

<form data-v-7bf471d4="" class="form-two-factor">
	<!----> 
	<div data-v-4db9662b="" data-v-7bf471d4="" class="two-factor-form">
		<div data-v-4db9662b="" class="d-none d-sm-block">
			<div data-v-4db9662b="" role="group" class="input-group two-factor-code">
				<!---->
				<input data-v-4db9662b="" name="key1" type="text" placeholder="X" class="form-control" id="__BVID__42" data-kpxc-id="__BVID__42"> 
				<input data-v-4db9662b="" name="key2" type="text" placeholder="X" class="form-control" id="__BVID__43" data-kpxc-id="__BVID__43"> 
				<input data-v-4db9662b="" name="key3" type="text" placeholder="X" class="form-control" id="__BVID__44" data-kpxc-id="__BVID__44"> 
				<input data-v-4db9662b="" name="key4" type="text" placeholder="X" class="form-control" id="__BVID__45" data-kpxc-id="__BVID__45"> 
				<input data-v-4db9662b="" name="key5" type="text" placeholder="X" class="form-control" id="__BVID__46" data-kpxc-id="__BVID__46"> 
				<input data-v-4db9662b="" name="key6" type="text" placeholder="X" class="form-control" id="__BVID__47" data-kpxc-id="__BVID__47">
				<!---->
			</div>
		</div> 
		<div data-v-4db9662b="" class="d-block d-sm-none">
			<div data-v-4db9662b="" role="group" class="input-group two-factor-code-mobile">
			<!---->
			<input data-v-4db9662b="" name="mobileInput" type="text" placeholder="X X X X X X" class="form-control form-control-6" maxlength="6" id="__BVID__48">
			<!---->
			</div>
		</div>
	</div> 
	<button data-v-7bf471d4="" type="submit" disabled="disabled" class="btn btn btn-lg btn-intrepid btn-block two-factor-submit btn-secondary disabled">Sign In</button>
</form>

[varjolintu]

As I thought: the input fields have no ID or text that could give even a hint that those are used for 2FA. The only way to regognize them would be to inspect the parent div/form/element/whatever, but even that cannot provide any reliable results. So I'm gonna put a wontfix to this.

EDIT: It would be possible to do something if the type would be number, but with text this would mess up a lot of sites.

[OLLI-S]

I suggested above in Possible Solution to add an entry in the context menu of the web browser called Show TOTP.

So for this website I would right click in the first field, select KeePassXC Browser -> Show TOTP and then see the KeePassXC TOTP dialog for this website (I don't have to search for the entry in KeePassXC manually).

Here a quick fake how this would look (the TOTP is also faked):

[OLLI-S]

@varjolintu would you please consider removing the wontfix tag if my suggestion (adding a new entry in the context menu) is valid?

[varjolintu]

The issue is now modified. We need to think this over how the TOTP is going to be displayed if this feature is made. A notification, or a separate dialog etc.

I'm in favor to add "Copy TOTP" to the context menu instead of showing it.

[OLLI-S]

The issue is now modified.

Thank you, I also thought about changing the topic title...

I'm in favor to add "Copy TOTP" to the context menu instead of showing it.

@varjolintu In my opinion you need both options:

• Copy TOTP for websites where the TOTP can be pasted normally (one field)
• Show TOTP for websites where you have one field for every digit of the TOTP code (pasting is not working here, I tested it)

Then users can fill TOTP also for websites, where the KeePassXC Browser Plugin can not automatically fill the TOTP.

[mlavi]

I would also advocate that a "Paste TOTP" is even more valuable than copy, but both should be offered since there are so many situations.

[varjolintu]

@mlavi "Fill TOTP" already exists, so "Paste TOTP" would be a strange move.

[mlavi]

@varjolintu Good point, let me elaborate with an image...

Because this HTML form for TOTP entry is across several fields, when I used "Fill TOTP" it seemed to paste a value into the first field exclusively, not across the rest, and therefore my entry was refused.

However, if I copied the TOPT value from KeepassXC directly, then pasted into the first field, it populated the fields properly. So that is why I wonder: would a simple paste would be functionally different from the Fill TOTP?

I realize this is entirely the fault and perhaps the intent of the HTML form designer to force manual entry one character at a time, but a "Copy TOTP" would be helpful for these situations. If Paste TOTP couldn't function any differently from Fill TOTP, I agree! Thanks.

[varjolintu]

The problem with this implementation is that there's no standard way for pages to define those 6 fields. But I can try to implement it in a way that if the extension detects 6 TOTP fields, it divides the fill between those.

EDIT: The biggest problem with these fields are that usually those are defined just as a typical input field without any name or indication that these are 2FA fields. Only the parent div or form might have a hint about it.

[varjolintu]

@mlavi Could you share the source code of that 2FA form that's shown in your image? Thanks.

[appuchias]

@varjolintu It's the login page of Authelia.

I got this HTML from my auth page, but you might find it in their repo

[varjolintu]

@varjolintu It's the login page of Authelia.

I got this HTML from my auth page, but you might find it in their repo

Sorry, how is this related to this issue?

[appuchias]

Sorry, I forgot to add some context, I was referring to the last mlavi's image. (in the message)

[mlavi]

I am so sorry for not following up @varjolintu , @appuchias is entirely correct.