Add in QR code display of E2E device fingerprints

[kscz]

Definitely open to suggestions on making the display less ugly, but I couldn't find CSS which seemed to solve the issue, so I just decided to submit the pull request anyway. Let me know how you guys would like it styled!

Commit message

Use npm package "qrcode.react" to add a 128 pixel QR code to the verify device dialog as well as the User Settings page.

Allows for faster transfer and verification of end-to-end keys between desktop and mobile clients.

Signed-off-by: Kit Sczudlo kit@kitscz.com

[matrixbot]

Can one of the admins verify this patch?

[ara4n]

thanks! is there a mobile side of it?

[kscz]

I was trying to dip my toes into development here. The mobile side looked like it was going to take a substantially more time and a more complicated build environment so I figured I would just get the display in on the web side.

If you want I can hold off until I get something running Android side. I'm uncertain how I want to do the iOS side since I don't have an Apple phone or computer!

[ara4n]

I'd be worried about merging this until the mobile apps can handle them, otherwise users are going to spend ages hunting for a QR reading button that doesn't exist yet. We can help implement this (especially on iOS) though!

I'm more worried that sharing a QR of the public fingerprint may not be the right data to share, though, and in general QR codes may need to be blocked on working out a better verification code than a public fingerprint, as per the example on element-hq/element-web#2142 (comment).

However the code here is an excellent starting point - once we've solved at least the first point, if not the second, we will merge :)

[matrixbot]

Can one of the admins verify this patch?