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);