modals onKeyboard enter actions

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<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 { 
+            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 (
-            <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>
         );
     }

src/js/components/modal/DuplicateDevice.js

@@ -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>
         );

src/js/components/modal/RememberDevice.js

@@ -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>
+        );
+    }
 }