holmesworcester commented 1 year ago

In #1276 we've made a way for users to open invite codes and join a community by clicking a link. However, we want them to be able to click a link that—if they don't have quiet—will take them to a download page. So we want a basic landing page with a download button that points to our homepage, if they don't have Quiet.

We don't want to reveal the invite code to our website. The trick Signal and others use is to pass the invite code as a javascript parameter with a url like https://tryquiet.org/join#INVITE-CODE. This way, the javascript running in the site sees the code after the page load but the server does not.

Designs: https://www.figma.com/file/y8h6w8PYR9jyI3zjYHL9Cl/Mobile-%2B-desktop-%2B-prototypes?node-id=1427%3A35861&t=Rda4DFJRzND1fEIl-4

Webflow export: tryquiet.webflow (3).zip (can be copy/pasted or used as a spec, whichever is easier.)

Notes:

We shouldn't include the webflow JavaScript in our page. (see: https://github.com/TryQuiet/zbay-website/issues/9)
we tackle autodetecting platform and filling in the username and community name (if available in the invite link), and fallback if the user doesn't have Quiet installed but clicks "join" in other tickets, so those aren't requirements here.
we have a separate ticket for self-hosting fonts so you don't have to worry about that here. #1318

holmesworcester commented 1 year ago

There's another thing it would be good to have on this page. Users are trusting that this page does not share the invite link with the server or some third party. Ideally someone who understands javascript and web development would be able to look at the source code of this page and verify that it is not sharing anything.

If we use any externally hosted scripts we should use subresource integrity to ensure the script code is what we expect, and we should be sure that they are secure.

We shouldn't use minified code on this page or anything that would make it hard to see what the JavaScript in the page is doing.

siepra commented 1 year ago

@holmesworcester accordingly to the requirements I did not use webflow.js and I came up with hand-written navigation.js file for handling "hamburger" menu visibility. I made it with vanilla js but the ease animation is not implemented though. I didn't change already existing pages as I thought it was best to stick to the scope of the task

holmesworcester commented 1 year ago

Sounds good.

holmesworcester commented 1 year ago

Can we do a release of android asap so I can try out this flow?

holmesworcester commented 1 year ago

One important requirement is missing. This is an easy fix but we need to be super careful about things like this.

We don't want to reveal the invite code to our website. The trick Signal and others use is to pass the invite code as a javascript parameter with a url like https://tryquiet.org/join#INVITE-CODE. This way, the javascript running in the site sees the code after the page load but the server does not.

I checked with GPT-4 and its explanation is better than mine:

siepra commented 1 year ago

kingalg commented 1 year ago

Version: 1.2.0-alpha.26

There are three bugs in this feature, but all of them are already handled in different github issues and I consider this one as done.

1448 #1440 #1437 (and some smaller ones that are also already handled)

TryQuiet / quiet

User should be able to open tryquiet.org/join invite link to join community #1279

1448 #1440 #1437 (and some smaller ones that are also already handled)