ShareBoard: Copy link

webapp/src/components/shareBoardComponent.scss

@@ -1,13 +1,27 @@
 .ShareBoardComponent {
     display: flex;
     flex-direction: column;
+    padding: 5px;
 
     > .row {
         display: flex;
         flex-direction: row;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+
+    > .row:last-child {
+        margin-bottom: 0;
     }
 
     .spacer {
         flex-grow: 1;
     }
+
+    input.shareUrl {
+        flex-grow: 1;
+        border: solid 1px #cccccc;
+        margin-right: 5px;
+        padding: 5px;
+    }
 }

webapp/src/components/shareBoardComponent.tsx

@@ -3,6 +3,8 @@
 import React from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
 
+import {Utils} from '../utils'
+
 import Button from '../widgets/buttons/button'
 import Switch from '../widgets/switch'
 
@@ -16,6 +18,7 @@ type Props = {
 
 type State = {
     isShared?: boolean
+    wasCopied?: boolean
 }
 
 class ShareBoardComponent extends React.PureComponent<Props, State> {
@@ -24,6 +27,10 @@ class ShareBoardComponent extends React.PureComponent<Props, State> {
     render(): JSX.Element {
         const {intl} = this.props
 
+        const readToken = '123'
+        const shareUrl = new URL(window.location.toString())
+        shareUrl.searchParams.set('r', readToken)
+
         return (
             <Modal
                 onClose={this.props.onClose}
@@ -39,7 +46,20 @@ class ShareBoardComponent extends React.PureComponent<Props, State> {
                     </div>
                     {this.state.isShared &&
                         <div className='row'>
-                            <Button>{'Copy link'}</Button>
+                            <input
+                                className='shareUrl'
+                                readOnly={true}
+                                value={shareUrl.toString()}
+                            />
+                            <Button
+                                filled={true}
+                                onClick={() => {
+                                    Utils.copyTextToClipboard(shareUrl.toString())
+                                    this.setState({wasCopied: true})
+                                }}
+                            >
+                                {this.state.wasCopied ? intl.formatMessage({id: 'ShareBoard.copiedLink', defaultMessage: 'Copied!'}) : intl.formatMessage({id: 'ShareBoard.copyLink', defaultMessage: 'Copy link'})}
+                            </Button>
                         </div>
                     }
                 </div>

webapp/src/utils.ts

@@ -208,6 +208,29 @@ class Utils {
     static arrayMove(arr: any[], srcIndex: number, destIndex: number): void {
         arr.splice(destIndex, 0, arr.splice(srcIndex, 1)[0])
     }
+
+    // Clipboard
+
+    static copyTextToClipboard(text: string): boolean {
+        const textField = document.createElement('textarea')
+        textField.innerText = text
+        textField.style.position = 'fixed'
+        textField.style.opacity = '0'
+
+        document.body.appendChild(textField)
+        textField.select()
+
+        let result = false
+        try {
+            result = document.execCommand('copy')
+        } catch (err) {
+            Utils.logError(`copyTextToClipboard ERROR: ${err}`)
+            result = false
+        }
+        textField.remove()
+
+        return result
+    }
 }
 
 export {Utils}