import * as React from 'react'; import { sprintf } from 'sprintf-js'; import styled from 'styled-components'; import { TunnelState } from '../../shared/daemon-rpc-types'; import { messages, relayLocations } from '../../shared/gettext'; import ConnectionPanelContainer from '../containers/ConnectionPanelContainer'; import * as AppButton from './AppButton'; import { bigText } from './common-styles'; import ImageView from './ImageView'; import Marquee from './Marquee'; import { MultiButton } from './MultiButton'; import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel'; interface ITunnelControlProps { tunnelState: TunnelState; blockWhenDisconnected: boolean; selectedRelayName: string; city?: string; country?: string; onConnect: () => void; onDisconnect: () => void; onReconnect: () => void; onSelectLocation: () => void; } const SwitchLocationButton = styled(AppButton.TransparentButton)({ marginBottom: '18px', }); const Secured = styled(SecuredLabel)({ fontFamily: 'Open Sans', fontSize: '16px', fontWeight: 800, lineHeight: '22px', marginBottom: '2px', }); const Footer = styled.div({ display: 'flex', flexDirection: 'column', flex: 0, paddingBottom: '22px', paddingLeft: '22px', paddingRight: '22px', }); const Body = styled.div({ display: 'flex', flexDirection: 'column', padding: '0 22px', marginTop: '176px', flex: 1, }); const Wrapper = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, }); const Location = styled.div({ display: 'flex', flexDirection: 'column', marginBottom: 2, }); const StyledMarquee = styled(Marquee)({ ...bigText, lineHeight: '36px', overflow: 'hidden', }); const SelectedLocationChevron = styled(AppButton.Icon)({ margin: '0 4px', }); export default class TunnelControl extends React.Component { public render() { let state = this.props.tunnelState.state; switch (this.props.tunnelState.state) { case 'disconnecting': switch (this.props.tunnelState.details) { case 'block': state = 'error'; break; case 'reconnect': state = 'connecting'; break; default: state = 'disconnecting'; break; } break; } switch (state) { case 'connecting': return ( {this.renderCity()} {this.renderCountry()} ); case 'connected': return ( {this.renderCity()} {this.renderCountry()} ); case 'error': if ( this.props.tunnelState.state === 'error' && this.props.tunnelState.details.blockFailure ) { return ( ); } else { return ( ); } case 'disconnecting': return ( {this.renderCountry()} ); case 'disconnected': { const displayStyle = this.props.blockWhenDisconnected ? SecuredDisplayStyle.blocked : SecuredDisplayStyle.unsecured; return ( {this.renderCountry()} ); } default: throw new Error(`Unknown TunnelState: ${this.props.tunnelState}`); } } private renderCity() { const city = this.props.city === undefined ? '' : relayLocations.gettext(this.props.city); return {city}; } private renderCountry() { const country = this.props.country === undefined ? '' : relayLocations.gettext(this.props.country); return {country}; } private switchLocationButton() { return ( {messages.pgettext('tunnel-control', 'Switch location')} ); } private selectLocationButton() { return ( {this.props.selectedRelayName} ); } private connectButton() { return ( {messages.pgettext('tunnel-control', 'Secure my connection')} ); } private disconnectButton = (props: AppButton.IProps) => { return ( {messages.gettext('Disconnect')} ); }; private cancelButton = (props: AppButton.IProps) => { return ( {messages.gettext('Cancel')} ); }; private dismissButton = (props: AppButton.IProps) => { return ( {messages.gettext('Dismiss')} ); }; private reconnectButton = (props: AppButton.IProps) => { return ( ); }; }