Implement Import Account Screen

1 files changed, 185 insertions, 0 deletions

diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
new file mode 100644
index 000000000..17be90c2a
--- /dev/null
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -0,0 +1,185 @@
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import {importNewAccount} from '../../../../ui/app/actions'
+import {connect} from 'react-redux';
+
+const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => (
+  <div className="import-account__input-wrapper">
+    <div className="import-account__input-label">{label}</div>
+    <input
+      type={type}
+      placeholder={placeholder}
+      className={classnames('first-time-flow__input import-account__input', {
+        'first-time-flow__input--error': errorMessage
+      })}
+      onChange={onChange}
+    />
+    <div className="import-account__input-error-message">{errorMessage}</div>
+  </div>
+)
+
+class ImportAccountScreen extends Component {
+  static OPTIONS = {
+    PRIVATE_KEY: 'private_key',
+    JSON_FILE: 'json_file',
+  };
+
+  static propTypes = {
+    warning: PropTypes.string,
+    back: PropTypes.func.isRequired,
+    next: PropTypes.func.isRequired,
+    importNewAccount: PropTypes.func.isRequired,
+  };
+
+  state = {
+    selectedOption: ImportAccountScreen.OPTIONS.PRIVATE_KEY,
+    privateKey: '',
+    jsonFile: {},
+  }
+
+  isValid() {
+    const { OPTIONS } = ImportAccountScreen;
+    const { privateKey, jsonFile, password } = this.state;
+
+    switch (this.state.selectedOption) {
+      case OPTIONS.JSON_FILE:
+        return Boolean(jsonFile && password)
+      case OPTIONS.PRIVATE_KEY:
+      default:
+        return Boolean(privateKey)
+    }
+  }
+
+  onClick = () => {
+    const { OPTIONS } = ImportAccountScreen;
+    const { importNewAccount, next } = this.props;
+    const { privateKey, jsonFile, password } = this.state;
+
+    switch (this.state.selectedOption) {
+      case OPTIONS.JSON_FILE:
+        return importNewAccount('JSON File', [ jsonFile, password ])
+          .then(next)
+      case OPTIONS.PRIVATE_KEY:
+      default:
+        return importNewAccount('Private Key', [ privateKey ])
+          .then(next)
+    }
+  }
+
+  renderPrivateKey() {
+    return Input({
+      label: 'Add Private Key String',
+      placeholder: 'Enter private key',
+      onChange: e => this.setState({ privateKey: e.target.value }),
+      errorMessage: this.props.warning && 'Something went wrong. Please make sure your private key is correct.'
+    })
+  }
+
+  renderJsonFile() {
+    const { jsonFile: { name } } = this.state;
+    const { warning } = this.props;
+
+    return (
+      <div className="">
+        <div className="import-account__input-wrapper">
+          <div className="import-account__input-label">Upload File</div>
+          <div className="import-account__file-picker-wrapper">
+            <input
+              type="file"
+              id="file"
+              className="import-account__file-input"
+              onChange={e => this.setState({ jsonFile: e.target.files[0] })}
+            />
+            <label
+              htmlFor="file"
+              className={classnames('import-account__file-input-label', {
+                'import-account__file-input-label--error': warning
+              })}
+            >
+              Choose File
+            </label>
+            <div className="import-account__file-name">{name}</div>
+          </div>
+          <div className="import-account__input-error-message">
+            {warning && 'Something went wrong. Please make sure your JSON file is properly formatted.'}
+          </div>
+        </div>
+        {Input({
+          label: 'Enter Password',
+          placeholder: 'Enter Password',
+          type: 'password',
+          onChange: e => this.setState({ password: e.target.value }),
+          errorMessage: warning && 'Please make sure your password is correct.'
+        })}
+      </div>
+    )
+  }
+
+  renderContent() {
+    const { OPTIONS } = ImportAccountScreen;
+
+    switch (this.state.selectedOption) {
+      case OPTIONS.JSON_FILE:
+        return this.renderJsonFile()
+      case OPTIONS.PRIVATE_KEY:
+      default:
+        return this.renderPrivateKey()
+    }
+  }
+
+  render() {
+    const { OPTIONS } = ImportAccountScreen;
+    const { selectedOption } = this.state;
+
+    return (
+        <div className="import-account">
+          <a
+            className="import-account__back-button"
+            onClick={e => {
+              e.preventDefault()
+              this.props.back()
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+          <div className="import-account__title">
+            Import an Account
+          </div>
+          <div className="import-account__selector-label">
+            How would you like to import your account?
+          </div>
+          <select
+            className="import-account__dropdown"
+            value={selectedOption}
+            onChange={e => this.setState({ selectedOption: e.target.value })}
+          >
+            <option value={OPTIONS.PRIVATE_KEY}>Private Key</option>
+            <option value={OPTIONS.JSON_FILE}>JSON File</option>
+          </select>
+          {this.renderContent()}
+          <button
+            className="first-time-flow__button"
+            disabled={!this.isValid()}
+            onClick={this.onClick}
+          >
+            Import
+          </button>
+          <a
+            href="https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file"
+            className="first-time-flow__link import-account__faq-link"
+            target="_blank"
+          >
+            File import not working?
+          </a>
+        </div>
+      )
+  }
+}
+
+export default connect(
+  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  dispatch => ({
+    importNewAccount: (strategy, args) => dispatch(importNewAccount(strategy, args))
+  })
+)(ImportAccountScreen)