TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #228 from MetaMask/i216

Browse Source 
ui - redesign - init + vault create/restore + seed
feature/default_network_editable
Dan Finlay 9 years ago
parent f1fb7ff42c 921ced1630
commit bd7a46312b
6 changed files with 130 additions and 75 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 22
      ui/app/css/index.css
  3. 27
      ui/app/first-time/create-vault-complete.js
  4. 65
      ui/app/first-time/create-vault.js
  5. 21
      ui/app/first-time/init-menu.js
  6. 61
      ui/app/first-time/restore-vault.js

1
CHANGELOG.md
Unescape View File

@ -2,6 +2,7 @@
## Current Master
- Redesigned init, vault create, vault restore and seed confirmation screens.
- Added pending transactions to transaction list on account screen.
- Clicking a pending transaction takes you back to the transaction approval screen.

22
ui/app/css/index.css
Unescape View File

@ -128,10 +128,11 @@ h2.page-subtitle {
textarea.twelve-word-phrase {
margin-top: 20px;
padding: 12px;
width: 300px;
height: 180px;
height: 140px;
font-size: 16px;
background: #FAF6F0;
background: white;
resize: none;
}
@ -144,20 +145,10 @@ app sections
.initialize-screen hr {
width: 60px;
margin: 12px;
border-color: #F3C83E;
border-color: #F7861C;
border-style: solid;
}
.initialize-screen input[type="password"], .initialize-screen textarea {
width: 300px;
padding: 6px;
border-radius: 6px;
border-style: solid;
outline: none;
border: 1px solid #F5A623;
background: #FAF6F0;
}
.initialize-screen label {
margin-top: 20px;
}
@ -258,6 +249,10 @@ input.large-input {
height: 36px;
}
.letter-spacey {
letter-spacing: 0.1em;
}
/* accounts */
@ -387,7 +382,6 @@ input.large-input {
.send-screen input {
width: 100%;
font-size: 12px;
letter-spacing: 0.1em;
}
/* Ether Balance Widget */

27
ui/app/first-time/create-vault-complete.js
Unescape View File

@ -27,9 +27,23 @@ CreateVaultCompleteScreen.prototype.render = function() {
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'),
// // 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
@ -44,9 +58,12 @@ CreateVaultCompleteScreen.prototype.render = function() {
value: seed,
}),
h('button.btn-thin', {
h('button.primary', {
onClick: () => this.confirmSeedWords(),
}, 'I\'ve copied it somewhere safe.'),
style: {
margin: '24px',
},
}, 'I\'ve copied it somewhere safe'),
])
)
}

65
ui/app/first-time/create-vault.js
Unescape View File

@ -25,56 +25,63 @@ CreateVaultScreen.prototype.render = function() {
h('.initialize-screen.flex-column.flex-center.flex-grow', [
// subtitle and nav
h('.section-title.flex-row.flex-center', [
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
onClick: this.showInitializeMenu.bind(this),
}),
h('h2.page-subtitle', 'Create Vault'),
h('h3.flex-center.text-transform-uppercase', {
style: {
background: '#EBEBEB',
color: '#AEAEAE',
marginBottom: 24,
width: '100%',
fontSize: '20px',
padding: 6,
},
}, [
'Create Vault',
]),
// password
h('label', {
htmlFor: 'password-box',
}, 'Enter Password (min 8 chars):'),
h('input', {
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('label', {
htmlFor: 'password-box-confirm',
}, 'Confirm Password:'),
h('input', {
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,
},
}),
/* ENTROPY TEXT INPUT CURRENTLY DISABLED
// entropy
h('label', {
htmlFor: 'entropy-text-entry',
}, 'Enter random text (optional)'),
h('.flex-row.flex-space-between', {
style: {
marginTop: 30,
width: '50%',
},
}, [
h('textarea', {
id: 'entropy-text-entry',
style: { resize: 'none' },
onKeyPress: this.createVaultOnEnter.bind(this),
}),
*/
// cancel
h('button.primary', {
onClick: this.showInitializeMenu.bind(this),
}, 'CANCEL'),
// submit
h('button.create-vault.btn-thin', {
h('button.primary', {
onClick: this.createNewVault.bind(this),
}, 'OK'),
]),
(!state.inProgress && state.warning) && (
h('span.in-progress-notification', state.warning)
),
state.inProgress && (

21
ui/app/first-time/init-menu.js
Unescape View File

@ -50,10 +50,20 @@ InitializeMenuScreen.prototype.renderMenu = function() {
animationEventEmitter: this.animationEventEmitter,
}),
h('h2.page-subtitle', 'MetaMask'),
h('button.btn-thin', {
h('h1', {
style: {
fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
marginBottom: 20,
},
}, 'MetaMask'),
h('button.primary', {
onClick: this.showCreateVault.bind(this),
style: {
margin: 12,
},
}, 'Create New Vault'),
h('.flex-row.flex-center.flex-grow', [
@ -62,8 +72,11 @@ InitializeMenuScreen.prototype.renderMenu = function() {
h('hr'),
]),
h('button.btn-thin', {
h('button.primary', {
onClick: this.showRestoreVault.bind(this),
style: {
margin: 12,
},
}, 'Restore Existing Vault'),
])

61
ui/app/first-time/restore-vault.js
Unescape View File

@ -25,39 +25,46 @@ RestoreVaultScreen.prototype.render = function() {
h('.initialize-screen.flex-column.flex-center.flex-grow', [
// subtitle and nav
h('.section-title.flex-row.flex-center', [
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
onClick: this.showInitializeMenu.bind(this),
}),
h('h2.page-subtitle', 'Restore Vault'),
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', {
h('textarea.twelve-word-phrase.letter-spacey', {
placeholder: 'Enter your secret twelve word phrase here to restore your vault.'
}),
// password
h('label', {
htmlFor: 'password-box',
}, 'New Password (min 8 chars):'),
h('input', {
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('label', {
htmlFor: 'password-box-confirm',
}, 'Confirm Password:'),
h('input', {
h('input.large-input.letter-spacey', {
type: 'password',
id: 'password-box-confirm',
placeholder: 'Confirm Password',
onKeyPress: this.onMaybeCreate.bind(this),
style: {
width: 260,
marginTop: 16,
},
}),
(state.warning) && (
@ -65,9 +72,25 @@ RestoreVaultScreen.prototype.render = function() {
),
// submit
h('button.btn-thin', {
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),
}, 'I\'ve double checked the 12 word phrase.'),
}, 'OK'),
]),
])

Write Preview
Loading…
Cancel
Save