github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-server/web/src/components/Landing.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  import { get } from 'axios';
     4  import Url from 'url';
     5  import classnames from 'classnames';
     6  
     7  import { update } from '../ducks/app';
     8  import SocketModal from '../components/SocketModal';
     9  
    10  class Landing extends Component {
    11    state = {
    12      socketModal: false,
    13    };
    14  
    15    componentWillReceiveProps(props) {
    16      if (props.server.get('tlsPort') !== this.props.server.get('tlsPort')) {
    17        const { app } = this.props;
    18        const serverUrl = Url.parse(app.get('url'));
    19        const url = `https://${serverUrl.hostname}:${props.server.get(
    20          'tlsPort',
    21        )}/`;
    22  
    23        const check = () =>
    24          get(url)
    25            .then(() => {
    26              const socketUrl = Url.format({
    27                protocol: 'wss:',
    28                hostname: serverUrl.hostname,
    29                port: props.server.get('tlsPort'),
    30                pathname: '/ws',
    31              });
    32              props.dispatch(update({ url: socketUrl }));
    33            })
    34            .catch(() => {});
    35        clearTimeout(this.checker);
    36        this.checker = setInterval(check, 1000);
    37        check();
    38      }
    39    }
    40  
    41    onGoSecureClick = () => () => {
    42      const { dispatch, server, app } = this.props;
    43      const serverUrl = Url.parse(app.get('url'));
    44  
    45      const url = Url.format({
    46        protocol: 'wss:',
    47        hostname: serverUrl.hostname,
    48        port: server.get('tlsPort'),
    49        pathname: '/ws',
    50      });
    51      dispatch(update({ url }));
    52    };
    53  
    54    render = () => {
    55      const {
    56        connected, dispatch, server, app,
    57      } = this.props;
    58      const { socketModal } = this.state;
    59      const url = Url.parse(app.get('url'));
    60  
    61      return (
    62        <React.Fragment>
    63          <SocketModal
    64            visible={socketModal}
    65            onClose={() => this.setState({ socketModal: false })}
    66            onChange={({ hostname, port }) =>
    67              dispatch(update({ url: `ws://${hostname}:${port}/ws` }))
    68            }
    69          />
    70          {connected === false && (
    71            <div className="p-4 bg-danger">
    72              Not connected!
    73              <button
    74                className="btn btn-secondary float-right"
    75                style={{ marginTop: '-8px' }}
    76                onClick={() => this.setState({ socketModal: true })}
    77              >
    78                Change socket url
    79              </button>
    80            </div>
    81          )}
    82          <div className="d-flex flex-column justify-content-center  align-items-center">
    83            <h1>stampzilla-go</h1>
    84            {connected === null && (
    85              <i className="fa fa-refresh fa-spin fa-3x fa-fw" />
    86            )}
    87            {connected && (
    88              <React.Fragment>
    89                <h2>{server.get('name') || '-'}</h2>
    90  
    91                <pre>
    92                  Hostname: {url.hostname}
    93                  <br />
    94                  HTTP Port: {server.get('port')}
    95                  <br />
    96                  TLS port: {server.get('tlsPort')}
    97                </pre>
    98  
    99                <a
   100                  href={`http://${window.location.hostname}:${server.get(
   101                    'port',
   102                  )}/ca.crt`}
   103                  className={classnames({
   104                    'btn btn-outline-secondary mt-3': true,
   105                    disabled: !server.get('port'),
   106                  })}
   107                >
   108                  Download CA certificate
   109                </a>
   110  
   111                <button
   112                  className="btn btn-primary mt-4"
   113                  disabled={!server.get('tlsPort')}
   114                  onClick={this.onGoSecureClick()}
   115                >
   116                  Go secure
   117                </button>
   118              </React.Fragment>
   119            )}
   120          </div>
   121        </React.Fragment>
   122      );
   123    };
   124  }
   125  
   126  const mapToProps = state => ({
   127    connected: state.getIn(['connection', 'connected']),
   128    server: state.getIn(['server']),
   129    app: state.getIn(['app']),
   130  });
   131  
   132  export default connect(mapToProps)(Landing);