Feature Request: ability to change the name of a device about pairdrop

[schlagmichdoch]

I have found a compromise that I'm happy with and that I will merge. Thanks for your help!

[schlagmichdoch]

This is now live🎉

[schlagmichdoch]

Does this already exist and I've missed it somewhere?

Not yet, I like the idea though.

What I like about the current implementation on the other hand is that devce names are always unique so you can not be misled by two devices with the same name and noone can impersonate someone else and that the server does not get any private information (like rthatguy macBook would be).

To make spoofing clearer I would add an indicator to differentiate between devices that are simply paired and devices that are paired while on the same network.
Blue Background=local network, Green Accent=paired, Green Background + Green Accent=Paired + not on local network

And then there is the security number which identifies a device uniquely. Do you think that should be hidden from the user behind an information symbol to tidy up the GUI?

To make the name information private, I would implement it in a way, that a device sends its edited name to all connected devices instead of to the server for distribution.

There is one problem though. When opening PairDrop on mutliple tabs, all instances will be called the same whereas right now it is clear who is who. Any ideas? Maybe it could be possible to name them "my phone (2)" "my phone (3)" etc. automatically. Or do you think the security number is enough to identify a client?

[rhatguy]

I like the idea of differentiating between local network devices and remote devices. I don't have a big preference between showing the unique device id or hiding it behind an information symbol. What about to differentiate between local network and not instead of the UID you added "(local)" or something like that. I feel like people might wonder if the green accent meant the device was online or not. Maybe the third line could show the device as local or remote, and then have the uuid as a tooltip pop-up from an information symbol?

Another idea I had was to use colors on the icons for the devices. Maybe a blue circle filled with the background color could mean remote, while a filled in blue circle could mean local. I think I'm more a fan of my previous suggestion since it specifically tells the user what you want them to know (local or remote), while other ways require the user to know what certain colors or icons mean.

[Bellisario]

Just watching this issue and having some implementation suggestions:

• hiding the UUID (ex. tooltip) would be great since most users won’t probably check it (but “advanced” users will)
• the UUID should be simple to be checked and not too long (ex. people ask each other to verify their ID): 4 digits (0 included) should be sufficient (10^4 = 10.000 possibilities)
• To simplify the rename (“Device (1…2…3)”) process I would probably check each time a client joins if already exists the same name (on clients already joined), if yes add “ (1)” to the name etc.
• To differentiate local clients and room clients I would add a dashed border to the client “logo” (out of the blue circle), without changing any color. Hovering it, you could see a label (containing also the UUID) saying the the device is not in local mode but joined the room created.

The only problem with all said above is that hovering is not possible on mobile devices, so here should be displayed always all the info (or omitted for ex. the “room client instead of local” info message).

Anyway, what do you think?

[schlagmichdoch]

Thank you @rhatguy and @Bellisario

As I think this somewhat unclear: The security number is not meant to be a UUID but a proof that no MITM has overtaken the PairDrop server. The UUID is created by creating a hash of the combined signaling information of the webrtc clients and would differ on both devices if a MITM attack would take place. It is therefore no option to shorten it to 4 digits.

---

hovering is not possible on mobile devices

True. Maybe a click on the information symbol (like the "About" symbol) could open a small dialog showing all information about the peer including the legend for the colors and the security number.

---

To simplify the rename (“Device (1…2…3)”) process I would probably check each time a client joins if already exists the same name (on clients already joined), if yes add “ (1)” to the name etc.

I think this is maybe not enough. For all devices that see each other, the names must be precisely the same. If one client leaves the count is maybe changed. Also what happens on one of the duplicate devices? How would I know with what suffix I'm shown to my colleague?
I think the algorithm must work independently from the order of joining the network. Maybe sth like: If devices (A), (B) and (C) are in the same local network and (A) and (B) have the same name, sort them by peerId and number them accordingly. But what if (C) now paires with another device (D) with the same name? Now (C) sees 3 devices with the same name, (A) and (B) see 2 devices with the same name and (D) does not see any duplicates. How would the order then be?

All in all, I would rather not number duplicates but leave the security number in the UI as it is now. That way, all devices are clearly identifiable and the differentiation is completely independent from the configuration or the paired devices.

---

To differentiate local clients and room clients I would add a dashed border

Dashed borders always look like a draft or as if sth is missing in my opinion 🤷‍♂️

I like the idea of differentiating between local network devices and remote devices.

I think there are two options:

• the background color differentiates devices into not paired (blue) and paired (green) and some accent is used to differentiate paired devices into local and remote
• the background color differentiates devices into local (blue) and remote (green) and some accent is used to differentiate local devices into paired and not paired

Personally I would prefer the second option, as the more important information is whether devices are local or remote.
What do you think?

[Bellisario]

Yes, probably the second option is the better. I would use opacity to lower “visibility” on not paired devices to differentiate from paired.

[schlagmichdoch]

I gave it a try and implemented everything here: #57
Am quite happy with the result. @rhatguy and @Bellisario , could you please test it on https://pairdrop-dev.onrender.com/

[Bellisario]

Just tried (tested only on a single browser with self-showing peer using another tab and only on desktop) and seems pretty good.
I would suggest to change the contenteditable div CSS to show the cursor as text (cursor: text;) and maybe set "default" cursor on near content ("You are known as: [...]" and "You can be discovered [...]") to better differentiate the "editable" and "not editable" text.

[schlagmichdoch]

Thanks! Just did that and merged in lots of new changes from the master. Would you please test again before I merge this?

[Bellisario]

Of course! Made another test (with two devices on the same network and different network) and works as expected.

Another UI suggestion just came to my mind: adding a min-width to the (editable) name would be useful to prevent the div resizing every single time (for "short" names) and continue to resize on longer names.

[Bellisario]

Tried to edit with DevTools and found a bit of style combination to better "fake" the div as input:

Appended the following code to the div style

background: rgba(0, 0, 0, 12%);
padding: 0 0.5em;
border-radius: 0.5em;

---

Anyway this change will require a bit of translation for the pen svg...

[schlagmichdoch]

If I change your code to

background: rgba(0, 0, 0, 12%);
padding-right: 1.5rem;
padding-left: 0.5em;
border-radius: 0.5em;

and css of #edit-pen to:

width: 2rem;
margin-left: -2rem;

it looks like this:

compared to the current design:

Not sure whether I prefer it over the current design though as it looks like its always in editing mode.
@rhatguy What do you think?