Copying invite link to clipboard appears to fail in Safari (desktop)

[LarsKemmann]

The issue is that Safari requires clipboard writes to be done in response to a "user gesture", and we are first doing a fetch to get the invite link from the API. Since the API call should only happen when the user wants to perform this operation, the safe cross-browser solution is to:

• make the API call and store the returned invite link in component state (useState),
• when the invite link is in state, show a (modal) popup dialog that displays the link text to the user in a text field, and
• provide a 'copy' button (with icon) to the right of the text field.
• The dialog should also have a close button and be dismissable.

In addition, for browsers like Chrome where a more seamless experience is possible, we could optionally:

• use await navigator.permissions.query({ name: 'clipboard-write', allowWithoutGesture: true }) to check if copying can be done noninteractively, and
• if copying can be done noninteractively, do it and show a "copied!" notification.

(see https://web.dev/articles/async-clipboard)

[LarsKemmann]

Need to set up a MacinCloud environment to test this with and troubleshoot.

[LarsKemmann]

@PabloDinella @Rabi94 Please take a look at this issue this week.

[PabloDinella]

Ok!