gui: Add copy to clipboard, share by email, and share by SMS buttons to device IDs (fixes #2771, ref #3868)

[tomasz1986]

Add buttons to allow for simpler sharing device IDs with others. The
first one copies the ID to clipboard (trying to use three different
methods, depending on the browser). The second one triggers a mailto
link with prefilled subject and body. The third one triggers an sms link
with prefilled body. The short description of Syncthing included in the
official website https://syncthing.net.

Issue #3868 is referred here, because the copy to clipboard button
offers an alternative method for IE11 users to actually be able to copy
device IDs without having to select it manually (which doesn't work).

Signed-off-by: Tomasz Wilczyński twilczynski@naver.com

Screenshots

[tomasz1986]

This is a draft, because I still need to figure out some CSS regarding small resolutions. Right now the buttons don't wrap and overflow the screen on mobile. I'm going to add screenshots and other details once I've fixed this problem.

As far as the email text goes, I've got some inspiration from the linked issue, and I've also checked what Dropbox says in their invitation mails (which are actually quite short, probably assuming that people already know what the software is about). If you've got any ideas how the text could be improved, please let me know in advance 🙂. I've deliberately decided not to include any direct links straight to the Docs and such, because the recipient may be using the Android app or another wrapper that has its own UI, so I've decided to link to the official site only (which has all the required information anyway).

Also, one more thing, is it actually possible to translate text inserted via mailto? It's all written in one line, and also has special formatting of spaces and new lines, so I've got no idea whether this can even be processed by Transifex at all. If not, is there any other way to insert this text, so that it could still be translated?

[acolomb]

Some GUI styling issues can probably be avoided entirely. If you describe what different behavior you'd like to achieve with the CSS, maybe I can help find a solution.

[tomasz1986]

Some GUI styling issues can probably be avoided entirely. If you describe what different behavior you'd like to achieve with the CSS, maybe I can help find a solution.

This is still a work in progress more or less. I'll try to fix the current issues first, and the come back with what's left and ask for more comments and input 🙂.

I'd also welcome very much all opinions on the e-mail text itself. For now, I'm definitely going to remove the The Syncthing Authors signature present there, simply because these e-mails won't be sent by Syncthing, but rather from the user's e-mail address.

[acolomb]

The email text sounds fine to me, except I don't know if "invited to Syncthing" conveys enough context. Syncthing is not a place, and not the device is inviting, but the user sending the mail. Suggestion:

You are being invited to synchronize with '<device-name>' using Syncthing!

Note the quotes around the device name. Could also use "collaborate" or "connect" instead of "synchronize".

[st-review]

🤖 beep boop

I'm going to close this pull request as it has been idle for more than 90 days.

This is not a rejection, merely a removal from the list of active pull requests that is periodically reviewed by humans. The pull request can be reopened when there is new activity, and merged once any remaining issues are resolved.

[acolomb]

Thought I'd have a look at the current draft status again. Overall it looks nice, but I spotted some possible improvements. One bigger request, please make this applicable to the local device as well, e.g. in the "Show QR" modal dialog.

[acolomb]

I couldn't resist taking a look at the new wip state ;-) Hope you can make use of at least the coding style comments.

[tomasz1986]

I couldn't resist taking a look at the new wip state ;-) Hope you can make use of at least the coding style comments.

Thank you very much for all the comments, although you will probably waste some time this way, as I myself am still trying out different approaches 😉.

Edit: Just in case you decide to test the current state, please check only the QR modal, as the buttons in the other one are broken at the moment.

[acolomb]

Some more coding style comments and I think you have a rather technical perspective on the explanation texts. Thus I tried to give some suggestions for more user-friendly and less technical strings.

I really like the new preview dialog overall, explaining what will (hopefully) happen. It's one more click to achieve the end result, but guiding the user through the process might be worth it. Just forget that the reason for it was "I can't detect whether it works", allowing shorter and less confusing instructions.

[uok]

You should also take a look at https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share which enables native sharing, e.g. on Android it opens actions like "share with contact on Signal"

I have added it to my own projects with multiple buttons e.g. "email", "facebook" and "share". I then show/hide whatever buttons are supported/not supported.

if (navigator.share) { 
  // sharing supported - hide all buttons except "share"
}
else {
  // sharing not supported - hide share button, keep fallback buttons
}

It works really well!

[bt90]

@tomasz1986 are you still working on this? Would love to see this merged.

[tomasz1986]

@tomasz1986 are you still working on this? Would love to see this merged.

Yeah, still planning to get back to this one sometime in the near future. Thanks for asking 🙂.

As for the the mobile-specific code suggested above, I'll probably leave it to a separate PR that would possibly follow this one, as the PR is already quite extensive, and I'm also worried that if I start to deep dive into the mobile sharing, I'll never be able to finish it.

[tomasz1986]

Yeah, according to the specs, the syntax should just be sms:?body=, but this apparently doesn't work in iOS (at least according to the Stackoverflow discussion). I've now tried to remove ;. Please try testing the current version when you've got some free time.

[xor-gate]

It seems now the To field is empty (instead of ; and the cursor/selection of the input box is now correct:

[xor-gate]

On macOS 12.3.1 it also works fine for SMS/message. Also the email share works as expected. Screenshot below is for the SMS share url:

[tomasz1986]

That was quick 🙂. It seems we've got macOS and iOS covered then.

The current iteration also works fine for me here on Samsung Android.

[acolomb]

Confirmed to work on my Google Pixel (Android 13) as well.

Just out of curiosity, is there similar functionality in recent Windows versions? Can e.g. Microsoft's "Surface" tablets with cellular modem send SMS? (Shouldn't block this PR though when we have the two biggest mobile OSes covered.)

[tomasz1986]

Just out of curiosity, is there similar functionality in recent Windows versions? Can e.g. Microsoft's "Surface" tablets with cellular modem send SMS? (Shouldn't block this PR though when we have the two biggest mobile OSes covered.)

Judging by what people write online, the answer is "yes", at least on some devices, but I haven't used any Windows tablets with a modem built in, so I don't really know any details. In theory, the link should work there too.

[xor-gate]

@tomasz1986 because nobody did merge after approval the feature branch has a merge conflict and is now unable to be merged. Could you sync the changes back so the branch is mergeable?

[tomasz1986]

@tomasz1986 because nobody did merge after approval the feature branch has a merge conflict and is now unable to be merged. Could you sync the changes back so the branch is mergeable?

Done! Thanks for giving a hint, as I completely forgot about checking the older PRs for conflicts 😳.

[xor-gate]

@acolomb i'm not involved in the syncthing daemon development. Who is responsible for merging so it can be shipped with the v1.22.2 release window?

[acolomb]

I was hesitant to merge because no other maintainer had commented much. And I don't see myself making last calls on features without an opinion from one of them.

[xor-gate]

I was hesitant to merge because no other maintainer had commented much. And I don't see myself making last calls on features without an opinion from one of them.

Totaly agree with this. But LGTM.

[acolomb]

After no objections, let's go ahead and try pouring this over the brave RC users...