diff options
Diffstat (limited to 'app/components')
29 files changed, 3564 insertions, 0 deletions
diff --git a/app/components/Accordion.js b/app/components/Accordion.js new file mode 100644 index 0000000000..456a95fe05 --- /dev/null +++ b/app/components/Accordion.js @@ -0,0 +1,146 @@ +// @flow + +import React, { Component } from 'react'; + +export type AccordionProps = { + height?: number | string, + transitionStyle?: string, + children?: Array<React.Element<*>> | React.Element<*> // see https://github.com/facebook/flow/issues/1964 +}; + +export type AccordionState = { + computedHeight: ?number | ?string, +}; + +export default class Accordion extends Component { + props: AccordionProps; + static defaultProps: $Shape<AccordionProps> = { + height: 'auto', + transitionStyle: 'height 0.25s ease-in-out' + }; + + state: AccordionState = { + computedHeight: null, + }; + + _containerElement: ?HTMLElement; + _contentElement: ?HTMLElement; + + componentDidMount() { + const containerElement = this._containerElement; + if(!containerElement) { + throw new Error('containerElement cannot be null'); + } + + // update initial state + if(this.props.height !== Accordion.defaultProps.height) { + this._updateHeight(); + } + + containerElement.addEventListener('transitionend', this._onTransitionEnd); + } + + componentWillUnmount() { + const containerElement = this._containerElement; + if(!containerElement) { + throw new Error('containerElement cannot be null'); + } + containerElement.removeEventListener('transitionend', this._onTransitionEnd); + } + + componentDidUpdate(prevProps: AccordionProps, _prevState: AccordionState) { + if(prevProps.height !== this.props.height) { + (async () => { + const { transitionStyle } = this.props; + + // make sure to warm up CSS transition before updating height + // do not warm up transitions if they are not expected to run + if(transitionStyle && transitionStyle.toLowerCase() !== 'none') { + await this._warmupTransition(); + this._updateHeight(); + } else { + this._updateHeight(); + this._onTransitionEnd(); + } + + })(); + } + } + + render() { + const { height: _height, children, transitionStyle, ...otherProps } = this.props; + let style = { + transition: transitionStyle, + }; + + if(typeof(this.state.computedHeight) === 'number') { + style = { + ...style, + overflow: 'hidden', + height: this.state.computedHeight.toString() + 'px', + }; + } + + return ( + <div { ...otherProps } style={ style } ref={ this._onContainerRef }> + <div ref={ this._onContentRef }> + { children } + </div> + </div> + ); + } + + // Sets initial height and delays transition until next runloop + // to make sure CSS transitions properly kick in. + // This method resolves immediately if the height is already set. + _warmupTransition() { + const contentElement = this._contentElement; + if(!contentElement) { + throw new Error('contentElement cannot be null'); + } + return new Promise((resolve, _) => { + // CSS transition always needs the initial height + // to perform the animation + if(this.state.computedHeight === null) { + this.setState({ + computedHeight: contentElement.clientHeight + }, () => { + // important to skip a run loop + // for CSS transition to kick in + setTimeout(resolve, 0); + }); + } else { + resolve(); + } + }); + } + + _updateHeight() { + const contentElement = this._contentElement; + if(!contentElement) { + throw new Error('contentElement cannot be null'); + } + this.setState({ + computedHeight: this.props.height === 'auto' ? + contentElement.clientHeight : + this.props.height + }); + } + + _onTransitionEnd = () => { + // reset height after transition to let element layout naturally + if(this.props.height === 'auto') { + this.setState({ + computedHeight: null, + }); + } + } + + _onContainerRef = (element) => { + this._containerElement = element; + } + + _onContentRef = (element) => { + this._contentElement = element; + } +}
\ No newline at end of file diff --git a/app/components/Account.css b/app/components/Account.css new file mode 100644 index 0000000000..2f450e3828 --- /dev/null +++ b/app/components/Account.css @@ -0,0 +1,98 @@ +.account { + background: #192E45; + height: 100%; +} + +.account__container { + display: flex; + flex-direction: column; + height: 100%; +} + +.account__header { + flex: 0 0 auto; + padding: 40px 24px 24px; + position: relative; /* anchor for close button */ +} + +.account__close { + position: absolute; + display: flex; + align-items: center; + border: 0; + padding: 0; + margin: 0; + top: 24px; + left: 12px; + z-index: 1; /* part of .account__container covers the button */ +} + +.account__close-icon { + opacity: 0.6; + margin-right: 8px; +} + +.account__close-title { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + color: rgba(255, 255, 255, 0.6); +} + +.account__title { + font-family: DINPro; + font-size: 32px; + font-weight: 900; + line-height: 40px; + color: #FFFFFF; +} + +.account__content { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.account__main { + margin-bottom: 24px; +} + +.account__footer { + padding: 24px; +} + +.account__row { + padding: 0 24px; +} + +.account__row + .account__row { + margin-top: 24px; +} + +.account__row-label { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 8px; +} + +.account__row-value { + font-family: "Open Sans"; + font-size: 16px; + font-weight: 800; + color: rgba(255, 255, 255, 0.8); +} + +.account__row-value--error { + color: #d0021b; +} + +.account__footer .button + .button { + margin-top: 24px; +} + +.account__id { + user-select: text; +} diff --git a/app/components/Account.js b/app/components/Account.js new file mode 100644 index 0000000000..215014e543 --- /dev/null +++ b/app/components/Account.js @@ -0,0 +1,78 @@ +// @flow +import moment from 'moment'; +import React, { Component } from 'react'; +import { If, Then, Else } from 'react-if'; +import { Layout, Container, Header } from './Layout'; +import { formatAccount } from '../lib/formatters'; +import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; + +import type { AccountReduxState } from '../redux/account/reducers'; + +export type AccountProps = { + account: AccountReduxState; + onLogout: () => void; + onClose: () => void; + onBuyMore: () => void; +}; + +export default class Account extends Component { + props: AccountProps; + + render(): React.Element<*> { + const expiry = moment(this.props.account.expiry); + const formattedAccountToken = formatAccount(this.props.account.accountToken || ''); + const formattedExpiry = expiry.format('hA, D MMMM YYYY').toUpperCase(); + const isOutOfTime = expiry.isSameOrBefore(moment()); + + return ( + <Layout> + <Header hidden={ true } style={ 'defaultDark' } /> + <Container> + <div className="account"> + <div className="account__close" onClick={ this.props.onClose }> + <img className="account__close-icon" src="./assets/images/icon-back.svg" /> + <span className="account__close-title">Settings</span> + </div> + <div className="account__container"> + + <div className="account__header"> + <h2 className="account__title">Account</h2> + </div> + + <div className="account__content"> + <div className="account__main"> + + <div className="account__row"> + <div className="account__row-label">Account ID</div> + <div className="account__row-value account__id">{ formattedAccountToken }</div> + </div> + + <div className="account__row"> + <div className="account__row-label">Paid until</div> + <If condition={ isOutOfTime }> + <Then> + <div className="account__out-of-time account__row-value account__row-value--error">OUT OF TIME</div> + </Then> + <Else> + <div className="account__row-value">{ formattedExpiry }</div> + </Else> + </If> + </div> + + <div className="account__footer"> + <button className="account__buymore button button--positive" onClick={ this.props.onBuyMore }> + <span className="button-label">Buy more time</span> + <ExternalLinkSVG className="button-icon button-icon--16" /> + </button> + <button className="account__logout button button--negative" onClick={ this.props.onLogout }>Logout</button> + </div> + + </div> + </div> + </div> + </div> + </Container> + </Layout> + ); + } +} diff --git a/app/components/AccountInput.js b/app/components/AccountInput.js new file mode 100644 index 0000000000..4ff99e13fd --- /dev/null +++ b/app/components/AccountInput.js @@ -0,0 +1,317 @@ +// @flow +import React, { Component } from 'react'; +import { formatAccount } from '../lib/formatters'; + +// @TODO: move it into types.js + +// ESLint issue: https://github.com/babel/babel-eslint/issues/445 +declare class ClipboardData { // eslint-disable-line no-unused-vars + setData(type: string, data: string): void; + getData(type: string): string; +} + +declare class ClipboardEvent extends Event { + clipboardData: ClipboardData; +} + +export type AccountInputProps = { + value: string; + onEnter: ?(() => void); + onChange: ?((newValue: string) => void); +}; + +export type AccountInputState = { + value: string; + selectionRange: SelectionRange; +}; + +export type SelectionRange = [number, number]; + +export default class AccountInput extends Component { + props: AccountInputProps; + + static defaultProps: AccountInputProps = { + value: '', + onEnter: null, + onChange: null + }; + + state: AccountInputState = { + value: '', + selectionRange: [0, 0] + }; + + _ref: ?HTMLInputElement; + _ignoreSelect = false; + + constructor(props: AccountInputProps) { + super(props); + + // selection range holds selection converted from DOM selection range to + // internal unformatted representation of account number + const val = this.sanitize(props.value); + + this.state = { + value: val, + selectionRange: [val.length, val.length] + }; + } + + componentWillReceiveProps(nextProps: AccountInputProps) { + const nextVal = this.sanitize(nextProps.value); + if(nextVal !== this.state.value) { + const len = nextVal.length; + this.setState({ value: nextVal, selectionRange: [len, len] }); + } + } + + shouldComponentUpdate(nextProps: AccountInputProps, nextState: AccountInputState) { + return (this.props.value !== nextProps.value || + this.props.onEnter !== nextProps.onEnter || + this.props.onChange !== nextProps.onChange || + this.state.value !== nextState.value || + this.state.selectionRange[0] !== nextState.selectionRange[0] || + this.state.selectionRange[1] !== nextState.selectionRange[1]); + } + + render() { + const displayString = formatAccount(this.state.value || ''); + const { value, onChange, onEnter, ...otherProps } = this.props; // eslint-disable-line no-unused-vars + return ( + <input { ...otherProps } + type="text" + value={ displayString } + onChange={ () => {} } + onSelect={ this.onSelect } + onKeyUp={ this.onKeyUp } + onKeyDown={ this.onKeyDown } + onPaste={ this.onPaste } + onCut={ this.onCut } + ref={ this.onRef } /> + ); + } + + // Private + + /** + * Modify original string inserting substring using selection range + */ + sanitize(val: ?string): string { + return (val || '').replace(/[^0-9]/g, ''); + } + + /** + * Modify original string inserting substring using selection range + * + * @private + * @param {String} val original string + * @param {String} insert insertion string + * @param {Array} selRange selection range ([x,y]) + * @returns {Object} + */ + insert(val: string, insert: string, selRange: SelectionRange): AccountInputState { + const head = val.slice(0, selRange[0]); + const tail = val.slice(selRange[1], val.length); + const newVal = head + insert + tail; + const selectionOffset = head.length + insert.length; + + return { value: newVal, selectionRange: [selectionOffset, selectionOffset] }; + } + + + /** + * Modify string by removing single character or range of characters based on selection range. + * + * @private + * @param {String} val original string + * @param {Array} selRange selection range ([x,y]) + * @returns {Object} + * + * @memberOf AccountInput + */ + remove(val: string, selRange: SelectionRange): AccountInputState { + let newVal, selectionOffset; + + if(selRange[0] === selRange[1]) { + const oneOff = Math.max(0, selRange[0] - 1); + const head = val.slice(0, oneOff); + const tail = val.slice(selRange[0], val.length); + newVal = head + tail; + selectionOffset = head.length; + } else { + const head = val.slice(0, selRange[0]); + const tail = val.slice(selRange[1], val.length); + newVal = head + tail; + selectionOffset = head.length; + } + + return { value: newVal, selectionRange: [selectionOffset, selectionOffset] }; + } + + + /** + * Convert DOM selection range to internal selection range + * + * @private + * @param {String} val original string + * @param {Array} domRange selection range from DOM + * @returns {Object} + * + * @memberOf AccountInput + */ + toInternalSelectionRange(val: string, domRange: SelectionRange): SelectionRange { + const countSpaces = (val) => { + return (val.match(/\s/g) || []).length; + }; + + const fmt = formatAccount(val || ''); + let start = domRange[0]; + let end = domRange[1]; + const before = countSpaces(fmt.slice(0, start)); + const within = countSpaces(fmt.slice(start, end)); + + start -= before; + end -= (before + within); + + return [ start, end ]; + } + + + /** + * Convert internal selection range to DOM selection range + * + * @private + * @param {String} val original string + * @param {Array} selRange selection range + * @returns {Object} + * + * @memberOf AccountInput + */ + toDomSelection(val: string, selRange: SelectionRange): SelectionRange { + const countSpaces = (val, untilIndex) => { + if(val.length > 12) { return 0; } + return Math.floor(untilIndex / 4); // groups of 4 digits + }; + + let start = selRange[0]; + let end = selRange[1]; + const startSpaces = countSpaces(val, start); + const endSpaces = countSpaces(val, end); + + start += startSpaces; + end += startSpaces + (endSpaces - startSpaces); + + return [ start, end ]; + } + + // Events + + onKeyDown = (e: KeyboardEvent) => { + const { value, selectionRange } = this.state; + + if(e.which === 8) { // backspace + const result = this.remove(value, selectionRange); + e.preventDefault(); + + this._ignoreSelect = true; + + this.setState(result, () => { + if(this.props.onChange) { + this.props.onChange(result.value); + } + }); + } else if(/^[0-9]$/.test(e.key)) { // digits or cmd+v + const result = this.insert(value, e.key, selectionRange); + e.preventDefault(); + + this._ignoreSelect = true; + + this.setState(result, () => { + if(this.props.onChange) { + this.props.onChange(result.value); + } + }); + } + } + + onKeyUp = (e: KeyboardEvent) => { + this._ignoreSelect = false; + + if(e.which === 13 && this.props.onEnter) { + this.props.onEnter(); + } + } + + onSelect = (e: Event) => { + const ref = e.target; + if(!(ref instanceof HTMLInputElement)) { + throw new Error('ref must be an instance of HTMLInputElement'); + } + + if(this._ignoreSelect) { + return; + } + + const start = ref.selectionStart; + const end = ref.selectionEnd; + const selRange = this.toInternalSelectionRange(this.sanitize(ref.value), [start, end]); + this.setState({ selectionRange: selRange }); + } + + onPaste = (e: ClipboardEvent) => { + const { value, selectionRange } = this.state; + const pastedData = e.clipboardData.getData('text'); + const filteredData = this.sanitize(pastedData); + const result = this.insert(value, filteredData, selectionRange); + e.preventDefault(); + this.setState(result, () => { + if(this.props.onChange) { + this.props.onChange(result.value); + } + }); + } + + onCut = (e: ClipboardEvent) => { + const target = e.target; + if(!(target instanceof HTMLInputElement)) { + throw new Error('ref must be an instance of HTMLInputElement'); + } + + const { value, selectionRange } = this.state; + + e.preventDefault(); + + // range is not empty? + if(selectionRange[0] !== selectionRange[1]) { + const result = this.remove(value, selectionRange); + const domSelectionRange = this.toDomSelection(value, selectionRange); + const slice = target.value.slice(domSelectionRange[0], domSelectionRange[1]); + + e.clipboardData.setData('text', slice); + + this.setState(result, () => { + if(this.props.onChange) { + this.props.onChange(result.value); + } + }); + } + } + + onRef = (ref: HTMLInputElement) => { + this._ref = ref; + if(!ref) { return; } + + const { value, selectionRange } = this.state; + const domRange = this.toDomSelection(value, selectionRange); + + ref.selectionStart = domRange[0]; + ref.selectionEnd = domRange[1]; + } + + focus() { + if(this._ref) { + this._ref.focus(); + } + } + +}
\ No newline at end of file diff --git a/app/components/AdvancedSettings.css b/app/components/AdvancedSettings.css new file mode 100644 index 0000000000..8f6c352bd7 --- /dev/null +++ b/app/components/AdvancedSettings.css @@ -0,0 +1,55 @@ +.advanced-settings__section-title { + background-color:rgb(41, 71, 115); + padding: 15px 24px; + font-family: DINPro; + font-size: 20px; + font-weight: 900; + line-height: 26px; + color: #fff; +} + +.advanced-settings__cell { + background-color:rgb(41, 71, 115); + padding: 15px 24px; + display: flex; + flex-direction: row; + align-items: center; +} + +.advanced-settings__cell--dimmed { + background-color: rgb(36, 57, 84); +} + +.advanced-settings__cell--dimmed:hover { + background-color: rgba(41, 71, 115, 0.9); +} + +.advanced-settings__cell--selected, +.advanced-settings__cell--selected:hover { + background-color: #44AD4D; +} + +.advanced-settings__cell--active:hover { + background-color: rgba(41, 71, 115, 0.9); +} + +.advanced-settings__section-title + .advanced-settings__cell, +.advanced-settings__cell + .advanced-settings__cell { + margin-top: 1px; +} + +.advanced-settings__cell-label { + font-family: DINPro; + font-size: 20px; + font-weight: 900; + line-height: 26px; + color: #FFFFFF; + flex: 1 0 auto; +} + +.advanced-settings__cell-icon { + width: 24px; + flex: 0 0 auto; + margin-right: 8px; + color: #fff; +}
\ No newline at end of file diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js new file mode 100644 index 0000000000..56c5844346 --- /dev/null +++ b/app/components/AdvancedSettings.js @@ -0,0 +1,136 @@ +// @flow + +import React from 'react'; +import { Layout, Container, Header } from './Layout'; +import CustomScrollbars from './CustomScrollbars'; + +import TickSVG from '../assets/images/icon-tick.svg'; + +export class AdvancedSettings extends React.Component { + + props: { + protocol: string, + port: string | number, + onUpdate: (protocol: string, port: string | number) => void, + onClose: () => void, + }; + + render() { + let portSelector = null; + let protocol = this.props.protocol.toUpperCase(); + + if (protocol === 'AUTOMATIC') { + protocol = 'Automatic'; + } else { + portSelector = this._createPortSelector(); + } + + return <BaseLayout onClose={ this.props.onClose }> + + <Selector + title={ 'Network protocols' } + values={ ['Automatic', 'UDP', 'TCP'] } + value={ protocol } + onSelect={ protocol => { + this.props.onUpdate(protocol, 'Automatic'); + }}/> + + <div className="settings__cell-spacer"></div> + + { portSelector } + + </BaseLayout>; + } + + _createPortSelector() { + const protocol = this.props.protocol.toUpperCase(); + const ports = protocol === 'TCP' + ? ['Automatic', 80, 443] + : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302]; + + return <Selector + title={ protocol + ' port' } + values={ ports } + value={ this.props.port } + onSelect={ port => { + this.props.onUpdate(protocol, port); + }} />; + } +} + + +class Selector extends React.Component { + + props: { + title: string, + values: Array<*>, + value: *, + onSelect: (*) => void, + } + + render() { + return <div> + <div className="advanced-settings__section-title"> + { this.props.title } + </div> + + { this.props.values.map(value => this._renderCell(value)) } + </div>; + } + + _renderCell(value) { + const selected = value === this.props.value; + if (selected) { + return this._renderSelectedCell(value); + } else { + return this._renderUnselectedCell(value); + } + } + + _renderSelectedCell(value) { + return <div + key={ value } + className="advanced-settings__cell advanced-settings__cell--selected" + onClick={ () => this.props.onSelect(value) } > + <div className="advanced-settings__cell-icon"><TickSVG /></div> + <div className="advanced-settings__cell-label">{ value }</div> + </div>; + } + + _renderUnselectedCell(value) { + return <div + key={ value } + className="advanced-settings__cell advanced-settings__cell--dimmed" + onClick={ () => this.props.onSelect(value) }> + <div className="advanced-settings__cell-icon"></div> + <div className="advanced-settings__cell-label">{ value }</div> + </div>; + } +} + +function BaseLayout(props) { + return <Layout> + <Header hidden={ true } style={ 'defaultDark' } /> + <Container> + <div className="settings"> + <div className="support__close" onClick={ props.onClose }> + <img className="support__close-icon" src="./assets/images/icon-back.svg" /> + <span className="support__close-title">Settings</span> + </div> + <div className="settings__container"> + <div className="settings__header"> + <h2 className="settings__title">Advanced</h2> + </div> + <CustomScrollbars autoHide={ true }> + <div className="settings__content"> + <div className="settings__main"> + { props.children } + </div> + </div> + </CustomScrollbars> + </div> + </div> + </Container> + </Layout>; +} + diff --git a/app/components/Connect.css b/app/components/Connect.css new file mode 100644 index 0000000000..41c3c61894 --- /dev/null +++ b/app/components/Connect.css @@ -0,0 +1,138 @@ +.connect { + height: 100%; + position: relative; +} + +.connect__map { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +.connect__container { + display: flex; + flex-direction: column; + height: 100%; + position: relative; /* need this for z-index to work to cover map */ + z-index: 1; +} + +.connect__footer { + display: flex; + flex-direction: column; + padding: 42px 24px 24px; +} + +.connect__row + .connect__row{ + margin-top: 16px; +} + +.connect__server-label { + flex: 1 1 auto; + text-align: center; +} + +.connect__server-chevron { + flex: 0 0 auto; + width: 7px; + margin-left: -7px; /* let .connect__server-label extend to occupy the entire space */ +} + +.connect__footer-button { + display: block; + width:100%; + border: 0; + padding: 7px 12px 9px; + border-radius: 4px; + font-family: DINPro; + font-size: 20px; + font-weight: 900; + text-align: center; + line-height: 26px; + color: #FFFFFF; +} + +.connect__status { + padding: 0 24px; + margin-top: 94px; + margin-bottom: auto; +} + +.connect__error-title { + font-family: DINPro; + font-size: 32px; + font-weight: 900; + line-height: 1.25; + color: #fff; + margin-bottom: 8px; +} + +.connect__error-message { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: normal; + color: #fff; + margin-bottom: 24px; +} + +.connect__status-security { + font-family: "Open Sans"; + font-size: 16px; + font-weight: 800; + line-height: 22px; + margin-bottom: 4px; + color: #FFFFFF; + text-transform: uppercase; +} + +.connect__status-security--unsecured { + color: #D0021B; +} + +.connect__status-security--secure { + color: #44AD4D; +} + +.connect__status-location { + font-family: DINPro; + font-size: 38px; + font-weight: 900; + line-height: 1.16em; + max-height: calc(1.16em * 2); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + letter-spacing: -0.9px; + color: #FFFFFF; + margin-bottom: 4px; +} + +.connect__status-location-icon { + display: inline-block; + margin-right: 8px; +} + +.connect__status-ipaddress { + font-family: "Open Sans"; + font-size: 16px; + font-weight: 800; + line-height: normal; + color: #FFFFFF; +} + +.connect__status-ipaddress--invisible { + visibility: hidden; +} + +.connect__status-icon { + text-align: center; + margin-bottom: 32px; +} + +.connect__status-icon--hidden { + visibility: hidden; +} diff --git a/app/components/Connect.js b/app/components/Connect.js new file mode 100644 index 0000000000..93ac19a4eb --- /dev/null +++ b/app/components/Connect.js @@ -0,0 +1,373 @@ +// @flow + +import moment from 'moment'; +import React, { Component } from 'react'; +import { If, Then } from 'react-if'; +import { Layout, Container, Header } from './Layout'; +import { BackendError } from '../lib/backend'; + +import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; +import ChevronRightSVG from '../assets/images/icon-chevron.svg'; + +import type { HeaderBarStyle } from './HeaderBar'; +import type { ConnectionReduxState } from '../redux/connection/reducers'; +import type { SettingsReduxState } from '../redux/settings/reducers'; +import type { RelayLocation } from '../lib/ipc-facade'; + +export type ConnectProps = { + accountExpiry: string, + connection: ConnectionReduxState, + settings: SettingsReduxState, + onSettings: () => void, + onSelectLocation: () => void, + onConnect: () => void, + onCopyIP: () => void, + onDisconnect: () => void, + onExternalLink: (type: string) => void, +}; + + +export default class Connect extends Component { + props: ConnectProps; + state = { + isFirstPass: true, + showCopyIPMessage: false + }; + + _copyTimer: ?number; + + componentDidMount() { + this.setState({ isFirstPass: false }); + } + + componentWillUnmount() { + if(this._copyTimer) { + clearTimeout(this._copyTimer); + this._copyTimer = null; + } + + this.setState({ + isFirstPass: true, + showCopyIPMessage: false + }); + } + + render(): React.Element<*> { + const error = this.displayError(); + const child = error ? this.renderError(error) : this.renderMap(); + + return ( + <Layout> + <Header style={ this.headerStyle() } showSettings={ true } onSettings={ this.props.onSettings } /> + <Container> + { child } + </Container> + </Layout> + ); + } + + renderError(error: BackendError): React.Element<*> { + return ( + <div className="connect"> + <div className="connect__status"> + <div className="connect__status-icon"> + <img src="./assets/images/icon-fail.svg" alt="" /> + </div> + <div className="connect__error-title"> + { error.title } + </div> + <div className="connect__error-message"> + { error.message } + </div> + <If condition={ error.type === 'NO_CREDIT' }> + <Then> + <div> + <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }> + <span className="button-label">Buy more time</span> + <ExternalLinkSVG className="button-icon button-icon--16" /> + </button> + </div> + </Then> + </If> + </div> + </div> + ); + } + + _findRelayName(relay: RelayLocation): ?string { + const countries = this.props.settings.relayLocations; + const countryPredicate = (countryCode) => (country) => country.code === countryCode; + + if(relay.country) { + const country = countries.find(countryPredicate(relay.country)); + if(country) { + return country.name; + } + } else if(relay.city) { + const [countryCode, cityCode] = relay.city; + const country = countries.find(countryPredicate(countryCode)); + if(country) { + const city = country.cities.find((city) => city.code === cityCode); + if(city) { + return city.name; + } + } + } + return null; + } + + _getLocationName(): string { + const { relaySettings } = this.props.settings; + if(relaySettings.normal) { + const location = relaySettings.normal.location; + if(location === 'any') { + return 'Automatic'; + } else { + return this._findRelayName(location) || 'Unknown'; + } + } else if(relaySettings.custom_tunnel_endpoint) { + return 'Custom'; + } else { + throw new Error('Unsupported relay settings.'); + } + } + + renderMap(): React.Element<*> { + let [ isConnecting, isConnected, isDisconnected ] = [false, false, false]; + switch(this.props.connection.status) { + case 'connecting': isConnecting = true; break; + case 'connected': isConnected = true; break; + case 'disconnected': isDisconnected = true; break; + } + + // We decided to not include the map in the first beta release to customers + // but it MUST be included in the following releases. Therefore we choose + // to just comment it out + const map = undefined; + /* + const altitude = (isConnecting ? 300 : 100) * 1000; + const { location } = this.props.connection; + const map = <Map animate={ !this.state.isFirstPass } + location={ location || [0, 0] } + altitude= { altitude } + markerImagePath= { isConnected + ? './assets/images/location-marker-secure.svg' + : './assets/images/location-marker-unsecure.svg' } /> + */ + + let ipComponent = undefined; + if (isConnected || isDisconnected) { + if (this.state.showCopyIPMessage) { + ipComponent = (<span>{ 'IP copied to clipboard!' }</span>); + } else { + // TODO: remove empty IP placeholder when implemented in backend. + if(isDisconnected) { + ipComponent = (<span>{ '\u2003' }</span>); + } else { + ipComponent = (<span>{ this.props.connection.clientIp }</span>); + } + } + } + return ( + <div className="connect"> + <div className="connect__map"> + { map } + </div> + <div className="connect__container"> + + <div className="connect__status"> + { /* show spinner when connecting */ } + <div className={ this.spinnerClass() }> + <img src="./assets/images/icon-spinner.svg" alt="" /> + </div> + + <div className={ this.networkSecurityClass() }>{ this.networkSecurityMessage() }</div> + + { /* + ********************************** + Begin: Location block + ********************************** + */ } + + { /* location when disconnected. + TODO: merge with the isConnecting block below when implemented in backend. + */ } + <If condition={ isDisconnected }> + <Then> + <div className="connect__status-location"> + <span>{ '\u2002' }</span> + </div> + </Then> + </If> + + { /* location when connecting */ } + <If condition={ isConnecting }> + <Then> + <div className="connect__status-location"> + <span>{ this.props.connection.country }</span> + </div> + </Then> + </If> + + { /* location when connected */ } + <If condition={ isConnected }> + <Then> + <div className="connect__status-location"> + { this.props.connection.city }<br/>{ this.props.connection.country } + </div> + </Then> + </If> + + { /* + ********************************** + End: Location block + ********************************** + */ } + + <div className={ this.ipAddressClass() } onClick={ this.onIPAddressClick.bind(this) }> + { ipComponent } + </div> + </div> + + + { /* + ********************************** + Begin: Footer block + ********************************** + */ } + + { /* footer when disconnected */ } + <If condition={ isDisconnected }> + <Then> + <div className="connect__footer"> + <div className="connect__row"> + <button className="connect__server button button--neutral button--blur" onClick={ this.props.onSelectLocation }> + <div className="connect__server-label">{ this._getLocationName() }</div> + <div className="connect__server-chevron"><ChevronRightSVG /></div> + </button> + </div> + + <div className="connect__row"> + <button className="button button--positive" onClick={ this.props.onConnect }>Secure my connection</button> + </div> + </div> + </Then> + </If> + + { /* footer when connecting */ } + <If condition={ isConnecting }> + <Then> + <div className="connect__footer"> + <div className="connect__row"> + <button className="button button--neutral button--blur" onClick={ this.props.onSelectLocation }>Switch location</button> + </div> + + <div className="connect__row"> + <button className="button button--negative-light button--blur" onClick={ this.props.onDisconnect }>Cancel</button> + </div> + </div> + </Then> + </If> + + { /* footer when connected */ } + <If condition={ isConnected }> + <Then> + <div className="connect__footer"> + <div className="connect__row"> + <button className="button button--neutral button--blur" onClick={ this.props.onSelectLocation }>Switch location</button> + </div> + + <div className="connect__row"> + <button className="button button--negative-light button--blur" onClick={ this.props.onDisconnect }>Disconnect</button> + </div> + </div> + </Then> + </If> + + { /* + ********************************** + End: Footer block + ********************************** + */ } + + </div> + </div> + ); + } + + // Handlers + + onExternalLink(type: string) { + this.props.onExternalLink(type); + } + + onIPAddressClick() { + this._copyTimer && clearTimeout(this._copyTimer); + this._copyTimer = setTimeout(() => this.setState({ showCopyIPMessage: false }), 3000); + this.setState({ showCopyIPMessage: true }); + this.props.onCopyIP(); + } + + // Private + + headerStyle(): HeaderBarStyle { + switch(this.props.connection.status) { + case 'connecting': + case 'disconnected': + return 'error'; + case 'connected': + return 'success'; + } + throw new Error('Invalid ConnectionState'); + } + + networkSecurityClass(): string { + let classes = ['connect__status-security']; + if(this.props.connection.status === 'connected') { + classes.push('connect__status-security--secure'); + } else if(this.props.connection.status === 'disconnected') { + classes.push('connect__status-security--unsecured'); + } + + return classes.join(' '); + } + + networkSecurityMessage(): string { + switch(this.props.connection.status) { + case 'connected': return 'Secure connection'; + case 'connecting': return 'Creating secure connection'; + default: return 'Unsecured connection'; + } + } + + spinnerClass(): string { + var classes = ['connect__status-icon']; + if(this.props.connection.status !== 'connecting') { + classes.push('connect__status-icon--hidden'); + } + return classes.join(' '); + } + + ipAddressClass(): string { + var classes = ['connect__status-ipaddress']; + if(this.props.connection.status === 'connecting') { + classes.push('connect__status-ipaddress--invisible'); + } + return classes.join(' '); + } + + displayError(): ?BackendError { + // Offline? + if(!this.props.connection.isOnline) { + return new BackendError('NO_INTERNET'); + } + + // No credit? + const expiry = this.props.accountExpiry; + if(expiry && moment(expiry).isSameOrBefore(moment())) { + return new BackendError('NO_CREDIT'); + } + + return null; + } +} diff --git a/app/components/CustomScrollbars.css b/app/components/CustomScrollbars.css new file mode 100644 index 0000000000..074c081209 --- /dev/null +++ b/app/components/CustomScrollbars.css @@ -0,0 +1,22 @@ +.custom-scrollbars { + display: flex; + flex-direction: column; + position: relative; +} + +.custom-scrollbars__scrollable { + width: 100%; + height: 100%; +} + +.custom-scrollbars__scrollable::-webkit-scrollbar { + display: none; +} + +.custom-scrollbars__thumb { + background-color: rgba(255, 255, 255, 0.2); + border-radius: 4px; + width: 8px; + transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out; + pointer-events: none; +}
\ No newline at end of file diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js new file mode 100644 index 0000000000..6d0ce96daa --- /dev/null +++ b/app/components/CustomScrollbars.js @@ -0,0 +1,133 @@ +// @flow +import React, { Component } from 'react'; + +type ScrollbarUpdateContext = { + size: boolean, + position: boolean, +}; + +export default class CustomScrollbars extends Component { + props: { + thumbInset: { x: number, y: number }, + children: ?React.Element<*>, + }; + + static defaultProps = { + thumbInset: { x: 2, y: 2 }, + }; + + _scrollableElement: ?HTMLElement; + _thumbElement: ?HTMLElement; + + componentDidMount() { + this._updateScrollbarsHelper({ + position: true, + size: true + }); + } + + componentDidUpdate() { + this._updateScrollbarsHelper({ + position: true, + size: true + }); + } + + render() { + return ( + <div className="custom-scrollbars"> + <div className="custom-scrollbars__thumb" + style={{ position: 'absolute', top: 0, right: 0 }} + ref={ this._onThumbRef }></div> + <div className="custom-scrollbars__scrollable" + style={{ overflow: 'auto' }} + onScroll={ this._onScroll } + ref={ this._onScrollableRef }> + { this.props.children } + </div> + </div> + ); + } + + + _onScrollableRef = (ref) => { + this._scrollableElement = ref; + } + + _onThumbRef = (ref) => { + this._thumbElement = ref; + } + + _onScroll = () => { + this._updateScrollbarsHelper({ position: true }); + } + + _computeThumbPosition(scrollable: HTMLElement, thumb: HTMLElement) { + // the content height of the scroll view + const scrollHeight = scrollable.scrollHeight; + + // the visible height of the scroll view + const visibleHeight = scrollable.offsetHeight; + + // scroll offset + const scrollTop = scrollable.scrollTop; + + // lowest point of scrollTop + const maxScrollTop = scrollHeight - visibleHeight; + + // calculate scroll position within 0..1 range + const scrollPosition = scrollHeight > 0 ? scrollTop / maxScrollTop : 0; + + const thumbHeight = thumb.clientHeight; + + // calculate the thumb boundary to make sure that the visual appearance of + // a thumb at lowest point matches the bottom of scrollable view + const thumbBoundary = visibleHeight - thumbHeight - (this.props.thumbInset.y * 2); + + // calculate thumb position based on scroll progress and thumb boundary + // adding vertical inset to adjust the thumb's appearance + const thumbPosition = (thumbBoundary * scrollPosition) + this.props.thumbInset.y; + + return { + x: -this.props.thumbInset.x, + y: thumbPosition, + }; + } + + _computeThumbHeight(scrollable: HTMLElement) { + const scrollHeight = scrollable.scrollHeight; + const visibleHeight = scrollable.offsetHeight; + + const thumbHeight = (visibleHeight / scrollHeight) * visibleHeight; + + // ensure that the scroll thumb doesn't shrink to nano size + return Math.max(thumbHeight, 8); + } + + _updateScrollbarsHelper(updateFlags: $Shape<ScrollbarUpdateContext>) { + const scrollable = this._scrollableElement; + const thumb = this._thumbElement; + if(scrollable && thumb) { + this._updateScrollbars(scrollable, thumb, updateFlags); + } + } + + _updateScrollbars(scrollable: HTMLElement, thumb: HTMLElement, context: $Shape<ScrollbarUpdateContext>) { + if(context.size) { + const thumbHeight = this._computeThumbHeight(scrollable); + thumb.style.setProperty('height', thumbHeight + 'px'); + + // hide thumb when there is nothing to scroll + if(thumbHeight < scrollable.offsetHeight) { + thumb.style.setProperty('opacity', '1'); + } else { + thumb.style.setProperty('opacity', '0'); + } + } + + if(context.position) { + const { x, y } = this._computeThumbPosition(scrollable, thumb); + thumb.style.setProperty('transform', `translate(${x}px, ${y}px)`); + } + } +} diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js new file mode 100644 index 0000000000..c2e02cc35c --- /dev/null +++ b/app/components/HeaderBar.js @@ -0,0 +1,61 @@ +// @flow +import React from 'react'; +import { + Component, + Text, + Button, + View +} from 'reactxp'; + +import Img from './Img'; + +import styles from './HeaderBarStyles'; + +export type HeaderBarStyle = 'default' | 'defaultDark' | 'error' | 'success'; +export type HeaderBarProps = { + style: HeaderBarStyle; + hidden: boolean; + showSettings: boolean; + onSettings: ?(() => void); +}; + +export default class HeaderBar extends Component { + props: HeaderBarProps; + static defaultProps: $Shape<HeaderBarProps> = { + style: 'default', + hidden: false, + showSettings: false, + onSettings: null + }; + + render() { + let containerClass = [ + styles['headerbar'], + styles['headerbar__' + process.platform], + styles['headerbar__style_' + this.props.style] + ]; + + if(this.props.hidden) { + containerClass.push(styles['headerbar__hidden']); + } + + return ( + <View style={ containerClass }> + {!this.props.hidden ? + <View style={styles.headerbar__container} testName="headerbar__container"> + <Img style={ styles.headerbar__logo } source='logo-icon'/> + <Text style={styles.headerbar__title}>MULLVAD VPN</Text> + </View> + : null} + + {this.props.showSettings ? + <View style={styles.headerbar__settings}> + <Button onPress={ this.props.onSettings } testName="headerbar__settings"> + <Img style={ styles.headerbar__settings } source='icon-settings'/> + </Button> + </View> + : null} + </View> + ); + } +} diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js new file mode 100644 index 0000000000..5e80f4f635 --- /dev/null +++ b/app/components/HeaderBarStyles.js @@ -0,0 +1,69 @@ +// @flow +import { Styles } from 'reactxp'; + +const styles = { + headerbar: + Styles.createViewStyle({ + paddingTop: 12, + paddingBottom: 12, + paddingLeft: 12, + paddingRight: 12, + backgroundColor: '#294D73', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }), + headerbar__hidden: + Styles.createViewStyle({ + paddingTop: 24, + paddingBottom: 0, + paddingLeft: 0, + paddingRight: 0, + }), + headerbar__darwin: Styles.createViewStyle({ + paddingTop: 24, + }), + headerbar__style_defaultDark: + Styles.createViewStyle({ + backgroundColor: '#192E45', + }), + headerbar__style_error: + Styles.createViewStyle({ + backgroundColor: '#D0021B', + }), + headerbar__style_success: + Styles.createViewStyle({ + backgroundColor: '#44AD4D', + }), + headerbar__container: + Styles.createViewStyle({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }), + headerbar__title: + Styles.createTextStyle({ + fontFamily: 'DINPro', + fontSize: 24, + fontWeight: '900', + lineHeight: 30, + letterSpacing: -0.5, + color: 'rgba(255,255,255,0.6)', + marginLeft: 8, + }), + headerbar__logo: + Styles.createViewStyle({ + height: 50, + width: 50, + }), + headerbar__settings: + Styles.createViewStyle({ + width: 24, + height: 24, + backgroundColor: 'transparent', + marginLeft: -6, //Because of button.css, when removed remove this + marginTop: -1, //Because of button.css, when removed remove this + }) +}; + +module.exports = styles; diff --git a/app/components/Img.android.js b/app/components/Img.android.js new file mode 100644 index 0000000000..303fe4e5cb --- /dev/null +++ b/app/components/Img.android.js @@ -0,0 +1,9 @@ +// @flow +import React from 'react'; +import { Image, Component } from 'reactxp'; + +export default class Img extends Component { + render(){ + return (<Image style={ this.props.style } source={ this.props.source }/>); + } +} diff --git a/app/components/Img.js b/app/components/Img.js new file mode 100644 index 0000000000..0c687ff654 --- /dev/null +++ b/app/components/Img.js @@ -0,0 +1,13 @@ +// @flow +import React from 'react'; +import { View, Component } from 'reactxp'; + +export default class Img extends Component { + render() { + const url = './assets/images/' + this.props.source + '.svg'; + + const style = this.props.style; + + return (<View style={ style }> <img src={ url } /> </View>); + } +} diff --git a/app/components/Layout.css b/app/components/Layout.css new file mode 100644 index 0000000000..14acf93769 --- /dev/null +++ b/app/components/Layout.css @@ -0,0 +1,15 @@ +.layout { + display: flex; + flex-direction: column; + height: 100vh; +} + +.layout__header { + flex: 0 0 auto; +} + +.layout__container { + flex: 1 1 100%; + background: #294D73; + overflow: hidden; /* needed for flex boxes with overflow: auto to work */ +}
\ No newline at end of file diff --git a/app/components/Layout.js b/app/components/Layout.js new file mode 100644 index 0000000000..5c0e1f5bcb --- /dev/null +++ b/app/components/Layout.js @@ -0,0 +1,46 @@ +// @flow +import React, { Component } from 'react'; +import HeaderBar from './HeaderBar'; + +import type { HeaderBarProps } from './HeaderBar'; + +export class Header extends Component { + props: HeaderBarProps; + static defaultProps = HeaderBar.defaultProps; + + render(): React.Element<*> { + return ( + <div className="layout__header"> + <HeaderBar { ...this.props } /> + </div> + ); + } +} + +export class Container extends Component { + props: { + children: React.Element<*> + } + + render(): React.Element<*> { + return ( + <div className="layout__container"> + { this.props.children } + </div> + ); + } +} + +export class Layout extends Component { + props: { + children: Array<React.Element<*>> | React.Element<*> + } + + render(): React.Element<*> { + return ( + <div className="layout"> + { this.props.children } + </div> + ); + } +} diff --git a/app/components/Login.css b/app/components/Login.css new file mode 100644 index 0000000000..9311212ec9 --- /dev/null +++ b/app/components/Login.css @@ -0,0 +1,211 @@ +.login { + height: 100%; + display: flex; + flex-direction: column; +} + +.login-footer { + background-color: #192E45; + padding: 18px 24px 24px; + flex: 0 0 auto; + transition: transform 0.25s ease-in-out; +} + +.login-footer--invisible { + transform: translateY(100%); +} + +.login-form__status-icon { + flex: 0 0 auto; /* never collapse or grow */ + text-align: center; + margin-bottom: 44px; + + /* use fixed size to make space and avoid jitter when changing <img> visibility */ + height: 60px; +} + +.login-footer__prompt { + font-family: "Open Sans"; + font-size: 13px; + line-height: 18px; + font-weight: 600; + color: rgba(255,255,255,0.8); + margin-bottom: 8px; +} + +.login-form { + display: flex; + flex-direction: column; + padding: 0 24px; + margin: 83px 0 auto; +} + +.login-form__title { + font-family: DINPro; + font-size: 32px; + font-weight: 900; + line-height: 1.25em; + color: #FFFFFF; + margin-bottom: 7px; +} + +.login-form__subtitle { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: normal; + color: rgba(255,255,255,0.8); + margin-bottom: 8px; +} + +.login-form__account-input-container { + /* + Provides an anchor for input-container + to be properly positioned when it gains absolute + position to overlap the footer view. + */ + position: relative; + + /* push border to the outer side of the layout grid */ + margin-left: -2px; + margin-right: -2px; +} + +.login-form__account-input-group { + border: 2px solid transparent; + border-radius: 8px; + transition: border 0.25s ease-in-out; + overflow: hidden; +} + +.login-form__account-input-group--active { + position: absolute; + border-color: rgba(25,46,69,0.4); +} + +.login-form__account-input-group--inactive { + opacity: 0.6; +} + +.login-form__account-input-group--error { + border-color: rgba(208,2,27,0.4); +} + +.login-form__account-input-group--error .login-form__account-input-textfield { + color: #D0021B; +} + +.login-form__account-input-backdrop { + background-color: #FFFFFF; + display: flex; + flex-direction: row; + transition: background-color 0.25s ease-in-out; +} + +.login-form__account-input-textfield::-webkit-input-placeholder { + color: rgba(41,77,115,0.4); +} + +.login-form__account-input-textfield { + width: 100%; + border: 0; + padding: 10px 12px 12px 12px; + font-family: DINPro; + font-size: 20px; + font-weight: 900; + line-height: 26px; + color: #294D73; + background-color: transparent; + flex: 1 1 auto; + transition: 0.3s color ease-in-out; +} + +.login-form__account-input-textfield--inactive { + background-color: rgba(255,255,255,0.6); +} + +.login-form__account-input-button { + flex: 0 0 auto; + border: 0; + width: 48px; + background-color: transparent; + transition-duration: 0.3s; + transition-property: background-color, opacity; + transition-timing-function: ease-in-out; +} + +.login-form__account-input-button-icon { + display: inline-block; + vertical-align: middle; +} + +.login-form__account-input-button-icon path { + fill: rgba(41,77,115,0.2); + transition: fill 0.3s ease-in-out; +} + +.login-form__account-input-button--active { + background-color: #44ad4d; +} + +.login-form__account-input-button--active .login-form__account-input-button-icon path { + fill: #fff; +} + +.login-form__account-input-button--active:hover { + background-color: rgba(68, 173, 76, 0.9); +} + +.login-form__account-input-button--invisible { + visibility: hidden; + opacity: 0; +} + +.login-form__account-dropdown-container { + overflow: hidden; + transition: height 0.25s ease-in-out; +} + +.login-form__account-dropdown__item { + display: flex; + flex-direction: row; + border-top: 1px solid rgba(25,46,69,0.4); + background-color: rgba(255,255,255,0.6); + background-clip: padding-box; + transition: background-color 0.25s ease-in-out; +} + +.login-form__account-dropdown__item:hover { + background-color: rgba(255,255,255,0.65); +} + +.login-form__account-dropdown__label { + flex: 1 1 auto; + font-family: DINPro; + font-size: 20px; + font-weight: 900; + line-height: 26px; + color: #294D73; + border: 0; + background: transparent; + padding: 10px 12px 12px 12px; + text-align: left; +} + +.login-form__account-dropdown__remove { + background: transparent; + border: 0; + padding: 10px 12px 12px 12px; + + /* center SVG within button */ + display: flex; + justify-content: center; +} + +.login-form__account-dropdown__remove path { + transition: fill-opacity 0.25s ease-in-out; +} + +.login-form__account-dropdown__remove:hover path { + fill-opacity: 1; +}
\ No newline at end of file diff --git a/app/components/Login.js b/app/components/Login.js new file mode 100644 index 0000000000..c133954eed --- /dev/null +++ b/app/components/Login.js @@ -0,0 +1,339 @@ +// @flow +import React, { Component } from 'react'; +import { Layout, Container, Header } from './Layout'; +import AccountInput from './AccountInput'; +import { formatAccount } from '../lib/formatters'; +import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; +import LoginArrowSVG from '../assets/images/icon-arrow.svg'; +import RemoveAccountSVG from '../assets/images/icon-close-sml.svg'; + +import type { AccountReduxState } from '../redux/account/reducers'; +import type { AccountToken } from '../lib/ipc-facade'; + +export type LoginPropTypes = { + account: AccountReduxState, + onLogin: (accountToken: AccountToken) => void, + onSettings: ?(() => void), + onFirstChangeAfterFailure: () => void, + onExternalLink: (type: string) => void, + onAccountTokenChange: (accountToken: AccountToken) => void, + onRemoveAccountTokenFromHistory: (accountToken: AccountToken) => void, +}; + +export default class Login extends Component { + props: LoginPropTypes; + state = { + notifyOnFirstChangeAfterFailure: false, + isActive: false, + dropdownHeight: 0 + }; + + constructor(props: LoginPropTypes) { + super(props); + if(props.account.status === 'failed') { + this.state.notifyOnFirstChangeAfterFailure = true; + } + } + + componentDidMount() { + this._updateDropdownHeight(); + } + + componentDidUpdate() { + this._updateDropdownHeight(); + } + + componentWillReceiveProps(nextProps: LoginPropTypes) { + const prev = this.props.account || {}; + const next = nextProps.account || {}; + + if(prev.status !== next.status && next.status === 'failed') { + this.setState({ notifyOnFirstChangeAfterFailure: true }); + } + } + + render() { + const footerClass = this._shouldShowFooter() ? '' : 'login-footer--invisible'; + return ( + <Layout> + <Header showSettings={ true } onSettings={ this.props.onSettings } /> + <Container> + <div className="login"> + <div className="login-form"> + { this._getStatusIcon() } + + <div className="login-form__title">{ this._formTitle() }</div> + + {this._shouldShowLoginForm() && <div className='login-form__fields'> + { this._createLoginForm() } + </div>} + </div> + + <div className={ 'login-footer ' + footerClass }> + { this._createFooter() } + </div> + </div> + </Container> + </Layout> + ); + } + + _onCreateAccount = () => this.props.onExternalLink('createAccount'); + _onFocus = () => this.setState({ isActive: true }); + _onBlur = (e) => { + const relatedTarget = e.relatedTarget; + + // restore focus if click happened within dropdown + if(relatedTarget && this._isWithinDropdown(relatedTarget)) { + e.target.focus(); + return; + } + + this.setState({ isActive: false }); + } + + _onLogin = () => { + const accountToken = this.props.account.accountToken; + if(accountToken && accountToken.length > 0) { + this.props.onLogin(accountToken); + } + } + + _onInputChange = (value: string) => { + // notify delegate on first change after login failure + if(this.state.notifyOnFirstChangeAfterFailure) { + this.setState({ notifyOnFirstChangeAfterFailure: false }); + this.props.onFirstChangeAfterFailure(); + } + this.props.onAccountTokenChange(value); + } + + _formTitle() { + switch(this.props.account.status) { + case 'logging in': + return 'Logging in...'; + case 'failed': + return 'Login failed'; + case 'ok': + return 'Login successful'; + default: + return 'Login'; + } + } + + _formSubtitle() { + const { status, error } = this.props.account; + switch(status) { + case 'failed': + return (error && error.message) || 'Unknown error'; + case 'logging in': + return 'Checking account number'; + default: + return 'Enter your account number'; + } + } + + _getStatusIcon() { + const statusIconPath = this._getStatusIconPath(); + return <div className="login-form__status-icon"> + { statusIconPath ? + <img src={ statusIconPath } alt="" /> : + null } + </div>; + } + + _getStatusIconPath(): ?string { + switch(this.props.account.status) { + case 'logging in': + return './assets/images/icon-spinner.svg'; + case 'failed': + return './assets/images/icon-fail.svg'; + case 'ok': + return './assets/images/icon-success.svg'; + default: + return undefined; + } + } + + _accountInputGroupClass(): string { + const classes = ['login-form__account-input-group']; + if(this.state.isActive) { + classes.push('login-form__account-input-group--active'); + } + + switch(this.props.account.status) { + case 'logging in': + classes.push('login-form__account-input-group--inactive'); + break; + case 'failed': + classes.push('login-form__account-input-group--error'); + break; + } + + return classes.join(' '); + } + + _accountInputButtonClass(): string { + const { accountToken, status } = this.props.account; + const classes = ['login-form__account-input-button']; + + if(accountToken && accountToken.length > 0) { + classes.push('login-form__account-input-button--active'); + } + + if(status === 'logging in') { + classes.push('login-form__account-input-button--invisible'); + } + + return classes.join(' '); + } + + _shouldEnableAccountInput() { + // enable account input always except when "logging in" + return this.props.account.status !== 'logging in'; + } + + _shouldShowAccountHistory() { + return this._shouldEnableAccountInput() && + this.state.isActive && + this.props.account.accountHistory.length > 0; + } + + _shouldShowLoginForm() { + return this.props.account.status !== 'ok'; + } + + _shouldShowFooter() { + const { status } = this.props.account; + return (status === 'none' || status === 'failed') && !this._shouldShowAccountHistory(); + } + + // helper function to calculate and save dropdown element's height + // this is a no-op of the height didn't change since last update + _updateDropdownHeight() { + const element = this._accountDropdownElement; + if(element && this.state.dropdownHeight !== element.clientHeight) { + this.setState({ + dropdownHeight: element.clientHeight + }); + } + } + + // returns true if DOM node is within dropdown hierarchy + _isWithinDropdown(relatedTarget) { + const dropdownElement = this._accountDropdownElement; + return dropdownElement && dropdownElement.contains(relatedTarget); + } + + // container element used for measuring the height of the accounts dropdown + _accountDropdownElement: ?HTMLElement; + _onAccountDropdownContainerRef = ref => this._accountDropdownElement = ref; + + _onSelectAccountFromHistory = (accountToken) => { + this.props.onAccountTokenChange(accountToken); + this.props.onLogin(accountToken); + } + + _createLoginForm() { + const { accountHistory, accountToken } = this.props.account; + const dropdownStyles = { + height: this._shouldShowAccountHistory() ? this.state.dropdownHeight : 0 + }; + + // auto-focus on account input when failed to log in + // do not refactor this into instance method, + // it has to be new function each time to be called on each render + const autoFocusOnFailure = (input) => { + if(this.props.account.status === 'failed' && input) { + input.focus(); + } + }; + + return <div> + <div className="login-form__subtitle">{ this._formSubtitle() }</div> + <div className="login-form__account-input-container"> + <div className={ this._accountInputGroupClass() }> + <div className="login-form__account-input-backdrop"> + <AccountInput className="login-form__account-input-textfield" + type="text" + placeholder="e.g 0000 0000 0000" + onFocus={ this._onFocus } + onBlur={ this._onBlur } + onChange={ this._onInputChange } + onEnter={ this._onLogin } + value={ accountToken || '' } + disabled={ !this._shouldEnableAccountInput() } + autoFocus={ true } + ref={ autoFocusOnFailure } /> + <button className={ this._accountInputButtonClass() } onClick={ this._onLogin }> + <LoginArrowSVG className="login-form__account-input-button-icon" /> + </button> + </div> + <div style={ dropdownStyles } className="login-form__account-dropdown-container"> + <div ref={ this._onAccountDropdownContainerRef }> + { <AccountDropdown + items={ accountHistory.slice().reverse() } + onSelect={ this._onSelectAccountFromHistory } + onRemove={ this.props.onRemoveAccountTokenFromHistory } /> } + </div> + </div> + </div> + </div> + </div>; + } + + _createFooter() { + return <div> + <div className="login-footer__prompt">{ 'Don\'t have an account number?' }</div> + <button className="button button--primary" onClick={ this._onCreateAccount }> + <span className="button-label">Create account</span> + <ExternalLinkSVG className="button-icon button-icon--16" /> + </button> + </div>; + } +} + +class AccountDropdown extends Component { + props: { + items: Array<AccountToken>, + onSelect: ((value: AccountToken) => void), + onRemove: ((value: AccountToken) => void) + }; + + render() { + const uniqueItems = [...new Set(this.props.items)]; + return ( + <div className="login-form__account-dropdown"> + { uniqueItems.map(token => ( + <AccountDropdownItem key={ token } + value={ token } + label={ formatAccount(token) } + onSelect={ this.props.onSelect } + onRemove={ this.props.onRemove } /> + )) } + </div> + ); + } +} + +class AccountDropdownItem extends Component { + props: { + label: string, + value: AccountToken, + onRemove: (value: AccountToken) => void, + onSelect: (value: AccountToken) => void + }; + + render() { + return ( + <div className="login-form__account-dropdown__item"> + <button className="login-form__account-dropdown__label" + onClick={ () => this.props.onSelect(this.props.value) }>{ this.props.label }</button> + <button className="login-form__account-dropdown__remove" + onClick={ () => this.props.onRemove(this.props.value) }> + <RemoveAccountSVG /> + </button> + </div> + ); + } +} diff --git a/app/components/Map.js b/app/components/Map.js new file mode 100644 index 0000000000..337d5c812b --- /dev/null +++ b/app/components/Map.js @@ -0,0 +1,51 @@ +// @flow + +import React, { Component } from 'react'; +import ReactMapboxGl, { Marker } from 'react-mapbox-gl'; +import { mapbox as mapboxConfig } from '../config'; +import cheapRuler from 'cheap-ruler'; + +import type { Coordinate2d } from '../types'; + +const ReactMap = ReactMapboxGl({ + accessToken: mapboxConfig.accessToken, + attributionControl: false, + interactive: false, +}); + +export default class Map extends Component { + props: { + animate: boolean, + location: Coordinate2d, + altitude: number, + markerImagePath: string, + } + + render() { + + const mapBounds = this.calculateMapBounds(this.props.location, this.props.altitude); + + const mapBoundsOptions = { offset: [0, -113], animate: this.props.animate }; + + return <ReactMap style={ mapboxConfig.styleURL } + containerStyle={{ height: '100%' }} + fitBounds={ mapBounds } + fitBoundsOptions={ mapBoundsOptions }> + + <Marker coordinates={ this.convertToMapCoordinate(this.props.location) } offset={ [0, -10] }> + <img src={ this.props.markerImagePath } /> + </Marker> + </ReactMap>; + } + + calculateMapBounds(center: Coordinate2d, altitude: number): [Coordinate2d, Coordinate2d] { + const bounds = cheapRuler(center[0], 'meters').bufferPoint(center, altitude); + // convert [lat,lng] bounds to [lng,lat] + return [ [bounds[1], bounds[0]], [bounds[3], bounds[2]] ]; + } + + convertToMapCoordinate(pos: Coordinate2d): Coordinate2d { + // convert [lat,lng] bounds to [lng,lat] + return [pos[1], pos[0]]; + } +} diff --git a/app/components/SelectLocation.css b/app/components/SelectLocation.css new file mode 100644 index 0000000000..7e107f237f --- /dev/null +++ b/app/components/SelectLocation.css @@ -0,0 +1,146 @@ +.select-location { + background: #192E45; + height: 100%; +} + +.select-location__container { + display: flex; + flex-direction: column; + height: 100%; +} + +.select-location__header { + flex: 0 0 auto; + padding: 40px 24px 16px; + position: relative; /* anchor for close button */ +} + +.select-location__close { + position: absolute; + display: block; + border: 0; + padding: 0; + margin: 0; + width: 24px; + height: 24px; + top: 24px; + left: 12px; + background-color: transparent; + background-image: url(../assets/images/icon-close.svg); + opacity: 0.6; + z-index: 1; /* part of .select-location__container covers the button */ +} + +.select-location__title { + font-family: DINPro; + font-size: 32px; + font-weight: 900; + line-height: 1.25em; + color: #FFFFFF; +} + +.select-location__subtitle { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: normal; + color: rgba(255,255,255,0.8); + padding: 0 24px 24px; +} + +.select-location__cell { + background-color: rgba(41,71,115,1); + display: flex; + flex-direction: row; + align-items: stretch; +} + +.select-location__cell-content { + padding: 15px 24px; + display: flex; + flex: 1 1 auto; + flex-direction: row; + align-items: center; +} + +.select-location__cell--selectable:hover { + background-color:rgba(41,71,115,0.9); +} + +.select-location__cell--selected, +.select-location__cell--selected:hover { + background-color: #44AD4D; +} + +.select-location__country + .select-location__country { + margin-top: 1px; +} + +.select-location__cell-label { + font-family: DINPro; + font-size: 20px; + font-weight: 900; + line-height: 26px; + color: #FFFFFF; +} + +.select-location__cell-label--inactive { + color: rgba(255, 255, 255, 0.2); +} + +.select-location__cell-icon { + width: 24px; + height: 24px; + flex: 0 0 auto; + margin-right: 8px; + align-items: center; + justify-content: center; + display: flex; + color: #fff; +} + +.select-location__collapse-button { + border: 0; + background: transparent; + padding: 0; + margin: 0 0 0 auto; + display: flex; + align-items: stretch; + padding: 12px; +} + +.select-location__collapse-icon { + color: #fff; +} + +.select-location__sub-cell { + background-color: rgb(36, 57, 84); + padding: 15px 24px 15px 40px; + display: flex; + flex-direction: row; + align-items: center; + margin-top: 1px; +} + +.select-location__sub-cell--selectable:hover { + background-color: rgba(41,71,115,0.9); +} + +.select-location__sub-cell--selected, +.select-location__sub-cell--selected:hover { + background-color: #44AD4D; +} + +.select-location-relay-status { + width: 16px; + height: 16px; + border-radius: 8px; +} + +.select-location-relay-status--inactive { + background: rgba(208, 2, 27, 0.95); +} + +.select-location-relay-status--active { + background: rgba(68, 173, 77, 0.9); +}
\ No newline at end of file diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js new file mode 100644 index 0000000000..7fb124bf33 --- /dev/null +++ b/app/components/SelectLocation.js @@ -0,0 +1,225 @@ +// @flow +import React, { Component } from 'react'; +import { Layout, Container, Header } from './Layout'; +import CustomScrollbars from './CustomScrollbars'; + +import Accordion from './Accordion'; +import ChevronDownSVG from '../assets/images/icon-chevron-down.svg'; +import ChevronUpSVG from '../assets/images/icon-chevron-up.svg'; +import TickSVG from '../assets/images/icon-tick.svg'; + +import type { SettingsReduxState, RelayLocationRedux, RelayLocationCityRedux } from '../redux/settings/reducers'; +import type { RelayLocation } from '../lib/ipc-facade'; + +export type SelectLocationProps = { + settings: SettingsReduxState, + onClose: () => void; + onSelect: (location: RelayLocation) => void; +}; + +export default class SelectLocation extends Component { + props: SelectLocationProps; + _selectedCell: ?HTMLElement; + + state = { + expanded: ([]: Array<string>), + }; + + constructor(props: SelectLocationProps, context?: any) { + super(props, context); + + // set initially expanded country based on relaySettings + const relaySettings = this.props.settings.relaySettings; + if(relaySettings.normal) { + const { location } = relaySettings.normal; + if(location === 'any') { + // no-op + } else if(location.country) { + this.state.expanded.push(location.country); + } else if(location.city) { + this.state.expanded.push(location.city[0]); + } + } + } + + componentDidMount() { + // restore scroll to selected cell + const cell = this._selectedCell; + if(cell) { + // this is non-standard webkit method but it works great! + if(typeof(cell.scrollIntoViewIfNeeded) !== 'function') { + console.warn('HTMLElement.scrollIntoViewIfNeeded() is not available anymore! Please replace it with viable alternative.'); + return; + } + cell.scrollIntoViewIfNeeded(true); + } + } + + render() { + return ( + <Layout> + <Header hidden={ true } style={ 'defaultDark' } /> + <Container> + <div className="select-location"> + <button className="select-location__close" onClick={ this.props.onClose } /> + <div className="select-location__container"> + <div className="select-location__header"> + <h2 className="select-location__title">Select location</h2> + </div> + + <CustomScrollbars autoHide={ true }> + <div> + <div className="select-location__subtitle"> + While connected, your real location is masked with a private and secure location in the selected region + </div> + + { this.props.settings.relayLocations.map((relayCountry) => { + return this._renderCountry(relayCountry); + }) } + + </div> + </CustomScrollbars> + </div> + </div> + </Container> + </Layout> + ); + } + + _isSelected(selectedLocation: RelayLocation) { + const { relaySettings } = this.props.settings; + if(relaySettings.normal) { + const otherLocation = relaySettings.normal.location; + + if(selectedLocation.country && otherLocation.country && + selectedLocation.country === otherLocation.country) { + return true; + } + + if(Array.isArray(selectedLocation.city) && Array.isArray(otherLocation.city)) { + const selectedCity = selectedLocation.city; + const otherCity = otherLocation.city; + + return selectedCity.length === otherCity.length && + selectedCity.every((v, i) => v === otherCity[i]); + } + } + return false; + } + + _toggleCollapse = (countryCode: string) => { + this.setState((state) => { + const expanded = state.expanded.slice(); + const index = expanded.indexOf(countryCode); + if(index === -1) { + expanded.push(countryCode); + } else { + expanded.splice(index, 1); + } + return { expanded }; + }); + } + + _relayStatusIndicator(active: boolean) { + const statusClass = active ? 'select-location-relay-status--active' : 'select-location-relay-status--inactive'; + + return (<div className={ 'select-location-relay-status ' + statusClass }></div>); + } + + _renderCountry(relayCountry: RelayLocationRedux) { + const isSelected = this._isSelected({ country: relayCountry.code }); + + // either expanded by user or when the city selected within the country + const isExpanded = this.state.expanded.includes(relayCountry.code); + + const handleSelect = (relayCountry.hasActiveRelays && !isSelected) ? () => { + this.props.onSelect({ country: relayCountry.code }); + } : undefined; + + const handleCollapse = (e) => { + this._toggleCollapse(relayCountry.code); + e.stopPropagation(); + }; + + const countryClass = 'select-location__cell' + + (isSelected ? ' select-location__cell--selected' : '') + + (relayCountry.hasActiveRelays ? ' select-location__cell--selectable' : ''); + + const onRef = isSelected ? (element) => { + this._selectedCell = element; + } : undefined; + + return ( + <div key={ relayCountry.code } className="select-location__country"> + <div className={ countryClass } + onClick={ handleSelect } + ref={ onRef }> + <div className="select-location__cell-content"> + + <div className="select-location__cell-icon"> + { isSelected ? + <TickSVG /> : + this._relayStatusIndicator(relayCountry.hasActiveRelays) } + </div> + + <div className={ 'select-location__cell-label' + + (relayCountry.hasActiveRelays ? '' : ' select-location__cell-label--inactive') }> + { relayCountry.name } + </div> + </div> + + { relayCountry.hasActiveRelays && <button type="button" className="select-location__collapse-button" onClick={ handleCollapse }> + { isExpanded ? + <ChevronUpSVG className="select-location__collapse-icon" /> : + <ChevronDownSVG className="select-location__collapse-icon" /> } + </button> } + + </div> + + { relayCountry.hasActiveRelays && relayCountry.cities.length > 0 && + (<Accordion className="select-location__cities" height={ isExpanded ? 'auto' : 0 }> + { relayCountry.cities.map((relayCity) => this._renderCity(relayCountry.code, relayCity)) } + </Accordion>) + } + </div> + ); + } + + _renderCity(countryCode: string, relayCity: RelayLocationCityRedux) { + const relayLocation: RelayLocation = { city: [countryCode, relayCity.code] }; + + const isSelected = this._isSelected(relayLocation); + + const cityClass = 'select-location__sub-cell' + + (isSelected ? ' select-location__sub-cell--selected' : '') + + (relayCity.hasActiveRelays ? ' select-location__sub-cell--selectable' : ''); + + const handleSelect = (relayCity.hasActiveRelays && !isSelected) ? () => { + this.props.onSelect(relayLocation); + } : undefined; + + const onRef = isSelected ? (element) => { + this._selectedCell = element; + } : undefined; + + return ( + <div key={ `${countryCode}_${relayCity.code}` } + className={ cityClass } + onClick={ handleSelect } + ref={ onRef }> + + <div className="select-location__cell-icon"> + { isSelected ? + <TickSVG /> : + this._relayStatusIndicator(relayCity.hasActiveRelays) } + </div> + + <div className={ 'select-location__cell-label' + + (relayCity.hasActiveRelays ? '' : ' select-location__cell-label--inactive') }> + { relayCity.name } + </div> + </div> + ); + } + +} diff --git a/app/components/Settings.css b/app/components/Settings.css new file mode 100644 index 0000000000..9e49c814f9 --- /dev/null +++ b/app/components/Settings.css @@ -0,0 +1,125 @@ +.settings { + background: #192E45; + height: 100%; +} + +.settings__container { + display: flex; + flex-direction: column; + height: 100%; +} + +.settings__header { + flex: 0 0 auto; + padding: 40px 24px 24px; + position: relative; /* anchor for close button */ +} + +.settings__content { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.settings__close { + position: absolute; + display: block; + border: 0; + padding: 0; + margin: 0; + width: 24px; + height: 24px; + top: 24px; + left: 12px; + background-color: transparent; + background-image: url(../assets/images/icon-close.svg); + opacity: 0.6; + z-index: 1; /* part of .settings__container covers the button */ +} + +.settings__title { + font-family: DINPro; + font-size: 32px; + font-weight: 900; + line-height: 40px; + color: #FFFFFF; +} + +.settings__cell { + background-color:rgba(41,71,115,1); + padding: 15px 24px; + display: flex; + flex-direction: row; + align-items: center; +} + +.settings__cell-disclosure { + display: block; + margin-left: 8px; + color: rgba(255, 255, 255, 0.8); +} + +.settings__cell-spacer { + height: 24px; +} + +.settings__cell--selected, +.settings__cell--selected:hover { + background-color: #44AD4D; +} + +.settings__cell--active:hover { + background-color: rgba(41,71,115,0.9); +} + +.settings__cell + .settings__cell { + margin-top: 1px; +} + +.settings__cell-label { + font-family: DINPro; + font-size: 20px; + font-weight: 900; + line-height: 26px; + color: #FFFFFF; + flex: 1 0 auto; +} + +.settings__cell-icon { + width: 16px; + flex: 0 0 auto; + color: rgba(255, 255, 255, 0.8); +} + +.settings__cell-value { + flex: 0 0 auto; +} + +.settings__account-paid-until-label { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 800; + line-height: 26px; /* matches .cell-label */ + color: rgba(255, 255, 255, 0.8); + text-transform: uppercase; +} + +.settings__account-paid-until-label--error { + color: #d0021b; +} + +.settings__cell-footer { + padding: 8px 24px 24px; + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: 20px; + color: rgba(255,255,255,0.8); +} + +.settings__footer { + padding: 24px; +} + +.settings__footer .button + .button { margin-top: 16px; } diff --git a/app/components/Settings.js b/app/components/Settings.js new file mode 100644 index 0000000000..492b2bd403 --- /dev/null +++ b/app/components/Settings.js @@ -0,0 +1,120 @@ +// @flow +import moment from 'moment'; +import React, { Component } from 'react'; +import { If, Then, Else } from 'react-if'; +import { Layout, Container, Header } from './Layout'; +import CustomScrollbars from './CustomScrollbars'; + +import ChevronRightSVG from '../assets/images/icon-chevron.svg'; +import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; + +import type { AccountReduxState } from '../redux/account/reducers'; +import type { SettingsReduxState } from '../redux/settings/reducers'; + +export type SettingsProps = { + account: AccountReduxState, + settings: SettingsReduxState, + onQuit: () => void, + onClose: () => void, + onViewAccount: () => void, + onViewSupport: () => void, + onViewAdvancedSettings: () => void, + onExternalLink: (type: string) => void +}; + +export default class Settings extends Component { + + props: SettingsProps; + + render() { + const isLoggedIn = this.props.account.status === 'ok'; + let isOutOfTime = false, formattedExpiry = ''; + let expiryIso = this.props.account.expiry; + + if(isLoggedIn && expiryIso) { + let expiry = moment(this.props.account.expiry); + isOutOfTime = expiry.isSameOrBefore(moment()); + formattedExpiry = expiry.fromNow(true) + ' left'; + } + + return ( + <Layout> + <Header hidden={ true } style={ 'defaultDark' } /> + <Container> + <div className="settings"> + <button className="settings__close" onClick={ this.props.onClose } /> + <div className="settings__container"> + <div className="settings__header"> + <h2 className="settings__title">Settings</h2> + </div> + <CustomScrollbars autoHide={ true }> + <div className="settings__content"> + <div className="settings__main"> + + { /* show account options when logged in */ } + <If condition={ isLoggedIn }> + <Then> + <div className="settings__account"> + + <div className="settings__view-account settings__cell settings__cell--active" onClick={ this.props.onViewAccount }> + <div className="settings__cell-label">Account</div> + <div className="settings__cell-value"> + <If condition={ isOutOfTime }> + <Then> + <span className="settings__account-paid-until-label settings__account-paid-until-label--error">OUT OF TIME</span> + </Then> + <Else> + <span className="settings__account-paid-until-label">{ formattedExpiry }</span> + </Else> + </If> + </div> + <div className="settings__cell-disclosure"><ChevronRightSVG /></div> + </div> + <div className="settings__cell-spacer"></div> + </div> + </Then> + </If> + + <If condition={ isLoggedIn }> + <Then> + <div className="settings__advanced"> + <div className="settings__cell settings__cell--active" onClick={ this.props.onViewAdvancedSettings }> + <div className="settings__cell-label">Advanced</div> + <div className="settings__cell-value"> + <div className="settings__cell-disclosure"><ChevronRightSVG /></div> + </div> + </div> + <div className="settings__cell-spacer"></div> + </div> + </Then> + </If> + + <div className="settings__external"> + <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'faq') }> + <div className="settings__cell-label">FAQs</div> + <div className="settings__cell-icon"><ExternalLinkSVG /></div> + </div> + <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'guides') }> + <div className="settings__cell-label">Guides</div> + <div className="settings__cell-icon"><ExternalLinkSVG /></div> + </div> + <div className="settings__view-support settings__cell settings__cell--active" onClick={ this.props.onViewSupport }> + <div className="settings__cell-label">Report a problem</div> + <div className="settings__cell-disclosure"><ChevronRightSVG /></div> + </div> + </div> + </div> + + <div className="settings__footer"> + <button className="settings__quit button button--negative" onClick={ this.props.onQuit }>Quit app</button> + </div> + + </div> + </CustomScrollbars> + </div> + </div> + </Container> + </Layout> + ); + } +} diff --git a/app/components/Support.css b/app/components/Support.css new file mode 100644 index 0000000000..8e8198742c --- /dev/null +++ b/app/components/Support.css @@ -0,0 +1,169 @@ +.support { + background: #192E45; + height: 100%; +} + +.support__container { + display: flex; + flex-direction: column; + height: 100%; +} + +.support__header { + flex: 0 0 auto; + padding: 40px 24px 24px; + position: relative; /* anchor for close button */ +} + +.support__close { + position: absolute; + display: flex; + align-items: center; + border: 0; + padding: 0; + margin: 0; + top: 24px; + left: 12px; + z-index: 1; /* part of .support__container covers the button */ +} + +.support__close-icon { + opacity: 0.6; + margin-right: 8px; +} + +.support__close-title { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + color: rgba(255, 255, 255, 0.6); +} + +.support__title { + font-family: DINPro; + font-size: 32px; + font-weight: 900; + line-height: 40px; + color: #FFFFFF; + margin-bottom: 16px; +} + +.support__subtitle { + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: normal; + color: rgba(255,255,255,0.8); +} + +.support__content { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.support__form { + display: flex; + flex: 1 1 auto; + flex-direction: column; +} + +.support__form-row { + padding: 0 24px; +} + +.support__form-row + .support__form-row { + margin-top: 8px; +} + +.support__form-row-message { + display: flex; + flex: 1 1 auto; +} + +.support__form-email { + width: 100%; + border-radius: 4px; + border: 0; + overflow: hidden; + padding: 10px 12px 12px 12px; + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: 26px; + color: #294D73; + background-color: #fff; +} + +.support__form-email::-webkit-input-placeholder { + color: rgba(41,77,115,0.4); +} + +.support__form-message-scroll-wrap { + width: 100%; + display: flex; + border-radius: 4px; + overflow: hidden; +} + +.support__form-message { + width: 100%; + border: 0; + overflow-y: scroll; + resize: none; + padding: 10px 12px 12px 12px; + font-family: "Open Sans"; + font-size: 13px; + font-weight: 600; + line-height: 1.4em; + color: #294D73; + background-color: #fff; +} + +.support__form-message::-webkit-input-placeholder { + color: rgba(41,77,115,0.4); +} + +.support__footer { + padding: 16px 24px 24px; +} + +.support__footer .button + .button { + margin-top: 16px; +} + +.support__sent-email { + display: inline; + font-weight: 900; + color: white; +} + +.support__status-security--secure { + font-family: "Open Sans"; + font-size: 16px; + font-weight: 800; + line-height: 22px; + margin-bottom: 4px; + color: #44AD4D; + text-transform: uppercase; +} + +.support__send-status { + font-family: DINPro; + font-size: 38px; + font-weight: 900; + line-height: 1.16em; + max-height: calc(1.16em * 2); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + letter-spacing: -0.9px; + color: #FFFFFF; + margin-bottom: 4px; +} + +.support__status-icon { + text-align: center; + margin-bottom: 32px; +} diff --git a/app/components/Support.js b/app/components/Support.js new file mode 100644 index 0000000000..04e6c7392d --- /dev/null +++ b/app/components/Support.js @@ -0,0 +1,254 @@ +// @flow +import React, { Component } from 'react'; +import { Layout, Container, Header } from './Layout'; +import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; + +import type { AccountReduxState } from '../redux/account/reducers'; + +export type SupportReport = { + email: string, + message: string, + savedReport: ?string, +}; + +export type SupportState = { + email: string, + message: string, + savedReport: ?string, + sendState: 'INITIAL' | 'LOADING' | 'SUCCESS' | 'FAILED', +}; +export type SupportProps = { + account: AccountReduxState, + onClose: () => void; + onViewLog: (string) => void; + onCollectLog: (Array<string>) => Promise<string>; + onSend: (email: string, message: string, savedReport: string) => void; +}; + +export default class Support extends Component { + props: SupportProps; + state: SupportState = { + email: '', + message: '', + savedReport: null, + sendState: 'INITIAL', + } + + validate() { + return this.state.message.trim().length > 0; + } + + onChangeEmail = (e: Event) => { + const input = e.target; + if(!(input instanceof HTMLInputElement)) { + throw new Error('input must be an instance of HTMLInputElement'); + } + this.setState({ email: input.value }); + } + + onChangeDescription = (e: Event) => { + const input = e.target; + if(!(input instanceof HTMLTextAreaElement)) { + throw new Error('input must be an instance of HTMLTextAreaElement'); + } + this.setState({ message: input.value }); + } + + onViewLog = () => { + + this._getLog() + .then((path) => { + this.props.onViewLog(path); + }); + } + + _getLog() { + const toRedact = []; + if (this.props.account.accountToken) { + toRedact.push(this.props.account.accountToken.toString()); + } + + const { savedReport } = this.state; + return savedReport ? + Promise.resolve(savedReport) : + this.props.onCollectLog(toRedact) + .then( path => { + return new Promise(resolve => this.setState({ savedReport: path }, () => resolve(path))); + }); + } + + onSend = () => { + this.setState({ + sendState: 'LOADING', + }, () => { + this._getLog() + .then((path) => { + return this.props.onSend(this.state.email, this.state.message, path); + }) + .then( () => { + this.setState({ + sendState: 'SUCCESS', + }); + }) + .catch( () => { + this.setState({ + sendState: 'FAILED', + }); + }); + }); + } + + render() { + + const header = <div className="support__header"> + <h2 className="support__title">Report a problem</h2> + { this.state.sendState === 'INITIAL' && <div className="support__subtitle"> + { `To help you more effectively, your app's log file will be attached to this message. + Your data will remain secure and private, as it is encrypted & anonymised before sending.` } + </div> + } + </div>; + + const content = this._renderContent(); + + return ( + <Layout> + <Header hidden={ true } style={ 'defaultDark' } /> + <Container> + <div className="support"> + <div className="support__close" onClick={ this.props.onClose }> + <img className="support__close-icon" src="./assets/images/icon-back.svg" /> + <span className="support__close-title">Settings</span> + </div> + <div className="support__container"> + + { header } + + { content } + + </div> + </div> + </Container> + </Layout> + ); + } + + _renderContent() { + switch(this.state.sendState) { + case 'INITIAL': + return this._renderForm(); + case 'LOADING': + return this._renderLoading(); + case 'SUCCESS': + return this._renderSent(); + case 'FAILED': + return this._renderFailed(); + default: + return null; + } + } + + _renderForm() { + return <div className="support__content"> + <div className="support__form"> + <div className="support__form-row"> + <input className="support__form-email" + type="email" + placeholder="Your email" + value={ this.state.email } + onChange={ this.onChangeEmail } + autoFocus={ true } /> + </div> + <div className="support__form-row support__form-row-message"> + <div className="support__form-message-scroll-wrap"> + <textarea className="support__form-message" + placeholder="Describe your problem" + value={ this.state.message } + onChange={ this.onChangeDescription } /> + </div> + </div> + <div className="support__footer"> + <button type="button" + className="support__form-view-logs button button--primary" + onClick={ this.onViewLog }> + <span className="button-label">View app logs</span> + <ExternalLinkSVG className="button-icon button-icon--16" /> + </button> + <button type="button" + className="support__form-send button button--positive" + disabled={ !this.validate() } + onClick={ this.onSend }>Send</button> + </div> + </div> + </div>; + } + + _renderLoading() { + return <div className="support__content"> + + <div className="support__form"> + <div className="support__form-row"> + <div className="support__status-icon"> + <img src="./assets/images/icon-spinner.svg" alt="" /> + </div> + <div className="support__status-security--secure"> + Secure Connection + </div> + <div className="support__send-status"> + <span>Sending...</span> + </div> + </div> + </div> + </div>; + } + + _renderSent() { + return <div className="support__content"> + <div className="support__form"> + <div className="support__form-row"> + <div className="support__status-icon"> + <img src="./assets/images/icon-success.svg" alt="" /> + </div> + <div className="support__status-security--secure"> + Secure Connection + </div> + <div className="support__send-status"> + <span>Sent</span> + </div> + <div className="support__subtitle"> + Thanks! We will look into this. If needed we will contact you on {'\u00A0'} + <div className="support__sent-email">{ this.state.email }</div> + </div> + </div> + </div> + </div>; + } + + _renderFailed() { + return <div className="support__content"> + <div className="support__form"> + <div className="support__form-row"> + <div className="support__status-icon"> + <img src="./assets/images/icon-fail.svg" alt="" /> + </div> + <div className="support__status-security--secure"> + Secure Connection + </div> + <div className="support__send-status"> + <span>Failed to send</span> + </div> + </div> + </div> + <div className="support__footer"> + <button type="button" + className="support__form-view-logs button button--primary" + onClick={ () => this.setState({ sendState: 'INITIAL' }) }> + <span className="button-label">Edit message</span> + </button> + <button type="button" + className="support__form-send button button--positive" + onClick={ this.onSend }>Try again</button> + </div> + </div>; + } +} diff --git a/app/components/Switch.css b/app/components/Switch.css new file mode 100644 index 0000000000..aaa3821c34 --- /dev/null +++ b/app/components/Switch.css @@ -0,0 +1,44 @@ +.switch { + display: block; + position: relative; + -webkit-appearance: none; + border-radius: 16px; + width: 52px; + height: 32px; + border: 2px solid white; + background-color: transparent; + transition: 300ms ease-in-out all; +} + +.switch:checked { + text-align: right; +} + +.switch::after { + position: absolute; + left: 2px; + top: 2px; + display: block; + content: ''; + width: 24px; + height: 24px; + border-radius: 24px; + background-color: #D0021B; + transition: 200ms ease-in-out all; + transform: translate3d(0, 0, 0); +} + +.switch:active::after { + width: 28px; +} + +.switch:active:checked::after { + transform: translate3d(0, 0, 0); + left: 18px; +} + +.switch:checked::after { + background-color: #44AD4D; + transform: translate3d(0, 0, 0); + left: 22px; +}
\ No newline at end of file diff --git a/app/components/Switch.js b/app/components/Switch.js new file mode 100644 index 0000000000..f0ad3b41bc --- /dev/null +++ b/app/components/Switch.js @@ -0,0 +1,142 @@ +// @flow +import React, { Component } from 'react'; + +import type { Point2d } from '../types'; + +const CLICK_TIMEOUT = 1000; +const MOVE_THRESHOLD = 10; + +export type SwitchProps = { + isOn: boolean; + onChange: ?((isOn: boolean) => void); +}; + +export default class Switch extends Component { + props: SwitchProps; + static defaultProps: SwitchProps = { + isOn: false, + onChange: null + } + + isCapturingMouseEvents = false; + ref: ?HTMLInputElement; + onRef = (e: HTMLInputElement) => this.ref = e; + + state = { + ignoreChange: false, + initialPos: ({x: 0, y: 0}: Point2d), + startTime: (null: ?number) + } + + handleMouseDown = (e: MouseEvent) => { + const { clientX: x, clientY: y } = e; + this.startCapturingMouseEvents(); + this.setState({ + initialPos: { x, y }, + startTime: e.timeStamp + }); + } + + handleMouseMove = (e: MouseEvent) => { + const inputElement = this.ref; + const { x: x0 } = this.state.initialPos; + const { clientX: x, clientY: y } = e; + const dx = Math.abs(x0 - x); + + if(dx < MOVE_THRESHOLD) { + return; + } + + const isOn = !!this.props.isOn; + let nextOn = isOn; + + if(x < x0 && isOn) { + nextOn = false; + } else if(x > x0 && !isOn) { + nextOn = true; + } + + if(isOn !== nextOn) { + this.setState({ + initialPos: { x, y }, + ignoreChange: true + }); + + if(inputElement) { + inputElement.checked = nextOn; + } + + this.notify(nextOn); + } + } + + handleMouseUp = () => { + this.stopCapturingMouseEvents(); + } + + handleChange = (e: Event) => { + const startTime = this.state.startTime; + const eventTarget: Object = e.target; + + if(typeof(startTime) !== 'number') { + throw new Error('startTime must be a number.'); + } + + const dt = e.timeStamp - startTime; + + if(this.state.ignoreChange) { + this.setState({ ignoreChange: false }); + e.preventDefault(); + } else if(dt > CLICK_TIMEOUT) { + e.preventDefault(); + } else { + this.notify(eventTarget.checked); + } + } + + notify(isOn: boolean) { + const onChange = this.props.onChange; + if(onChange) { + onChange(isOn); + } + } + + startCapturingMouseEvents() { + if(this.isCapturingMouseEvents) { + throw new Error('startCapturingMouseEvents() is called out of order.'); + } + document.addEventListener('mousemove', this.handleMouseMove); + document.addEventListener('mouseup', this.handleMouseUp); + this.isCapturingMouseEvents = true; + } + + stopCapturingMouseEvents() { + if(!this.isCapturingMouseEvents) { + throw new Error('stopCapturingMouseEvents() is called out of order.'); + } + document.removeEventListener('mousemove', this.handleMouseMove); + document.removeEventListener('mouseup', this.handleMouseUp); + this.isCapturingMouseEvents = false; + } + + componentWillUnmount() { + // guard from abrupt programmatic unmount + if(this.isCapturingMouseEvents) { + this.stopCapturingMouseEvents(); + } + } + + render(): React.Element<*> { + const { isOn, onChange, ...otherProps } = this.props; // eslint-disable-line no-unused-vars + let className = ('switch' + ' ' + (otherProps.className || '')).trim(); + return ( + <input { ...otherProps } + type="checkbox" + ref={ this.onRef } + className={ className } + checked={ isOn } + onMouseDown={ this.handleMouseDown } + onChange={ this.handleChange } /> + ); + } +} diff --git a/app/components/WindowChrome.css b/app/components/WindowChrome.css new file mode 100644 index 0000000000..2c6b820a40 --- /dev/null +++ b/app/components/WindowChrome.css @@ -0,0 +1,13 @@ +/* macOS app runs as menubar; create an app chrome with arrow using mask */ +.window-chrome--darwin { + -webkit-mask: + url(../assets/images/app-triangle.svg) 50% 0% no-repeat, + url(../assets/images/app-header-backdrop.svg) no-repeat; +} + +.window-chrome { + flex: 1 1 auto; + height: 100%; + width: 100%; + display: flex; +}
\ No newline at end of file diff --git a/app/components/WindowChrome.js b/app/components/WindowChrome.js new file mode 100644 index 0000000000..d7094813db --- /dev/null +++ b/app/components/WindowChrome.js @@ -0,0 +1,16 @@ +// @flow +import React, { Component } from 'react'; + +export default class WindowChrome extends Component { + props: { + children: Array<React.Element<*>> | React.Element<*> + } + render(): React.Element<*> { + const chromeClass = ['window-chrome', 'window-chrome--' + process.platform]; + return ( + <div className={ chromeClass.join(' ') }> + { this.props.children } + </div> + ); + } +}
\ No newline at end of file |