arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

modals onKeyboard enter actions

Browse Source
This commit is contained in:
Szymon Lesisz 2018-05-15 19:03:27 +02:00
parent 27ca8ed37a
commit cefddd98b8
3 changed files with 147 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/js/components/modal/ConfirmAddress.js
View File

@ -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<Props> {
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 account = findAccount(accounts, abstractAccount.index, abstractAccount.deviceState, abstractAccount.network);
if (!account) return null;
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`;
}
if (!device.connected) {
return (
<div className="confirm-address-unverified">
<button className="close-modal transparent" onClick={ onCancel }></button>
<h3>{ device.label } is not connected</h3>
<p>To prevent phishing attacks, you should verify the address on your TREZOR first. Please reconnect your device to continue with the verification process.</p>
<button onClick={ event => {
onCancel();
showAddress(account.addressPath);
} }>Try again</button>
<button className="white" onClick={ event => {
onCancel();
showUnverifiedAddress();
} }>Show unverified address</button>
</div>
);
} 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 (
<div className="confirm-address-unverified">
<button className="close-modal transparent" onClick={ onCancel }></button>
<h3>{ device.label } is unavailable</h3>
<p>To prevent phishing attacks, you should verify the address on your TREZOR first. { enable } passphrase settings to continue with the verification process.</p>
<button onClick={ event => {
onCancel();
showAddress(account.addressPath);
} }>Try again</button>
<button className="white" onClick={ event => {
onCancel();
showUnverifiedAddress();
} }>Show unverified address</button>
<h3>{ deviceStatus }</h3>
<p>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</p>
<button onClick={ event => this.verifyAddress() }>Try again</button>
<button className="white" onClick={ event => this.showUnverifiedAddress() }>Show unverified address</button>
</div>
);
}

25
src/js/components/modal/DuplicateDevice.js
View File

@ -12,6 +12,7 @@ type State = {
export default class DuplicateDevice extends Component<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
state: State;
constructor(props: Props) {
@ -28,12 +29,34 @@ export default class DuplicateDevice extends Component<Props, State> {
}
}
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<Props, State> {
placeholder={ this.state.defaultName }
onChange={ event => this.onNameChange(event.currentTarget.value) }
defaultValue={ this.state.instanceName } />
<button onClick={ event => onDuplicateDevice( { ...device, instanceName: this.state.instanceName } ) }>Create new instance</button>
<button onClick={ event => this.submit() }>Create new instance</button>
<button className="white" onClick={ onCancel }>Cancel</button>
</div>
);

78
src/js/components/modal/RememberDevice.js
View File

@ -13,6 +13,7 @@ type State = {
export default class RememberDevice extends Component<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
state: State;
constructor(props: Props) {
@ -21,9 +22,13 @@ export default class RememberDevice extends Component<Props, State> {
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<Props, State> {
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<Props, State> {
<div className="remember">
<h3>Forget {label}?</h3>
<p>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</p>
<button onClick={ event => onForgetDevice(device) }>Forget</button>
<button onClick={ event => this.forget() }>Forget</button>
<button className="white" onClick={ event => onRememberDevice(device) }><span>Remember <Loader size="28" label={ this.state.countdown.toString() } /></span></button>
</div>
);
}
}
export const ForgetDevice = (props: Props) => {
if (!props.modal.opened) return null;
const { device } = props.modal;
const { onForgetSingleDevice, onCancel } = props.modalActions;
return (
<div className="remember">
<h3>Forget { device.instanceLabel } ?</h3>
<p>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.</p>
<button onClick={ (event) => onForgetSingleDevice(device) }>Forget</button>
<button className="white" onClick={ onCancel }>Don't forget</button>
</div>
);
export class ForgetDevice extends Component<Props> {
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 (
<div className="remember">
<h3>Forget { device.instanceLabel } ?</h3>
<p>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.</p>
<button onClick={ event => this.forget() }>Forget</button>
<button className="white" onClick={ onCancel }>Don't forget</button>
</div>
);
}
}