From 6eb09c1a796f636ce45c9589a47a40f37e4ed2ac Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 12:17:09 -0700 Subject: Add persistent form class --- ui/lib/persistent-form.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 ui/lib/persistent-form.js (limited to 'ui') diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js new file mode 100644 index 000000000..4bb19ad58 --- /dev/null +++ b/ui/lib/persistent-form.js @@ -0,0 +1,60 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const defaultKey = 'persistent-form-default' +const eventName = 'keyup'//.persistent-form-change'//.persistent-form-change' + +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 val = field.value + 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 + console.log(val) + this.setPersistentStore(store) +} + +PersistentForm.prototype.componentWillUnmount = function () { + const fields = document.querySelectorAll('[data-persistent-formid]') + const store = this.getPersistentStore() + fields.forEach((field) => { + field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this)) + }) + this.setPersistentStore({}) +} -- cgit v1.2.3 From d81bde9f6c83c72dd693550494503f8be23a1a20 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 12:18:04 -0700 Subject: Make restore vault form persist --- ui/app/first-time/restore-vault.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'ui') 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, -- cgit v1.2.3 From 2026b674c53caf643abc69364c60250cf0163062 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 14:09:54 -0700 Subject: Remove log --- ui/lib/persistent-form.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui') diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js index 4bb19ad58..537cfb1ce 100644 --- a/ui/lib/persistent-form.js +++ b/ui/lib/persistent-form.js @@ -46,7 +46,6 @@ PersistentForm.prototype.persistentFieldDidUpdate = function (event) { const key = field.getAttribute('data-persistent-formid') const val = field.value store[key] = val - console.log(val) this.setPersistentStore(store) } -- cgit v1.2.3 From b39bd5333b8bb55cc11a191313c742c60a623650 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 14:10:07 -0700 Subject: Persist send tx form field values --- ui/app/send.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'ui') 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', + }, }), ]), - ]) - ) } -- cgit v1.2.3 From a8e40ffe7a4e8a780fefe841ac73fe12e543f290 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 14:19:09 -0700 Subject: Persist shapeshift form input values --- ui/app/components/shapeshift-form.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'ui') 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', -- cgit v1.2.3 From 6f082dd9e7b7cd9cd0fba6590282d4ce46032c70 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 14:23:41 -0700 Subject: Linted --- ui/lib/persistent-form.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/lib/persistent-form.js b/ui/lib/persistent-form.js index 537cfb1ce..2fd7600a2 100644 --- a/ui/lib/persistent-form.js +++ b/ui/lib/persistent-form.js @@ -1,7 +1,7 @@ const inherits = require('util').inherits const Component = require('react').Component const defaultKey = 'persistent-form-default' -const eventName = 'keyup'//.persistent-form-change'//.persistent-form-change' +const eventName = 'keyup' module.exports = PersistentForm @@ -16,7 +16,6 @@ PersistentForm.prototype.componentDidMount = function () { const store = this.getPersistentStore() fields.forEach((field) => { const key = field.getAttribute('data-persistent-formid') - const val = field.value const cached = store[key] if (cached !== undefined) { field.value = cached @@ -51,7 +50,6 @@ PersistentForm.prototype.persistentFieldDidUpdate = function (event) { PersistentForm.prototype.componentWillUnmount = function () { const fields = document.querySelectorAll('[data-persistent-formid]') - const store = this.getPersistentStore() fields.forEach((field) => { field.removeEventListener(eventName, this.persistentFieldDidUpdate.bind(this)) }) -- cgit v1.2.3