diff --git a/src/js/components/modal/ConfirmAddress.js b/src/js/components/modal/ConfirmAddress.js index 4ad9e89e..8c37cc01 100644 --- a/src/js/components/modal/ConfirmAddress.js +++ b/src/js/components/modal/ConfirmAddress.js @@ -1,7 +1,7 @@ /* @flow */ 'use strict'; -import React from 'react'; +import React, { Component } from 'react'; import { findAccount } from '../../reducers/AccountsReducer'; import { findSelectedDevice } from '../../reducers/TrezorConnectReducer'; @@ -29,61 +29,80 @@ const ConfirmAddress = (props: Props) => { } export default ConfirmAddress; -export const ConfirmUnverifiedAddress = (props: Props) => { +export class ConfirmUnverifiedAddress extends Component { - if (!props.modal.opened) return null; - const { - device - } = props.modal; + keyboardHandler: (event: KeyboardEvent) => void; - const { accounts, abstractAccount } = props; + keyboardHandler(event: KeyboardEvent): void { + if (event.keyCode === 13) { + event.preventDefault(); + this.verifyAddress(); + } + } - const { - onCancel - } = props.modalActions; + componentDidMount(): void { + this.keyboardHandler = this.keyboardHandler.bind(this); + window.addEventListener('keydown', this.keyboardHandler, false); + } - const { - showUnverifiedAddress, - showAddress - } = props.receiveActions; + componentWillUnmount(): void { + window.removeEventListener('keydown', this.keyboardHandler, false); + } - if(!abstractAccount) return null; + verifyAddress() { + if (!this.props.modal.opened) return; + + const { + accounts, + abstractAccount + } = this.props; + + if(!abstractAccount) return null; + const account = findAccount(accounts, abstractAccount.index, abstractAccount.deviceState, abstractAccount.network); + if (!account) return null; + + this.props.modalActions.onCancel(); + this.props.receiveActions.showAddress(account.addressPath); + + } + + showUnverifiedAddress() { + if (!this.props.modal.opened) return; + + this.props.modalActions.onCancel(); + this.props.receiveActions.showUnverifiedAddress(); + } + + render() { + if (!this.props.modal.opened) return null; + const { + device + } = this.props.modal; + + const { + onCancel + } = this.props.modalActions; + + let deviceStatus: string; + let claim: string; + + if (!device.connected) { + deviceStatus = `${ device.label } is not connected`; + claim = 'Please connect your device' + } else { + // corner-case where device is connected but it is unavailable because it was created with different "passphrase_protection" settings + const enable: string = device.features && device.features.passphrase_protection ? 'enable' : 'disable'; + deviceStatus = `${ device.label } is unavailable`; + claim = `Please ${ enable } passphrase settings`; + } - const account = findAccount(accounts, abstractAccount.index, abstractAccount.deviceState, abstractAccount.network); - if (!account) return null; - - if (!device.connected) { return (
-

{ device.label } is not connected

-

To prevent phishing attacks, you should verify the address on your TREZOR first. Please reconnect your device to continue with the verification process.

- - -
- ); - } else { - // corner-case where device is connected but it is unavailable because it was created with different "passphrase_protection" settings - const enable: string = device.features && device.features.passphrase_protection ? 'Enable' : 'Disable'; - return ( -
- -

{ device.label } is unavailable

-

To prevent phishing attacks, you should verify the address on your TREZOR first. { enable } passphrase settings to continue with the verification process.

- - +

{ deviceStatus }

+

To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.

+ +
); } diff --git a/src/js/components/modal/DuplicateDevice.js b/src/js/components/modal/DuplicateDevice.js index 15bbd345..91ed933a 100644 --- a/src/js/components/modal/DuplicateDevice.js +++ b/src/js/components/modal/DuplicateDevice.js @@ -12,6 +12,7 @@ type State = { export default class DuplicateDevice extends Component { + keyboardHandler: (event: KeyboardEvent) => void; state: State; constructor(props: Props) { @@ -28,12 +29,34 @@ export default class DuplicateDevice extends Component { } } + keyboardHandler(event: KeyboardEvent): void { + if (event.keyCode === 13) { + event.preventDefault(); + this.submit(); + } + } + + componentDidMount(): void { + this.keyboardHandler = this.keyboardHandler.bind(this); + window.addEventListener('keydown', this.keyboardHandler, false); + } + + componentWillUnmount(): void { + window.removeEventListener('keydown', this.keyboardHandler, false); + } + onNameChange = (value: string): void => { this.setState({ instanceName: value.length > 0 ? value : null }); } + submit() { + if (this.props.modal.opened) { + this.props.modalActions.onDuplicateDevice( { ...this.props.modal.device, instanceName: this.state.instanceName } ); + } + } + render() { if (!this.props.modal.opened) return null; @@ -55,7 +78,7 @@ export default class DuplicateDevice extends Component { placeholder={ this.state.defaultName } onChange={ event => this.onNameChange(event.currentTarget.value) } defaultValue={ this.state.instanceName } /> - + ); diff --git a/src/js/components/modal/RememberDevice.js b/src/js/components/modal/RememberDevice.js index ca55af92..eb2596c2 100644 --- a/src/js/components/modal/RememberDevice.js +++ b/src/js/components/modal/RememberDevice.js @@ -13,6 +13,7 @@ type State = { export default class RememberDevice extends Component { + keyboardHandler: (event: KeyboardEvent) => void; state: State; constructor(props: Props) { @@ -21,9 +22,13 @@ export default class RememberDevice extends Component { this.state = { countdown: 10, } - // this.setState({ - // countdown: 10 - // }); + } + + keyboardHandler(event: KeyboardEvent): void { + if (event.keyCode === 13) { + event.preventDefault(); + this.forget(); + } } componentDidMount(): void { @@ -48,19 +53,23 @@ export default class RememberDevice extends Component { ticker: window.setInterval(ticker, 1000) }); - - - //this.keyboardHandler = this.keyboardHandler.bind(this); - //window.addEventListener('keydown', this.keyboardHandler, false); + this.keyboardHandler = this.keyboardHandler.bind(this); + window.addEventListener('keydown', this.keyboardHandler, false); } componentWillUnmount(): void { - //window.removeEventListener('keydown', this.keyboardHandler, false); + window.removeEventListener('keydown', this.keyboardHandler, false); if (this.state.ticker) { window.clearInterval(this.state.ticker); } } + forget() { + if (this.props.modal.opened) { + this.props.modalActions.onForgetDevice(this.props.modal.device); + } + } + render() { if (!this.props.modal.opened) return null; const { device, instances } = this.props.modal; @@ -81,23 +90,50 @@ export default class RememberDevice extends Component {

Forget {label}?

Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?

- +
); } } -export const ForgetDevice = (props: Props) => { - if (!props.modal.opened) return null; - const { device } = props.modal; - const { onForgetSingleDevice, onCancel } = props.modalActions; - return ( -
-

Forget { device.instanceLabel } ?

-

Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again.

- - -
- ); +export class ForgetDevice extends Component { + + keyboardHandler: (event: KeyboardEvent) => void; + + keyboardHandler(event: KeyboardEvent): void { + if (event.keyCode === 13) { + event.preventDefault(); + this.forget(); + } + } + + componentDidMount(): void { + this.keyboardHandler = this.keyboardHandler.bind(this); + window.addEventListener('keydown', this.keyboardHandler, false); + } + + componentWillUnmount(): void { + window.removeEventListener('keydown', this.keyboardHandler, false); + } + + forget() { + if (this.props.modal.opened) { + this.props.modalActions.onForgetSingleDevice(this.props.modal.device); + } + } + + render() { + if (!this.props.modal.opened) return null; + const { device } = this.props.modal; + const { onCancel } = this.props.modalActions; + return ( +
+

Forget { device.instanceLabel } ?

+

Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again.

+ + +
+ ); + } }