Skip to content

Commit

Permalink
Update Seed Phrase Functionality on Account Import (#8730)
Browse files Browse the repository at this point in the history 
Update seed phrase functionality to be able to conceal seed phrase (as a password field) so it remains hidden on screen.
  • Loading branch information
@rickycodes
rickycodes authored Jun 11, 2020
1 parent d0a2808 commit 71e7966
Show file tree
Hide file tree
Showing 7 changed files with 70 additions and 29 deletions.
16 changes: 11 additions & 5 deletions app/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@
"message": "Confirmed"
},
"confirmPassword": {
"message": "Confirm Password"
"message": "Confirm password"
},
"confirmSecretBackupPhrase": {
"message": "Confirm your Secret Backup Phrase"
Expand Down Expand Up @@ -784,10 +784,10 @@
"message": " Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts "
},
"importAccountSeedPhrase": {
"message": "Import an Account with Seed Phrase"
"message": "Import an account with seed phrase"
},
"importWallet": {
"message": "Import Wallet"
"message": "Import wallet"
},
"importYourExisting": {
"message": "Import your existing wallet using a 12 word seed phrase"
Expand Down Expand Up @@ -986,7 +986,7 @@
"message": "New Contract"
},
"newPassword": {
"message": "New Password (min 8 chars)"
"message": "New password (min 8 chars)"
},
"newNetwork": {
"message": "New Network"
Expand Down Expand Up @@ -1281,6 +1281,12 @@
"seedPhrasePlaceholder": {
"message": "Separate each word with a single space"
},
"seedPhrasePlaceholderPaste": {
"message": "Paste seed phrase from clipboard"
},
"showSeedPhrase": {
"message": "Show seed phrase"
},
"seedPhraseReq": {
"message": "Seed phrases contain 12, 15, 18, 21, or 24 words"
},
Expand Down Expand Up @@ -1702,7 +1708,7 @@
"message": "Visit our web site"
},
"walletSeed": {
"message": "Wallet Seed"
"message": "Seed phrase"
},
"welcomeBack": {
"message": "Welcome Back!"
Expand Down
6 changes: 3 additions & 3 deletions test/e2e/from-import-ui.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Using MetaMask with an existing account', function () {
})

it('clicks the "Import Wallet" option', async function () {
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
await driver.delay(largeDelayMs)
})

Expand All @@ -73,7 +73,7 @@ describe('Using MetaMask with an existing account', function () {
})

it('imports a seed phrase', async function () {
const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
await seedTextArea.sendKeys(testSeedPhrase)
await driver.delay(regularDelayMs)

Expand All @@ -82,7 +82,7 @@ describe('Using MetaMask with an existing account', function () {
const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
confirmPassword.sendKeys('correct horse battery staple')

await driver.clickElement(By.css('.first-time-flow__checkbox'))
await driver.clickElement(By.css('.first-time-flow__terms'))

await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
await driver.delay(regularDelayMs)
Expand Down
6 changes: 3 additions & 3 deletions test/e2e/send-edit.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('Using MetaMask with an existing account', function () {
})

it('clicks the "Import Wallet" option', async function () {
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
await driver.delay(largeDelayMs)
})

Expand All @@ -71,7 +71,7 @@ describe('Using MetaMask with an existing account', function () {
})

it('imports a seed phrase', async function () {
const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
await seedTextArea.sendKeys(testSeedPhrase)
await driver.delay(regularDelayMs)

Expand All @@ -80,7 +80,7 @@ describe('Using MetaMask with an existing account', function () {
const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
confirmPassword.sendKeys('correct horse battery staple')

await driver.clickElement(By.css('.first-time-flow__checkbox'))
await driver.clickElement(By.css('.first-time-flow__terms'))

await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
await driver.delay(regularDelayMs)
Expand Down
12 changes: 6 additions & 6 deletions test/e2e/threebox.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('MetaMask', function () {
})

it('clicks the "Import Wallet" option', async function () {
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
await driver.delay(largeDelayMs)
})

Expand All @@ -74,7 +74,7 @@ describe('MetaMask', function () {
})

it('imports a seed phrase', async function () {
const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
await seedTextArea.sendKeys(testSeedPhrase)
await driver.delay(regularDelayMs)

Expand All @@ -83,7 +83,7 @@ describe('MetaMask', function () {
const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
confirmPassword.sendKeys('correct horse battery staple')

await driver.clickElement(By.css('.first-time-flow__checkbox'))
await driver.clickElement(By.css('.first-time-flow__terms'))

await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
await driver.delay(regularDelayMs)
Expand Down Expand Up @@ -170,7 +170,7 @@ describe('MetaMask', function () {
})

it('clicks the "Import Wallet" option', async function () {
await driver2.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
await driver2.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
await driver2.delay(largeDelayMs)
})

Expand All @@ -180,7 +180,7 @@ describe('MetaMask', function () {
})

it('imports a seed phrase', async function () {
const [seedTextArea] = await driver2.findElements(By.css('textarea.first-time-flow__textarea'))
const [seedTextArea] = await driver2.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
await seedTextArea.sendKeys(testSeedPhrase)
await driver2.delay(regularDelayMs)

Expand All @@ -189,7 +189,7 @@ describe('MetaMask', function () {
const [confirmPassword] = await driver2.findElements(By.id('confirm-password'))
confirmPassword.sendKeys('correct horse battery staple')

await driver2.clickElement(By.css('.first-time-flow__checkbox'))
await driver2.clickElement(By.css('.first-time-flow__terms'))

await driver2.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
await driver2.delay(regularDelayMs)
Expand Down
6 changes: 3 additions & 3 deletions test/e2e/web3.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('Using MetaMask with an existing account', function () {
})

it('clicks the "Import Wallet" option', async function () {
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
await driver.delay(largeDelayMs)
})

Expand All @@ -70,7 +70,7 @@ describe('Using MetaMask with an existing account', function () {
})

it('imports a seed phrase', async function () {
const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
await seedTextArea.sendKeys(testSeedPhrase)
await driver.delay(regularDelayMs)

Expand All @@ -79,7 +79,7 @@ describe('Using MetaMask with an existing account', function () {
const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
confirmPassword.sendKeys('correct horse battery staple')

await driver.clickElement(By.css('.first-time-flow__checkbox'))
await driver.clickElement(By.css('.first-time-flow__terms'))

await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
await driver.delay(regularDelayMs)
Expand Down
48 changes: 40 additions & 8 deletions ...st-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default class ImportWithSeedPhrase extends PureComponent {

state = {
seedPhrase: '',
showSeedPhrase: false,
password: '',
confirmPassword: '',
seedPhraseError: '',
Expand Down Expand Up @@ -179,9 +180,15 @@ export default class ImportWithSeedPhrase extends PureComponent {
}))
}

toggleShowSeedPhrase = () => {
this.setState(({ showSeedPhrase }) => ({
showSeedPhrase: !showSeedPhrase,
}))
}

render () {
const { t } = this.context
const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state
const { seedPhraseError, showSeedPhrase, passwordError, confirmPasswordError, termsChecked } = this.state

return (
<form
Expand Down Expand Up @@ -218,12 +225,37 @@ export default class ImportWithSeedPhrase extends PureComponent {
</div>
<div className="first-time-flow__textarea-wrapper">
<label>{ t('walletSeed') }</label>
<textarea
className="first-time-flow__textarea"
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
value={this.state.seedPhrase}
placeholder={t('seedPhrasePlaceholder')}
/>
{showSeedPhrase ? (
<textarea
className="first-time-flow__textarea"
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
value={this.state.seedPhrase}
placeholder={t('seedPhrasePlaceholder')}
/>
) : (
<TextField
className="first-time-flow__textarea first-time-flow__seedphrase"
type="password"
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
value={this.state.seedPhrase}
placeholder={t('seedPhrasePlaceholderPaste')}
/>
)}
<div className="first-time-flow__checkbox-container" onClick={this.toggleShowSeedPhrase}>
<div
className="first-time-flow__checkbox"
tabIndex="0"
role="checkbox"
onKeyPress={this.toggleShowSeedPhrase}
aria-checked={showSeedPhrase}
aria-labelledby="ftf-chk1-label"
>
{showSeedPhrase ? <i className="fa fa-check fa-2x" /> : null}
</div>
<span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
{ t('showSeedPhrase') }
</span>
</div>
</div>
{
seedPhraseError && (
Expand Down Expand Up @@ -258,7 +290,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
/>
<div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
<div
className="first-time-flow__checkbox"
className="first-time-flow__checkbox first-time-flow__terms"
tabIndex="0"
role="checkbox"
onKeyPress={this.onTermsKeyPress}
Expand Down
5 changes: 4 additions & 1 deletion ui/app/pages/first-time-flow/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,14 +77,17 @@
direction: ltr;
font-size: 1rem;
font-family: Roboto;
height: 190px;
border: 1px solid #CDCDCD;
border-radius: 6px;
background-color: #FFFFFF;
padding: 16px;
margin-top: 8px;
}

&__seedphrase {
margin-top: 9px !important;
}

&__breadcrumbs {
margin: 36px 0;
}
Expand Down

0 comments on commit 71e7966

Please sign in to comment.