Startup improvements

app/actions/TrezorActions.js

@@ -59,6 +59,13 @@ export const enableTrezor = () => (dispatch, getState) => {
   }
 };
 
+export const TRZ_CLEAR_DEVICELIST = "TRZ_CLEAR_DEVICELIST";
+
+export const reloadTrezorDeviceList = () => (dispatch) => {
+  dispatch({ type: TRZ_CLEAR_DEVICELIST });
+  dispatch(loadDeviceList());
+};
+
 export const TRZ_LOADDEVICELIST_ATTEMPT = "TRZ_LOADDEVICELIST_ATTEMPT";
 export const TRZ_LOADDEVICELIST_FAILED = "TRZ_LOADDEVICELIST_FAILED";
 export const TRZ_LOADDEVICELIST_SUCCESS = "TRZ_LOADDEVICELIST_SUCCESS";
@@ -189,7 +196,7 @@ async function deviceRun(dispatch, getState, device, fn) {
 
   const handleError = error => {
     const { trezor: { waitingForPin, waitingForPassphrase } } = getState();
-    console.log("Handle error no deviceRun");
+    console.log("Handle error no deviceRun", error);
     if (waitingForPin) dispatch({ error, type: TRZ_PIN_CANCELED });
     if (waitingForPassphrase) dispatch({ error, type: TRZ_PASSPHRASE_CANCELED });
     if (error instanceof Error) {

app/components/modals/trezor/PinModal.js

@@ -4,6 +4,8 @@ import { PasswordInput } from "inputs";
 import { ButtonsToolbar } from "../PassphraseModal";
 import { InvisibleButton } from "buttons";
 
+const PIN_LABELS = "ABCDEFGHI";
+
 const PinButton = ({ index, label, onClick }) =>
   <div className="pin-pad-button" onClick={() => onClick(index)}>{label}</div>;
 
@@ -31,14 +33,24 @@ class PinModal extends React.Component {
     this.setState({ currentPin: "" });
   }
 
+  onChangeCurrentPin(e) {
+    const txt = (e.target.value || "").toUpperCase().trim();
+    let pin = "";
+    for (let i = 0; i < txt.length; i++) {
+      const idx = PIN_LABELS.indexOf(txt[i]);
+      if (idx > -1) pin = pin + "" + (idx+1);
+    }
+    this.setState({ currentPin: pin });
+  }
+
   render() {
-    const { onCancelModal, onSubmit, onPinButtonClick, onClearPin } = this;
+    const { onCancelModal, onSubmit, onPinButtonClick, onClearPin,
+      onChangeCurrentPin } = this;
 
-    const labels = "ABCDEFGHI";
-    const currentPin = this.state.currentPin.split("").map(v => labels[parseInt(v)-1]).join("");
+    const currentPin = this.state.currentPin.split("").map(v => PIN_LABELS[parseInt(v)-1]).join("");
 
     const Button = ({ index }) =>
-      <PinButton label={labels[index-1]} index={index} onClick={onPinButtonClick} />;
+      <PinButton label={PIN_LABELS[index-1]} index={index} onClick={onPinButtonClick} />;
 
     const trezorLabel = this.props.device ? this.props.device.features.label : "";
     const className = [
@@ -69,7 +81,7 @@ class PinModal extends React.Component {
           </InvisibleButton>
         </div>
         <div className="password-field">
-          <PasswordInput value={currentPin} />
+          <PasswordInput value={currentPin} onChange={onChangeCurrentPin} />
         </div>
         <ButtonsToolbar {... { onCancelModal, onSubmit }} />
       </Modal>

app/components/views/GetStartedPage/TrezorConfig/index.js

@@ -1,7 +1,8 @@
 import { trezor } from "connectors";
 import { FormattedMessage as T } from "react-intl";
-import Form from "./Form";
+import ConfigSections from "views/TrezorPage/ConfigSections";
 import Page from "./Page";
+import { InvisibleButton } from "buttons";
 import "style/Trezor.less";
 
 @autobind
@@ -12,75 +13,26 @@ class TrezorConfig extends React.Component {
     props.enableTrezor();
   }
 
-  onTogglePinProtection() {
-    this.props.togglePinProtection();
-  }
-
-  onTogglePassPhraseProtection() {
-    this.props.togglePassPhraseProtection();
-  }
-
-  onChangeHomeScreen() {
-    this.props.changeToDecredHomeScreen();
-  }
-
-  onChangeLabel(newLabel) {
-    this.props.changeLabel(newLabel);
-  }
-
-  onWipeDevice() {
-    this.props.wipeDevice();
-  }
-
-  onRecoverDevice() {
-    this.props.recoverDevice();
-  }
-
-  onInitDevice() {
-    this.props.initDevice();
-  }
-
-  onUpdateFirmware(path) {
-    this.props.updateFirmware(path);
+  renderNoDevice() {
+    return <>
+      <div><T id="trezor.getStartedConfig.noDeviceFound" m="No trezor device found. Check the connection and the trezor bridge software."/></div>
+      <div>
+        <InvisibleButton onClick={this.props.reloadDeviceList}>
+          <T id="trezor.getStartedConfig.btnReloadDeviceList" m="Reload Device List"/>
+        </InvisibleButton>
+      </div>
+    </>;
   }
 
   render() {
     const { device } = this.props;
     let children;
 
     if (!device) {
-      children = (<div><T id="trezor.getStartedConfig.noDeviceFound" m="No trezor device found. Check the connection and the trezor bridge software."/></div>);
+      children = this.renderNoDevice();
     } else {
       const loading = this.props.performingOperation;
-
-      const {
-        onTogglePinProtection,
-        onTogglePassPhraseProtection,
-        onChangeHomeScreen,
-        onChangeLabel,
-        onWipeDevice,
-        onRecoverDevice,
-        onInitDevice,
-        onUpdateFirmware,
-      } = this;
-
-      children = (
-        <Form
-          {...this.props}
-          {...this.state}
-          {...{
-            loading,
-            onTogglePinProtection,
-            onTogglePassPhraseProtection,
-            onChangeHomeScreen,
-            onChangeLabel,
-            onWipeDevice,
-            onRecoverDevice,
-            onInitDevice,
-            onUpdateFirmware,
-          }}
-        />
-      );
+      children = <ConfigSections device={device} loading={loading} { ...this.props } />;
     }
 
     return (

app/components/views/TrezorPage/ConfigButtons.js

@@ -17,7 +17,7 @@ class ConfigButtons extends React.Component {
     );
 
     const { loading, onTogglePinProtection, onTogglePassPhraseProtection,
-      onChangeHomeScreen } = this.props;
+      onChangeHomeScreen, onClearDeviceSession } = this.props;
 
     return (
       <VerticalAccordion
@@ -36,6 +36,10 @@ class ConfigButtons extends React.Component {
         <KeyBlueButton onClick={onChangeHomeScreen} loading={loading} disabled={loading}>
           <T id="trezorPage.changeHomeScreen" m="Change Home Screen" />
         </KeyBlueButton>
+
+        <KeyBlueButton onClick={onClearDeviceSession} loading={loading} disabled={loading}>
+          <T id="trezorPage.clearSession" m="Clear Session" />
+        </KeyBlueButton>
       </VerticalAccordion>
 
     );

app/components/views/TrezorPage/ConfigSections.js

@@ -0,0 +1,83 @@
+import ChangeLabel from "./ChangeLabel";
+import ConfigButtons from "./ConfigButtons";
+import RecoveryButtons from "./RecoveryButtons";
+import FirmwareUpdate from "./FirmwareUpdate";
+
+@autobind
+class TrezorConfigSections extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  onTogglePinProtection() {
+    this.props.togglePinProtection();
+  }
+
+  onTogglePassPhraseProtection() {
+    this.props.togglePassPhraseProtection();
+  }
+
+  onChangeHomeScreen() {
+    this.props.changeToDecredHomeScreen();
+  }
+
+  onChangeLabel(newLabel) {
+    this.props.changeLabel(newLabel);
+  }
+
+  onWipeDevice() {
+    this.props.wipeDevice();
+  }
+
+  onRecoverDevice() {
+    this.props.recoverDevice();
+  }
+
+  onUpdateFirmware(path) {
+    this.props.updateFirmware(path);
+  }
+
+  onInitDevice() {
+    this.props.initDevice();
+  }
+
+  onReloadDeviceList() {
+    this.props.reloadDeviceList();
+  }
+
+  onClearDeviceSession() {
+    this.props.clearDeviceSession();
+  }
+
+  render() {
+    const {
+      onTogglePinProtection,
+      onTogglePassPhraseProtection,
+      onChangeHomeScreen,
+      onChangeLabel,
+      onWipeDevice,
+      onRecoverDevice,
+      onInitDevice,
+      onUpdateFirmware,
+      onClearDeviceSession,
+      loading,
+    } = this;
+
+    return (
+      <>
+        <ConfigButtons {...{ onTogglePinProtection, onTogglePassPhraseProtection,
+          onChangeHomeScreen, onClearDeviceSession, loading }}  />
+
+        <ChangeLabel {...{ onChangeLabel, loading }} />
+
+        <RecoveryButtons {...{ onWipeDevice, onRecoverDevice, onInitDevice, loading }} />
+
+        <FirmwareUpdate {...{ onUpdateFirmware, loading }} />
+      </>
+    );
+  }
+
+}
+
+export default TrezorConfigSections;

app/components/views/TrezorPage/NoDevicePage.js

@@ -1,11 +1,17 @@
 import { FormattedMessage as T } from "react-intl";
 import Header from "./Header";
 import { StandalonePage } from "layout";
+import { InvisibleButton } from "buttons";
 
-export default () => (
+export default ({ onReloadDeviceList }) => (
   <StandalonePage header={<Header />}>
     <div>
       <T id="trezor.noDevice.message" m="No trezor device detected. Connect the device and check if trezor bridge is installed and running." />
     </div>
+    <div>
+      <InvisibleButton onClick={onReloadDeviceList}>
+        <T id="trezor.noDevice.btnReloadDeviceList" m="Reload Device List"/>
+      </InvisibleButton>
+    </div>
   </StandalonePage>
 );

app/components/views/TrezorPage/Page.js

@@ -1,23 +1,9 @@
 import { StandalonePage } from "layout";
+import ConfigSections from "./ConfigSections";
 import Header from "./Header";
-import ChangeLabel from "./ChangeLabel";
-import ConfigButtons from "./ConfigButtons";
-import RecoveryButtons from "./RecoveryButtons";
-import FirmwareUpdate from "./FirmwareUpdate";
 
-export default ({
-  onTogglePinProtection, onTogglePassPhraseProtection, onChangeHomeScreen,
-  onChangeLabel, onWipeDevice, onRecoverDevice, onInitDevice, onUpdateFirmware,
-  loading,
-}) => (
+export default props => (
   <StandalonePage header={<Header />}>
-    <ConfigButtons {...{ onTogglePinProtection, onTogglePassPhraseProtection,
-      onChangeHomeScreen, loading }}  />
-
-    <ChangeLabel {...{ onChangeLabel, loading }} />
-
-    <RecoveryButtons {...{ onWipeDevice, onRecoverDevice, onInitDevice, loading }} />
-
-    <FirmwareUpdate {...{ onUpdateFirmware }} />
+    <ConfigSections { ...props } />
   </StandalonePage>
 );