Copy ip address to clipboard

3 files changed, 42 insertions, 4 deletions

diff --git a/app/actions/connect.js b/app/actions/connect.js
index dc794a01d7..a63496661a 100644
--- a/app/actions/connect.js
+++ b/app/actions/connect.js
@@ -1,7 +1,23 @@
+import { clipboard } from 'electron';
 import { createAction } from 'redux-actions';
 
+/** Action for changing connection state */
 const connectionChange = createAction('CONNECTION_CHANGE');
+
+/** Action for connecting to server */
 const connect = (backend, addr) => () => backend.connect(addr);
+
+/** Action for disconnecting from server */
 const disconnect = (backend) => () => backend.disconnect();
 
-export default { connect, disconnect, connectionChange };
+/** Action for copying IP address in memory */
+const copyIPAddress = () => {
+  return (_, getState) => {
+    const ip = getState().connect.clientIp;
+    if(typeof(ip) === 'string') {
+      clipboard.writeText(ip);
+    }
+  };
+};
+
+export default { connect, disconnect, copyIPAddress, connectionChange };
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 5e44fdd8ae..429b617526 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -13,6 +13,7 @@ export default class Connect extends Component {
     settings: PropTypes.object.isRequired,
     onSettings: PropTypes.func.isRequired,
     onConnect: PropTypes.func.isRequired,
+    onCopyIP: PropTypes.func.isRequired,
     onDisconnect: PropTypes.func.isRequired,
     getServerInfo: PropTypes.func.isRequired
   };
@@ -20,8 +21,15 @@ export default class Connect extends Component {
   constructor() {
     super();
 
+    // timer used along with `state.showCopyIPMessage`
+    this._copyTimer = null;
+
     this.state = {
-      isFirstPass: true
+      isFirstPass: true,
+
+      // this flag is used together with timer to display
+      // a message that IP address has been copied to clipboard
+      showCopyIPMessage: false
     };
   }
 
@@ -158,7 +166,12 @@ export default class Connect extends Component {
                   **********************************
                 */ }
 
-                <div className={ this.ipAddressClass() }>{ this.props.connect.clientIp }</div>
+                <div className={ this.ipAddressClass() } onClick={ ::this.onIPAddressClick }>
+                  <If condition={ this.state.showCopyIPMessage }>
+                    <Then><span>{ "IP copied to clipboard!" }</span></Then>
+                    <Else><span>{ this.props.connect.clientIp }</span></Else>
+                  </If>
+                </div>
               </div>
 
 
@@ -254,6 +267,13 @@ export default class Connect extends Component {
     this.props.onConnect(serverInfo.address);
   }
 
+  onIPAddressClick() {
+    this._copyTimer && clearTimeout(this._copyTimer);
+    this._copyTimer = setTimeout(() => this.setState({ showCopyIPMessage: false }), 3000);
+    this.setState({ showCopyIPMessage: true });
+    this.props.onCopyIP();
+  }
+
   // Private
 
   headerStyle() {
diff --git a/app/containers/ConnectPage.js b/app/containers/ConnectPage.js
index f7d9939257..7b01258f18 100644
--- a/app/containers/ConnectPage.js
+++ b/app/containers/ConnectPage.js
@@ -8,12 +8,14 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = (dispatch, props) => {
-  const { connect, disconnect } = bindActionCreators(connectActions, dispatch);
+  const { connect, disconnect, copyIPAddress } = bindActionCreators(connectActions, dispatch);
   const { backend } = props;
+
   return {
     onSettings: () => props.router.push('/settings'),
     onSelectLocation: () => props.router.push('/select-location'),
     onConnect: (addr) => connect(backend, addr),
+    onCopyIP: () => copyIPAddress(),
     onDisconnect: () => disconnect(backend),
     getServerInfo: (key) => backend.serverInfo(key)
   };