5 files changed, 268 insertions, 194 deletions
diff --git a/ui/app/components/pages/unlock-page/index.js b/ui/app/components/pages/unlock-page/index.js
new file mode 100644
index 000000000..be80cde4f
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/index.js
@@ -0,0 +1,2 @@
+import UnlockPage from './unlock-page.container'
+module.exports = UnlockPage
diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
new file mode 100644
index 000000000..e655b2cc3
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/unlock-page.component.js
@@ -0,0 +1,182 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from 'material-ui/Button'
+import TextField from '../../text-field'
+
+const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums')
+const { getEnvironmentType } = require('../../../../../app/scripts/lib/util')
+const getCaretCoordinates = require('textarea-caret')
+const EventEmitter = require('events').EventEmitter
+const Mascot = require('../../mascot')
+const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes')
+
+class UnlockPage extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      password: '',
+      error: null,
+    }
+
+    this.animationEventEmitter = new EventEmitter()
+  }
+
+  componentWillMount () {
+    const { isUnlocked, history } = this.props
+
+    if (isUnlocked) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  tryUnlockMetamask (password) {
+    const { tryUnlockMetamask, history } = this.props
+    tryUnlockMetamask(password)
+      .then(() => history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => this.setState({ error: message }))
+  }
+
+  handleSubmit (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { password } = this.state
+    const { tryUnlockMetamask, history } = this.props
+
+    if (password === '') {
+      return
+    }
+
+    this.setState({ error: null })
+
+    tryUnlockMetamask(password)
+      .then(() => history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => this.setState({ error: message }))
+  }
+
+  handleInputChange ({ target }) {
+    this.setState({ password: target.value, error: null })
+
+    // tell mascot to look at page action
+    const element = target
+    const boundingRect = element.getBoundingClientRect()
+    const coordinates = getCaretCoordinates(element, element.selectionEnd)
+    this.animationEventEmitter.emit('point', {
+      x: boundingRect.left + coordinates.left - element.scrollLeft,
+      y: boundingRect.top + coordinates.top - element.scrollTop,
+    })
+  }
+
+  renderSubmitButton () {
+    const style = {
+      backgroundColor: '#f7861c',
+      color: 'white',
+      marginTop: '20px',
+      height: '60px',
+      fontWeight: '400',
+      boxShadow: 'none',
+      borderRadius: '4px',
+    }
+
+    return (
+      <Button
+        type="submit"
+        style={style}
+        disabled={!this.state.password}
+        fullWidth
+        variant="raised"
+        size="large"
+        onClick={event => this.handleSubmit(event)}
+        disableRipple
+      >
+        { this.context.t('login') }
+      </Button>
+    )
+  }
+
+  render () {
+    const { error } = this.state
+
+    return (
+      <div className="unlock-page__container">
+        <div className="unlock-page">
+          <div className="unlock-page__mascot-container">
+            <Mascot
+              animationEventEmitter={this.animationEventEmitter}
+              width="120"
+              height="120"
+            />
+          </div>
+          <h1 className="unlock-page__title">
+            { this.context.t('welcomeBack') }
+          </h1>
+          <div>{ this.context.t('unlockMessage') }</div>
+          <form
+            className="unlock-page__form"
+            onSubmit={event => this.handleSubmit(event)}
+          >
+            <TextField
+              id="password"
+              label="Password"
+              type="password"
+              value={this.state.password}
+              onChange={event => this.handleInputChange(event)}
+              error={error}
+              autoFocus
+              margin="normal"
+              autoComplete="current-password"
+              fullWidth
+            />
+          </form>
+          { this.renderSubmitButton() }
+          <div className="unlock-page__links">
+            <div
+              className="unlock-page__link"
+              onClick={() => {
+                this.props.markPasswordForgotten()
+                this.props.history.push(RESTORE_VAULT_ROUTE)
+
+                if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+                  global.platform.openExtensionInBrowser()
+                }
+              }}
+            >
+              { this.context.t('restoreFromSeed') }
+            </div>
+            <div
+              className="unlock-page__link unlock-page__link--import"
+              onClick={() => {
+                this.props.markPasswordForgotten()
+                this.props.history.push(RESTORE_VAULT_ROUTE)
+
+                if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+                  global.platform.openExtensionInBrowser()
+                }
+              }}
+            >
+              { this.context.t('importUsingSeed') }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+UnlockPage.propTypes = {
+  forgotPassword: PropTypes.func,
+  tryUnlockMetamask: PropTypes.func,
+  markPasswordForgotten: PropTypes.func,
+  history: PropTypes.object,
+  isUnlocked: PropTypes.bool,
+  t: PropTypes.func,
+  useOldInterface: PropTypes.func,
+  setNetworkEndpoints: PropTypes.func,
+}
+
+export default UnlockPage
diff --git a/ui/app/components/pages/unlock-page/unlock-page.container.js b/ui/app/components/pages/unlock-page/unlock-page.container.js
new file mode 100644
index 000000000..9788a18ea
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/unlock-page.container.js
@@ -0,0 +1,33 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+
+const {
+  tryUnlockMetamask,
+  forgotPassword,
+  markPasswordForgotten,
+  setNetworkEndpoints,
+} = require('../../../actions')
+
+import UnlockPage from './unlock-page.component'
+
+const mapStateToProps = state => {
+  const { metamask: { isUnlocked } } = state
+  return {
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    forgotPassword: () => dispatch(forgotPassword()),
+    tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
+    markPasswordForgotten: () => dispatch(markPasswordForgotten()),
+    setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(UnlockPage)
diff --git a/ui/app/components/pages/unlock-page/unlock-page.scss b/ui/app/components/pages/unlock-page/unlock-page.scss
new file mode 100644
index 000000000..47b6537e7
--- /dev/null
+++ b/ui/app/components/pages/unlock-page/unlock-page.scss
@@ -0,0 +1,51 @@
+.unlock-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 357px;
+  padding: 30px;
+  font-weight: 400;
+  color: $silver-chalice;
+
+  &__container {
+    background: $white;
+    display: flex;
+    align-self: stretch;
+    justify-content: center;
+    flex: 1 0 auto;
+  }
+
+  &__mascot-container {
+    margin-top: 24px;
+  }
+
+  &__title {
+    margin-top: 5px;
+    font-size: 2rem;
+    font-weight: 800;
+    color: $tundora;
+  }
+
+  &__form {
+    width: 100%;
+    margin-top: 40px;
+  }
+
+  &__links {
+    margin-top: 25px;
+    width: 100%;
+  }
+
+  &__link {
+    cursor: pointer;
+
+    &--import {
+      color: $ecstasy;
+    }
+
+    &--use-classic {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js
deleted file mode 100644
index 30144b978..000000000
--- a/ui/app/components/pages/unlock.js
+++ /dev/null
@@ -1,194 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const connect = require('../../metamask-connect')
-const h = require('react-hyperscript')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const {
-  tryUnlockMetamask,
-  forgotPassword,
-  markPasswordForgotten,
-  setNetworkEndpoints,
-  setFeatureFlag,
-} = require('../../actions')
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
-const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
-const getCaretCoordinates = require('textarea-caret')
-const EventEmitter = require('events').EventEmitter
-const Mascot = require('../mascot')
-const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/controllers/network/enums')
-const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes')
-
-class UnlockScreen extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      error: null,
-    }
-
-    this.animationEventEmitter = new EventEmitter()
-  }
-
-  componentWillMount () {
-    const { isUnlocked, history } = this.props
-
-    if (isUnlocked) {
-      history.push(DEFAULT_ROUTE)
-    }
-  }
-
-  componentDidMount () {
-    const passwordBox = document.getElementById('password-box')
-
-    if (passwordBox) {
-      passwordBox.focus()
-    }
-  }
-
-  tryUnlockMetamask (password) {
-    const { tryUnlockMetamask, history } = this.props
-    tryUnlockMetamask(password)
-      .then(() => history.push(DEFAULT_ROUTE))
-      .catch(({ message }) => this.setState({ error: message }))
-  }
-
-  onSubmit (event) {
-    const input = document.getElementById('password-box')
-    const password = input.value
-    this.tryUnlockMetamask(password)
-  }
-
-  onKeyPress (event) {
-    if (event.key === 'Enter') {
-      this.submitPassword(event)
-    }
-  }
-
-  submitPassword (event) {
-    var element = event.target
-    var password = element.value
-    // reset input
-    element.value = ''
-    this.tryUnlockMetamask(password)
-  }
-
-  inputChanged (event) {
-    // tell mascot to look at page action
-    var element = event.target
-    var boundingRect = element.getBoundingClientRect()
-    var coordinates = getCaretCoordinates(element, element.selectionEnd)
-    this.animationEventEmitter.emit('point', {
-      x: boundingRect.left + coordinates.left - element.scrollLeft,
-      y: boundingRect.top + coordinates.top - element.scrollTop,
-    })
-  }
-
-  render () {
-    const { error } = this.state
-    return (
-      h('.unlock-screen', [
-
-        h(Mascot, {
-          animationEventEmitter: this.animationEventEmitter,
-        }),
-
-        h('h1', {
-          style: {
-            fontSize: '1.4em',
-            textTransform: 'uppercase',
-            color: '#7F8082',
-          },
-        }, this.props.t('appName')),
-
-        h('input.large-input', {
-          type: 'password',
-          id: 'password-box',
-          placeholder: 'enter password',
-          style: {
-            background: 'white',
-          },
-          onKeyPress: this.onKeyPress.bind(this),
-          onInput: this.inputChanged.bind(this),
-        }),
-
-        h('.error', {
-          style: {
-            display: error ? 'block' : 'none',
-            padding: '0 20px',
-            textAlign: 'center',
-          },
-        }, error),
-
-        h('button.primary.cursor-pointer', {
-          onClick: this.onSubmit.bind(this),
-          style: {
-            margin: 10,
-          },
-        }, this.props.t('login')),
-
-        h('p.pointer', {
-          onClick: () => {
-            this.props.markPasswordForgotten()
-            this.props.history.push(RESTORE_VAULT_ROUTE)
-
-            if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-              global.platform.openExtensionInBrowser()
-            }
-          },
-          style: {
-            fontSize: '0.8em',
-            color: 'rgb(247, 134, 28)',
-            textDecoration: 'underline',
-          },
-        }, this.props.t('restoreFromSeed')),
-
-        h('p.pointer', {
-          onClick: () => {
-            this.props.useOldInterface()
-              .then(() => this.props.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))
-          },
-          style: {
-            fontSize: '0.8em',
-            color: '#aeaeae',
-            textDecoration: 'underline',
-            marginTop: '32px',
-          },
-        }, this.props.t('classicInterface')),
-      ])
-    )
-  }
-}
-
-UnlockScreen.propTypes = {
-  forgotPassword: PropTypes.func,
-  tryUnlockMetamask: PropTypes.func,
-  markPasswordForgotten: PropTypes.func,
-  history: PropTypes.object,
-  isUnlocked: PropTypes.bool,
-  t: PropTypes.func,
-  useOldInterface: PropTypes.func,
-  setNetworkEndpoints: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  const { metamask: { isUnlocked } } = state
-  return {
-    isUnlocked,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    forgotPassword: () => dispatch(forgotPassword()),
-    tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
-    markPasswordForgotten: () => dispatch(markPasswordForgotten()),
-    useOldInterface: () => dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')),
-    setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)),
-  }
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(UnlockScreen)