let users open urls from dapps view (#4042)

* browser: better url handling

* browser: pass url as param

* dapps: button to open browser

* dapps url button: remove url validation

* PR grumbles, better URL parsing

* code style ✨

* better URL parsing, react to changed URL fragment

js/src/routes.js

@@ -113,6 +113,7 @@ const routes = [
       { path: 'apps', component: Dapps },
       { path: 'app/:id', component: Dapp },
       { path: 'web', component: Web },
+      { path: 'web/:url', component: Web },
       { path: 'signer', component: Signer }
     ]
   }

js/src/ui/Icons/index.js

@@ -25,6 +25,7 @@ import DashboardIcon from 'material-ui/svg-icons/action/dashboard';
 import DeleteIcon from 'material-ui/svg-icons/action/delete';
 import DoneIcon from 'material-ui/svg-icons/action/done-all';
 import EditIcon from 'material-ui/svg-icons/content/create';
+import LinkIcon from 'material-ui/svg-icons/content/link';
 import LockedIcon from 'material-ui/svg-icons/action/lock';
 import NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
 import PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
@@ -47,6 +48,7 @@ export {
   DeleteIcon,
   DoneIcon,
   EditIcon,
+  LinkIcon,
   LockedIcon,
   NextIcon,
   PrevIcon,

js/src/views/Dapps/UrlButton/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './urlButton';

js/src/views/Dapps/UrlButton/urlButton.css

@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.button {
+  vertical-align: middle;
+}

js/src/views/Dapps/UrlButton/urlButton.js

@@ -0,0 +1,96 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { withRouter } from 'react-router';
+
+import Button from '~/ui/Button';
+import { LinkIcon } from '~/ui/Icons';
+import Input from '~/ui/Form/Input';
+
+import styles from './urlButton.css';
+
+const INPUT_STYLE = { display: 'inline-block', width: '20em' };
+
+class UrlButton extends Component {
+  static propTypes = {
+    router: PropTypes.object.isRequired // injected by withRouter
+  };
+
+  state = {
+    inputShown: false
+  };
+
+  render () {
+    const { inputShown } = this.state;
+
+    return (
+      <div>
+        { inputShown ? this.renderInput() : null }
+        <Button
+          className={ styles.button }
+          icon={ <LinkIcon /> }
+          label={
+            <FormattedMessage
+              id='dapps.button.url.label'
+              defaultMessage='URL' />
+          }
+          onClick={ this.toggleInput }
+        />
+      </div>
+    );
+  }
+
+  renderInput () {
+    return (
+      <Input
+        hint={
+          <FormattedMessage
+            id='dapps.button.url.input'
+            defaultMessage='https://mkr.market' />
+        }
+        onBlur={ this.hideInput }
+        onFocus={ this.showInput }
+        onSubmit={ this.inputOnSubmit }
+        style={ INPUT_STYLE }
+      />
+    );
+  }
+
+  toggleInput = () => {
+    const { inputShown } = this.state;
+    this.setState({
+      inputShown: !inputShown
+    });
+  }
+
+  hideInput = () => {
+    this.setState({ inputShown: false });
+  }
+
+  showInput = () => {
+    this.setState({ inputShown: true });
+  }
+
+  inputOnSubmit = (url) => {
+    const { router } = this.props;
+
+    router.push(`/web/${encodeURIComponent(url)}`);
+  }
+}
+
+export default withRouter(UrlButton);

js/src/views/Dapps/dapps.js

@@ -27,6 +27,7 @@ import PermissionStore from '~/modals/DappPermissions/store';
 import { Actionbar, Button, Page } from '~/ui';
 import { LockedIcon, VisibleIcon } from '~/ui/Icons';
 
+import UrlButton from './UrlButton';
 import DappsStore from './dappsStore';
 import Summary from './Summary';
 
@@ -88,6 +89,7 @@ class Dapps extends Component {
               defaultMessage='Decentralized Applications' />
           }
           buttons={ [
+            <UrlButton key='url' />,
             <Button
               icon={ <VisibleIcon /> }
               key='edit'

js/src/views/Web/web.js

@@ -16,6 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 import store from 'store';
+import { parse as parseUrl, format as formatUrl } from 'url';
+import { parse as parseQuery } from 'querystring';
 
 import AddressBar from './AddressBar';
 
@@ -23,39 +25,53 @@ import styles from './web.css';
 
 const LS_LAST_ADDRESS = '_parity::webLastAddress';
 
+const hasProtocol = /^https?:\/\//;
+
 export default class Web extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
 
+  static propTypes = {
+    params: PropTypes.object.isRequired
+  }
+
   state = {
-    displayedUrl: this.lastAddress(),
+    displayedUrl: null,
     isLoading: true,
     token: null,
-    url: this.lastAddress()
+    url: null
   };
 
   componentDidMount () {
-    this.context.api.signer.generateWebProxyAccessToken().then(token => {
+    const { api } = this.context;
-      this.setState({ token });
+    const { params } = this.props;
-    });
+
+    api
+      .signer
+      .generateWebProxyAccessToken()
+      .then((token) => {
+        this.setState({ token });
+      });
+
+    this.setUrl(params.url);
   }
 
-  address () {
+  componentWillReceiveProps (props) {
-    const { dappsUrl } = this.context.api;
+    this.setUrl(props.params.url);
-    const { url, token } = this.state;
-    const path = url.replace(/:/g, '').replace(/\/\//g, '/');
-
-    return `${dappsUrl}/web/${token}/${path}/`;
   }
 
-  lastAddress () {
+  setUrl = (url) => {
-    return store.get(LS_LAST_ADDRESS) || 'https://mkr.market';
+    url = url || store.get(LS_LAST_ADDRESS) || 'https://mkr.market';
-  }
+    if (!hasProtocol.test(url)) {
+      url = `https://${url}`;
+    }
+
+    this.setState({ url, displayedUrl: url });
+  };
 
   render () {
     const { displayedUrl, isLoading, token } = this.state;
-    const address = this.address();
 
     if (!token) {
       return (
@@ -67,20 +83,30 @@ export default class Web extends Component {
       );
     }
 
+    const { dappsUrl } = this.context.api;
+    const { url } = this.state;
+    if (!url || !token) {
+      return null;
+    }
+
+    const parsed = parseUrl(url);
+    const { protocol, host, path } = parsed;
+    const address = `${dappsUrl}/web/${token}/${protocol.slice(0, -1)}/${host}${path}`;
+
     return (
       <div className={ styles.wrapper }>
         <AddressBar
           className={ styles.url }
           isLoading={ isLoading }
-          onChange={ this.handleUpdateUrl }
+          onChange={ this.onUrlChange }
-          onRefresh={ this.handleOnRefresh }
+          onRefresh={ this.onRefresh }
           url={ displayedUrl }
         />
         <iframe
           className={ styles.frame }
           frameBorder={ 0 }
           name={ name }
-          onLoad={ this.handleIframeLoad }
+          onLoad={ this.iframeOnLoad }
           sandbox='allow-forms allow-same-origin allow-scripts'
           scrolling='auto'
           src={ address } />
@@ -88,7 +114,11 @@ export default class Web extends Component {
     );
   }
 
-  handleUpdateUrl = (url) => {
+  onUrlChange = (url) => {
+    if (!hasProtocol.test(url)) {
+      url = `https://${url}`;
+    }
+
     store.set(LS_LAST_ADDRESS, url);
 
     this.setState({
@@ -98,18 +128,23 @@ export default class Web extends Component {
     });
   };
 
-  handleOnRefresh = (ev) => {
+  onRefresh = () => {
     const { displayedUrl } = this.state;
-    const hasQuery = displayedUrl.indexOf('?') > 0;
+
-    const separator = hasQuery ? '&' : '?';
+    // Insert timestamp
+    // This is a hack to prevent caching.
+    const parsed = parseUrl(displayedUrl);
+    parsed.query = parseQuery(parsed.query);
+    parsed.query.t = Date.now().toString();
+    delete parsed.search;
 
     this.setState({
       isLoading: true,
-      url: `${displayedUrl}${separator}t=${Date.now()}`
+      url: formatUrl(parsed)
     });
   };
 
-  handleIframeLoad = (ev) => {
+  iframeOnLoad = () => {
     this.setState({
       isLoading: false
     });