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 { hugeText, measurements, normalText } from './common-styles'; import ImageView from './ImageView'; import { Footer } from './Layout'; 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 Secured = styled(SecuredLabel)(normalText, { fontWeight: 700, lineHeight: '22px', }); const Body = styled.div({ display: 'flex', flexDirection: 'column', padding: `0 ${measurements.viewMargin}`, minHeight: '185px', }); const Wrapper = styled.div({ display: 'flex', flexDirection: 'column', justifyContent: 'end', flex: 1, }); const Location = styled.div({ display: 'flex', flexDirection: 'column', }); const LocationRow = styled.div({ height: '36px', }); const StyledMarquee = styled(Marquee)(hugeText, { 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; let pq = false; 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; case 'connecting': if (this.props.tunnelState.details) { pq = this.props.tunnelState.details.endpoint.quantumResistant; } break; case 'connected': pq = this.props.tunnelState.details.endpoint.quantumResistant; break; } switch (state) { case 'connecting': { const displayStyle = pq ? SecuredDisplayStyle.securingPq : SecuredDisplayStyle.securing; return ( {this.renderCountry()} {this.renderCity()} ); } case 'connected': { const displayStyle = pq ? SecuredDisplayStyle.securedPq : SecuredDisplayStyle.secured; return ( {this.renderCountry()} {this.renderCity()} ); } case 'error': if ( this.props.tunnelState.state === 'error' && this.props.tunnelState.details.blockingError ) { 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 ( ); }; }