Merge branch 'master' into PopupNotifications

4 files changed, 97 insertions, 11 deletions

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index b8650f7d5..58b7942c3 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -1,4 +1,4 @@
-const Component = require('react').Component
+const PersistentForm = require('../../lib/persistent-form')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
@@ -17,12 +17,15 @@ function mapStateToProps(state) {
   }
 }
 
-inherits(ShapeshiftForm, Component)
+inherits(ShapeshiftForm, PersistentForm)
 
 function ShapeshiftForm () {
-  Component.call(this)
+  PersistentForm.call(this)
+  this.persistentFormParentId = 'shapeshift-buy-form'
 }
+
 ShapeshiftForm.prototype.render = function () {
+
   return h(ReactCSSTransitionGroup, {
     className: 'css-transition-group',
     transitionName: 'main',
@@ -66,6 +69,9 @@ ShapeshiftForm.prototype.renderMain = function () {
         h('input#fromCoin.buy-inputs.ex-coins', {
           type: 'text',
           list: 'coinList',
+          dataset: {
+            persistentFormId: 'input-coin',
+          },
           style: {
             boxSizing: 'border-box',
           },
@@ -159,6 +165,9 @@ ShapeshiftForm.prototype.renderMain = function () {
       h('input#fromCoinAddress.buy-inputs', {
         type: 'text',
         placeholder: `Your ${coin} Refund Address`,
+        dataset: {
+          persistentFormId: 'refund-address',
+        },
         style: {
           boxSizing: 'border-box',
           width: '278px',
diff --git a/ui/app/first-time/restore-vault.js b/ui/app/first-time/restore-vault.js
index 684781e50..4c1f21008 100644
--- a/ui/app/first-time/restore-vault.js
+++ b/ui/app/first-time/restore-vault.js
@@ -1,14 +1,14 @@
 const inherits = require('util').inherits
-const Component = require('react').Component
+const PersistentForm = require('../../lib/persistent-form')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../actions')
 
 module.exports = connect(mapStateToProps)(RestoreVaultScreen)
 
-inherits(RestoreVaultScreen, Component)
+inherits(RestoreVaultScreen, PersistentForm)
 function RestoreVaultScreen () {
-  Component.call(this)
+  PersistentForm.call(this)
 }
 
 function mapStateToProps (state) {
@@ -19,6 +19,8 @@ function mapStateToProps (state) {
 
 RestoreVaultScreen.prototype.render = function () {
   var state = this.props
+  this.persistentFormParentId = 'restore-vault-form'
+
   return (
 
     h('.initialize-screen.flex-column.flex-center.flex-grow', [
@@ -39,6 +41,9 @@ RestoreVaultScreen.prototype.render = function () {
       // wallet seed entry
       h('h3', 'Wallet Seed'),
       h('textarea.twelve-word-phrase.letter-spacey', {
+        dataset: {
+          persistentFormId: 'wallet-seed',
+        },
         placeholder: 'Enter your secret twelve word phrase here to restore your vault.',
       }),
 
@@ -47,6 +52,9 @@ RestoreVaultScreen.prototype.render = function () {
         type: 'password',
         id: 'password-box',
         placeholder: 'New Password (min 8 chars)',
+        dataset: {
+          persistentFormId: 'password',
+        },
         style: {
           width: 260,
           marginTop: 12,
@@ -59,6 +67,9 @@ RestoreVaultScreen.prototype.render = function () {
         id: 'password-box-confirm',
         placeholder: 'Confirm Password',
         onKeyPress: this.onMaybeCreate.bind(this),
+        dataset: {
+          persistentFormId: 'password-confirmation',
+        },
         style: {
           width: 260,
           marginTop: 16,
diff --git a/ui/app/send.js b/ui/app/send.js
index 06ea199f4..0cc3a032f 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -1,5 +1,5 @@
 const inherits = require('util').inherits
-const Component = require('react').Component
+const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const Identicon = require('./components/identicon')
@@ -29,12 +29,14 @@ function mapStateToProps (state) {
   return result
 }
 
-inherits(SendTransactionScreen, Component)
+inherits(SendTransactionScreen, PersistentForm)
 function SendTransactionScreen () {
-  Component.call(this)
+  PersistentForm.call(this)
 }
 
 SendTransactionScreen.prototype.render = function () {
+  this.persistentFormParentId = 'send-tx-form'
+
   var state = this.props
   var address = state.address
   var account = state.account
@@ -137,6 +139,9 @@ SendTransactionScreen.prototype.render = function () {
         h('input.large-input', {
           name: 'address',
           placeholder: 'Recipient Address',
+          dataset: {
+            persistentFormId: 'recipient-address',
+          },
         }),
       ]),
 
@@ -150,6 +155,9 @@ SendTransactionScreen.prototype.render = function () {
           style: {
             marginRight: 6,
           },
+          dataset: {
+            persistentFormId: 'tx-amount',
+          },
         }),
 
         h('button.primary', {
@@ -185,11 +193,12 @@ SendTransactionScreen.prototype.render = function () {
             width: '100%',
             resize: 'none',
           },
+          dataset: {
+            persistentFormId: 'tx-data',
+          },
         }),
       ]),
-
     ])
-
   )
 }
 
diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js
new file mode 100644
index 000000000..2fd7600a2
--- /dev/null
+++ b/ui/lib/persistent-form.js
@@ -0,0 +1,57 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const defaultKey = 'persistent-form-default'
+const eventName = 'keyup'
+
+module.exports = PersistentForm
+
+function PersistentForm () {
+  Component.call(this)
+}
+
+inherits(PersistentForm, Component)
+
+PersistentForm.prototype.componentDidMount = function () {
+  const fields = document.querySelectorAll('[data-persistent-formid]')
+  const store = this.getPersistentStore()
+  fields.forEach((field) => {
+    const key = field.getAttribute('data-persistent-formid')
+    const cached = store[key]
+    if (cached !== undefined) {
+      field.value = cached
+    }
+
+    field.addEventListener(eventName, this.persistentFieldDidUpdate.bind(this))
+  })
+}
+
+PersistentForm.prototype.getPersistentStore = function () {
+  let store = window.localStorage[this.persistentFormParentId || defaultKey]
+  if (store && store !== 'null') {
+    store = JSON.parse(store)
+  } else {
+    store = {}
+  }
+  return store
+}
+
+PersistentForm.prototype.setPersistentStore = function (newStore) {
+  window.localStorage[this.persistentFormParentId || defaultKey] = JSON.stringify(newStore)
+}
+
+PersistentForm.prototype.persistentFieldDidUpdate = function (event) {
+  const field = event.target
+  const store = this.getPersistentStore()
+  const key = field.getAttribute('data-persistent-formid')
+  const val = field.value
+  store[key] = val
+  this.setPersistentStore(store)
+}
+
+PersistentForm.prototype.componentWillUnmount = function () {
+  const fields = document.querySelectorAll('[data-persistent-formid]')
+  fields.forEach((field) => {
+    field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this))
+  })
+  this.setPersistentStore({})
+}