Copy deep link when using Element client

Copying the link helps clients to retrieve the room the user originally tried to reach if they are going through the signup flow

src/open/ClientView.js

@@ -82,8 +82,8 @@ class InstallClientView extends TemplateView {
                 className: "copy",
                 title: "Copy instructions",
                 "aria-label": "Copy instructions",
-                onClick: evt => {
-                    if (copy(vm.copyString, copyButton.parentElement)) {
+                onClick: async (evt) => {
+                    if (await copy(vm.copyString, copyButton.parentElement)) {
                         copyButton.className = "tick";
                         setTimeout(() => {
                             copyButton.className = "copy";

src/open/ClientViewModel.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js";
 import {ViewModel} from "../utils/ViewModel.js";
-import {IdentifierKind} from "../Link.js";
+import { copy } from "../utils/copy.js";
 
 function getMatchingPlatforms(client, supportedPlatforms) {
     const clientPlatforms = client.platforms;
@@ -51,25 +51,8 @@ export class ClientViewModel extends ViewModel {
         this._showOpen = this.openActions.length && !this._clientCanIntercept;
     }
 
-    // these are only shown in the open stage
-    _createOpenActions() {
-        const hasPreferredWebInstance = this.hasPreferredWebInstance;
-        let deepLinkLabel = "Continue";
-        if (hasPreferredWebInstance) {
-            if (this._proposedPlatform === this._nativePlatform) {
-                deepLinkLabel = "Open in app";
-            } else {
-                deepLinkLabel = `Open on ${this._client.getPreferredWebInstance(this._link)}`;
-            }
-        }
-        const actions = [];
-        const proposedDeepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
-        if (proposedDeepLink) {
-            actions.push({
-                label: deepLinkLabel,
-                url: proposedDeepLink,
-                primary: true,
-                activated: () => {
+    _onDeepLinkClicked = async () => {
+        await copy(this.proposedDeepLink);
         this._pickClient(this._client);
         this.preferences.setClient(this._client.id, this._proposedPlatform);
         // only show install screen if we tried to open a native deeplink
@@ -77,6 +60,28 @@ export class ClientViewModel extends ViewModel {
             this._showOpen = false;
             this.emitChange();
         }
+    }
+
+    // these are only shown in the open stage
+    _createOpenActions() {
+        const hasPreferredWebInstance = this.hasPreferredWebInstance;
+        this.deepLinkLabel = "Continue";
+        if (hasPreferredWebInstance) {
+            if (this._proposedPlatform === this._nativePlatform) {
+                this.deepLinkLabel = "Open in app";
+            } else {
+                this.deepLinkLabel = `Open on ${this._client.getPreferredWebInstance(this._link)}`;
+            }
+        }
+        const actions = [];
+        this.proposedDeepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
+        if (this.proposedDeepLink) {
+            actions.push({
+                label: this.deepLinkLabel,
+                url: this.proposedDeepLink,
+                primary: true,
+                activated: async () => {
+                    this._onDeepLinkClicked();
                 },
             });
         }
@@ -105,6 +110,18 @@ export class ClientViewModel extends ViewModel {
                     activated: () => this.preferences.setClient(this._client.id, this._nativePlatform),
                 };
             });
+
+            if (!this._webPlatform && this.proposedDeepLink) {
+                actions.push({
+                    label: this.deepLinkLabel,
+                    url: this.proposedDeepLink,
+                    primary: true,
+                    activated: async () => {
+                        this._onDeepLinkClicked();
+                    },
+                })
+            }
+
             actions.push(...nativeActions);
         }
         if (this._webPlatform) {

src/utils/copy.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,7 +22,13 @@ function selectNode(node) {
     selection.addRange(range);
 }
 
-export function copy(text, parent) {
+export async function copy(text, parent) {
+    if ("clipboard" in navigator) {
+        const type = "text/plain";
+        const blob = new Blob([text], { type });
+        const data = [new ClipboardItem({ [type]: blob })];
+        return navigator.clipboard.write(data);
+    } else {
         const span = document.createElement("span");
         span.innerText = text;
         parent.appendChild(span);
@@ -31,6 +37,7 @@ export function copy(text, parent) {
         parent.removeChild(span);
         return result;
     }
+}
 
 export function copyButton(t, getCopyText, label, classNames) {
     return t.button({className: `${classNames} icon copy`, onClick: evt => {