aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/first-time
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/first-time')
-rw-r--r--ui/app/first-time/create-vault-complete.js74
-rw-r--r--ui/app/first-time/create-vault.js129
-rw-r--r--ui/app/first-time/init-menu.js131
-rw-r--r--ui/app/first-time/restore-vault.js148
4 files changed, 108 insertions, 374 deletions
diff --git a/ui/app/first-time/create-vault-complete.js b/ui/app/first-time/create-vault-complete.js
deleted file mode 100644
index 2b5413955..000000000
--- a/ui/app/first-time/create-vault-complete.js
+++ /dev/null
@@ -1,74 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const actions = require('../actions')
-
-module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen)
-
-inherits(CreateVaultCompleteScreen, Component)
-function CreateVaultCompleteScreen () {
- Component.call(this)
-}
-
-function mapStateToProps (state) {
- return {
- seed: state.appState.currentView.seedWords,
- cachedSeed: state.metamask.seedWords,
- }
-}
-
-CreateVaultCompleteScreen.prototype.render = function () {
- var state = this.props
- var seed = state.seed || state.cachedSeed
-
- return (
-
- h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
- // // subtitle and nav
- // h('.section-title.flex-row.flex-center', [
- // h('h2.page-subtitle', 'Vault Created'),
- // ]),
-
- h('h3.flex-center.text-transform-uppercase', {
- style: {
- background: '#EBEBEB',
- color: '#AEAEAE',
- marginTop: 36,
- marginBottom: 8,
- width: '100%',
- fontSize: '20px',
- padding: 6,
- },
- }, [
- 'Vault Created',
- ]),
-
- h('span.error', { // Error for the right red
- style: {
- padding: '12px 20px 0px 20px',
- textAlign: 'center',
- },
- }, 'These 12 words can restore all of your MetaMask accounts for this vault.\nSave them somewhere safe and secret.'),
-
- h('textarea.twelve-word-phrase', {
- readOnly: true,
- value: seed,
- }),
-
- h('button.primary', {
- onClick: () => this.confirmSeedWords(),
- style: {
- margin: '24px',
- fontSize: '0.9em',
- },
- }, 'I\'ve copied it somewhere safe'),
- ])
- )
-}
-
-CreateVaultCompleteScreen.prototype.confirmSeedWords = function () {
- this.props.dispatch(actions.confirmSeedWords())
-}
-
diff --git a/ui/app/first-time/create-vault.js b/ui/app/first-time/create-vault.js
deleted file mode 100644
index 33ae62179..000000000
--- a/ui/app/first-time/create-vault.js
+++ /dev/null
@@ -1,129 +0,0 @@
-const inherits = require('util').inherits
-
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const actions = require('../actions')
-
-module.exports = connect(mapStateToProps)(CreateVaultScreen)
-
-inherits(CreateVaultScreen, Component)
-function CreateVaultScreen () {
- Component.call(this)
-}
-
-function mapStateToProps (state) {
- return {
- warning: state.appState.warning,
- }
-}
-
-CreateVaultScreen.prototype.render = function () {
- var state = this.props
- return (
-
- h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
- h('h3.flex-center.text-transform-uppercase', {
- style: {
- background: '#EBEBEB',
- color: '#AEAEAE',
- marginBottom: 24,
- width: '100%',
- fontSize: '20px',
- padding: 6,
- },
- }, [
- 'Create Vault',
- ]),
-
- // password
- h('input.large-input.letter-spacey', {
- type: 'password',
- id: 'password-box',
- placeholder: 'New Password (min 8 chars)',
- style: {
- width: 260,
- marginTop: 12,
- },
- }),
-
- // confirm password
- h('input.large-input.letter-spacey', {
- type: 'password',
- id: 'password-box-confirm',
- placeholder: 'Confirm Password',
- onKeyPress: this.createVaultOnEnter.bind(this),
- style: {
- width: 260,
- marginTop: 16,
- },
- }),
-
- h('.flex-row.flex-space-between', {
- style: {
- marginTop: 30,
- width: '50%',
- },
- }, [
-
- // cancel
- h('button.primary', {
- onClick: this.showInitializeMenu.bind(this),
- }, 'CANCEL'),
-
- // submit
- h('button.primary', {
- onClick: this.createNewVault.bind(this),
- }, 'OK'),
-
- ]),
-
- (!state.inProgress && state.warning) && (
- h('span.in-progress-notification', state.warning)
- ),
-
- state.inProgress && (
- h('span.in-progress-notification', 'Generating Seed...')
- ),
- ])
- )
-}
-
-CreateVaultScreen.prototype.componentDidMount = function () {
- document.getElementById('password-box').focus()
-}
-
-CreateVaultScreen.prototype.showInitializeMenu = function () {
- this.props.dispatch(actions.showInitializeMenu())
-}
-
-// create vault
-
-CreateVaultScreen.prototype.createVaultOnEnter = function (event) {
- if (event.key === 'Enter') {
- event.preventDefault()
- this.createNewVault()
- }
-}
-
-CreateVaultScreen.prototype.createNewVault = function () {
- var passwordBox = document.getElementById('password-box')
- var password = passwordBox.value
- var passwordConfirmBox = document.getElementById('password-box-confirm')
- var passwordConfirm = passwordConfirmBox.value
- // var entropy = document.getElementById('entropy-text-entry').value
-
- if (password.length < 8) {
- this.warning = 'password not long enough'
- this.props.dispatch(actions.displayWarning(this.warning))
- return
- }
- if (password !== passwordConfirm) {
- this.warning = 'passwords don\'t match'
- this.props.dispatch(actions.displayWarning(this.warning))
- return
- }
-
- this.props.dispatch(actions.createNewVault(password, ''/* entropy*/))
-}
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index 94a9d3df6..14a89b988 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -5,6 +5,8 @@ const connect = require('react-redux').connect
const h = require('react-hyperscript')
const Mascot = require('../components/mascot')
const actions = require('../actions')
+const Tooltip = require('../components/tooltip')
+const getCaretCoordinates = require('textarea-caret')
module.exports = connect(mapStateToProps)(InitializeMenuScreen)
@@ -18,6 +20,7 @@ function mapStateToProps (state) {
return {
// state from plugin
currentView: state.appState.currentView,
+ warning: state.appState.warning,
}
}
@@ -27,7 +30,7 @@ InitializeMenuScreen.prototype.render = function () {
switch (state.currentView.name) {
default:
- return this.renderMenu()
+ return this.renderMenu(state)
}
}
@@ -36,7 +39,7 @@ InitializeMenuScreen.prototype.render = function () {
// document.getElementById('password-box').focus()
// }
-InitializeMenuScreen.prototype.renderMenu = function () {
+InitializeMenuScreen.prototype.renderMenu = function (state) {
return (
h('.initialize-screen.flex-column.flex-center.flex-grow', [
@@ -47,49 +50,131 @@ InitializeMenuScreen.prototype.renderMenu = function () {
h('h1', {
style: {
- fontSize: '1.4em',
+ fontSize: '1.3em',
textTransform: 'uppercase',
color: '#7F8082',
- marginBottom: 20,
+ marginBottom: 10,
},
}, 'MetaMask'),
- h('button.primary', {
- onClick: this.showCreateVault.bind(this),
+
+ h('div', [
+ h('h3', {
+ style: {
+ fontSize: '0.8em',
+ color: '#7F8082',
+ display: 'inline',
+ },
+ }, 'Encrypt your new DEN'),
+
+ h(Tooltip, {
+ title: 'Your DEN is your password-encrypted storage within MetaMask.',
+ }, [
+ h('i.fa.fa-question-circle.pointer', {
+ style: {
+ fontSize: '18px',
+ position: 'relative',
+ color: 'rgb(247, 134, 28)',
+ top: '2px',
+ marginLeft: '4px',
+ },
+ }),
+ ]),
+ ]),
+
+ h('span.in-progress-notification', state.warning),
+
+ // password
+ h('input.large-input.letter-spacey', {
+ type: 'password',
+ id: 'password-box',
+ placeholder: 'New Password (min 8 chars)',
+ onInput: this.inputChanged.bind(this),
style: {
- margin: 12,
+ width: 260,
+ marginTop: 12,
},
- }, 'Create New Vault'),
+ }),
+
+ // confirm password
+ h('input.large-input.letter-spacey', {
+ type: 'password',
+ id: 'password-box-confirm',
+ placeholder: 'Confirm Password',
+ onKeyPress: this.createVaultOnEnter.bind(this),
+ onInput: this.inputChanged.bind(this),
+ style: {
+ width: 260,
+ marginTop: 16,
+ },
+ }),
- h('.flex-row.flex-center.flex-grow', [
- h('hr'),
- h('div', 'OR'),
- h('hr'),
- ]),
h('button.primary', {
- onClick: this.showRestoreVault.bind(this),
+ onClick: this.createNewVaultAndKeychain.bind(this),
style: {
margin: 12,
},
- }, 'Restore Existing Vault'),
+ }, 'Create'),
+
+ h('.flex-row.flex-center.flex-grow', [
+ h('p.pointer', {
+ onClick: this.showRestoreVault.bind(this),
+ style: {
+ fontSize: '0.8em',
+ color: 'rgb(247, 134, 28)',
+ textDecoration: 'underline',
+ },
+ }, 'I already have a DEN that I would like to import'),
+ ]),
+
])
)
}
-// InitializeMenuScreen.prototype.splitWor = function() {
-// this.props.dispatch(actions.showInitializeMenu())
-// }
-
-InitializeMenuScreen.prototype.showInitializeMenu = function () {
- this.props.dispatch(actions.showInitializeMenu())
+InitializeMenuScreen.prototype.createVaultOnEnter = function (event) {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ this.createNewVaultAndKeychain()
+ }
}
-InitializeMenuScreen.prototype.showCreateVault = function () {
- this.props.dispatch(actions.showCreateVault())
+InitializeMenuScreen.prototype.componentDidMount = function () {
+ document.getElementById('password-box').focus()
}
InitializeMenuScreen.prototype.showRestoreVault = function () {
this.props.dispatch(actions.showRestoreVault())
}
+InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
+ var passwordBox = document.getElementById('password-box')
+ var password = passwordBox.value
+ var passwordConfirmBox = document.getElementById('password-box-confirm')
+ var passwordConfirm = passwordConfirmBox.value
+ // var entropy = document.getElementById('entropy-text-entry').value
+
+ if (password.length < 8) {
+ this.warning = 'password not long enough'
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+ if (password !== passwordConfirm) {
+ this.warning = 'passwords don\'t match'
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+
+ this.props.dispatch(actions.createNewVaultAndKeychain(password, ''/* entropy*/))
+}
+
+InitializeMenuScreen.prototype.inputChanged = function (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,
+ })
+}
diff --git a/ui/app/first-time/restore-vault.js b/ui/app/first-time/restore-vault.js
deleted file mode 100644
index 4c1f21008..000000000
--- a/ui/app/first-time/restore-vault.js
+++ /dev/null
@@ -1,148 +0,0 @@
-const inherits = require('util').inherits
-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, PersistentForm)
-function RestoreVaultScreen () {
- PersistentForm.call(this)
-}
-
-function mapStateToProps (state) {
- return {
- warning: state.appState.warning,
- }
-}
-
-RestoreVaultScreen.prototype.render = function () {
- var state = this.props
- this.persistentFormParentId = 'restore-vault-form'
-
- return (
-
- h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
- h('h3.flex-center.text-transform-uppercase', {
- style: {
- background: '#EBEBEB',
- color: '#AEAEAE',
- marginBottom: 24,
- width: '100%',
- fontSize: '20px',
- padding: 6,
- },
- }, [
- 'Restore Vault',
- ]),
-
- // 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.',
- }),
-
- // password
- h('input.large-input.letter-spacey', {
- type: 'password',
- id: 'password-box',
- placeholder: 'New Password (min 8 chars)',
- dataset: {
- persistentFormId: 'password',
- },
- style: {
- width: 260,
- marginTop: 12,
- },
- }),
-
- // confirm password
- h('input.large-input.letter-spacey', {
- type: 'password',
- id: 'password-box-confirm',
- placeholder: 'Confirm Password',
- onKeyPress: this.onMaybeCreate.bind(this),
- dataset: {
- persistentFormId: 'password-confirmation',
- },
- style: {
- width: 260,
- marginTop: 16,
- },
- }),
-
- (state.warning) && (
- h('span.error.in-progress-notification', state.warning)
- ),
-
- // submit
-
- h('.flex-row.flex-space-between', {
- style: {
- marginTop: 30,
- width: '50%',
- },
- }, [
-
- // cancel
- h('button.primary', {
- onClick: this.showInitializeMenu.bind(this),
- }, 'CANCEL'),
-
- // submit
- h('button.primary', {
- onClick: this.restoreVault.bind(this),
- }, 'OK'),
-
- ]),
-
- ])
-
- )
-}
-
-RestoreVaultScreen.prototype.showInitializeMenu = function () {
- this.props.dispatch(actions.showInitializeMenu())
-}
-
-RestoreVaultScreen.prototype.onMaybeCreate = function (event) {
- if (event.key === 'Enter') {
- this.restoreVault()
- }
-}
-
-RestoreVaultScreen.prototype.restoreVault = function () {
- // check password
- var passwordBox = document.getElementById('password-box')
- var password = passwordBox.value
- var passwordConfirmBox = document.getElementById('password-box-confirm')
- var passwordConfirm = passwordConfirmBox.value
- if (password.length < 8) {
- this.warning = 'Password not long enough'
-
- this.props.dispatch(actions.displayWarning(this.warning))
- return
- }
- if (password !== passwordConfirm) {
- this.warning = 'Passwords don\'t match'
- this.props.dispatch(actions.displayWarning(this.warning))
- return
- }
- // check seed
- var seedBox = document.querySelector('textarea.twelve-word-phrase')
- var seed = seedBox.value.trim()
- if (seed.split(' ').length !== 12) {
- this.warning = 'seed phrases are 12 words long'
- this.props.dispatch(actions.displayWarning(this.warning))
- return
- }
- // submit
- this.warning = null
- this.props.dispatch(actions.displayWarning(this.warning))
- this.props.dispatch(actions.recoverFromSeed(password, seed))
-}
generated by cgit (git 2.34.1) at 2024-10-21 16:02:18 +0800