trezor-wallet/src/js/components/modal/Pin.js

/* @flow */
'use strict';

import React, { Component } from 'react';

import type { Props } from './index';
type State = {
    pin: string;
}

export default class Pin extends Component<Props, State> {

    keyboardHandler: (event: KeyboardEvent) => void;
    state: State;

    constructor(props: Props) {
        super(props);

        this.state = {
            pin: '',
        }
    }

    onPinAdd = (input: number): void => {
        let pin: string = this.state.pin;
        if (pin.length < 9) {
            pin += input;
            this.setState({
                pin: pin
            });
        }
    }

    onPinBackspace = (): void => {
        this.setState({
            pin: this.state.pin.substring(0, this.state.pin.length - 1),
        });
    }

    keyboardHandler(event: KeyboardEvent): void {
        const { onPinSubmit } = this.props.modalActions;
        const { pin } = this.state;

        event.preventDefault();
        switch (event.keyCode) {
            case 13 :
                // enter,
                onPinSubmit(pin);
                break;
            // backspace
            case 8 :
                this.onPinBackspace();
                break;
    
            // numeric and numpad
            case 49 :
            case 97 :
                this.onPinAdd(1);
                break;
            case 50 :
            case 98 :
                this.onPinAdd(2);
                break;
            case 51 :
            case 99 :
                this.onPinAdd(3);
                break;
            case 52 :
            case 100 :
                this.onPinAdd(4);
                break;
            case 53 :
            case 101 :
                this.onPinAdd(5);
                break;
            case 54 :
            case 102 :
                this.onPinAdd(6);
                break;
            case 55 :
            case 103 :
                this.onPinAdd(7);
                break;
            case 56 :
            case 104 :
                this.onPinAdd(8);
                break;
            case 57 :
            case 105 :
                this.onPinAdd(9);
                break;
        }
    }

    

    componentWillMount(): void {
        this.keyboardHandler = this.keyboardHandler.bind(this);
        window.addEventListener('keydown', this.keyboardHandler, false);
    }

    componentWillUnmount(): void {
        window.removeEventListener('keydown', this.keyboardHandler, false);
    }

    render(): any {

        if (!this.props.modal.opened) return null;

        const { onPinSubmit } = this.props.modalActions;
        const { device } = this.props.modal;
        const { pin } = this.state;
        
        return (
            <div className="pin">
                {/* <button className="close-modal transparent"></button> */}
                <h3>Enter { device.label } PIN</h3>
                <p>The PIN layout is displayed on your TREZOR.</p>

                <div className="pin-input-row">
                    <input type="password" autoComplete="off" maxLength="9" disabled value={pin} />
                    <button type="button" className="pin-backspace transparent" onClick={ event => this.onPinBackspace() }></button>
                </div>

                <div className="pin-row">
                    <button type="button" data-value="7" onClick={ event => this.onPinAdd(7) }>&#8226;</button>
                    <button type="button" data-value="8" onClick={ event => this.onPinAdd(8) }>&#8226;</button>
                    <button type="button" data-value="9" onClick={ event => this.onPinAdd(9) }>&#8226;</button>
                </div>
                <div className="pin-row">
                    <button type="button" data-value="4" onClick={ event => this.onPinAdd(4) }>&#8226;</button>
                    <button type="button" data-value="5" onClick={ event => this.onPinAdd(5) }>&#8226;</button>
                    <button type="button" data-value="6" onClick={ event => this.onPinAdd(6) }>&#8226;</button>
                </div>
                <div className="pin-row">
                    <button type="button" data-value="1" onClick={ event => this.onPinAdd(1) }>&#8226;</button>
                    <button type="button" data-value="2" onClick={ event => this.onPinAdd(2) }>&#8226;</button>
                    <button type="button" data-value="3" onClick={ event => this.onPinAdd(3) }>&#8226;</button>
                </div>
                
                <div><button className="submit" type="button" onClick={ event => onPinSubmit(pin) }>Enter PIN</button></div>
                <p>Not sure how PIN works? <a className="green" href="http://doc.satoshilabs.com/trezor-user/enteringyourpin.html" target="_blank" rel="noreferrer noopener">Learn more</a></p>
            </div>
        );
    }
}