m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Update Seed Phrase Functionality on Account Import (#8730)

Browse Source 
Update seed phrase functionality to be able to conceal seed phrase (as a password field) so it remains hidden on screen.
This commit is contained in:
ricky 2020-06-11 10:24:13 -04:00 committed by GitHub
parent d0a28087dc
commit 71e7966b6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 70 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/_locales/en/messages.json
View File

@ -370,7 +370,7 @@
"message": "Confirmed"
},
"confirmPassword": {
"message": "Confirm Password"
"message": "Confirm password"
},
"confirmSecretBackupPhrase": {
"message": "Confirm your Secret Backup Phrase"
@ -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"
@ -986,7 +986,7 @@
"message": "New Contract"
},
"newPassword": {
"message": "New Password (min 8 chars)"
"message": "New password (min 8 chars)"
},
"newNetwork": {
"message": "New Network"
@ -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"
},
@ -1702,7 +1708,7 @@
"message": "Visit our web site"
},
"walletSeed": {
"message": "Wallet Seed"
"message": "Seed phrase"
},
"welcomeBack": {
"message": "Welcome Back!"

6
test/e2e/from-import-ui.spec.js
View File

@ -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)
})
@ -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)
@ -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)

6
test/e2e/send-edit.spec.js
View File

@ -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)
})
@ -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)
@ -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)

12
test/e2e/threebox.spec.js
View File

@ -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)
})
@ -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)
@ -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)
@ -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)
})
@ -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)
@ -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)

6
test/e2e/web3.spec.js
View File

@ -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)
})
@ -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)
@ -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)

36
ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
View File

@ -23,6 +23,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
state = {
seedPhrase: '',
showSeedPhrase: false,
password: '',
confirmPassword: '',
seedPhraseError: '',
@ -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
@ -218,12 +225,37 @@ export default class ImportWithSeedPhrase extends PureComponent {
</div>
<div className="first-time-flow__textarea-wrapper">
<label>{ t('walletSeed') }</label>
{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 && (
@ -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}

5
ui/app/pages/first-time-flow/index.scss
View File

@ -77,7 +77,6 @@
direction: ltr;
font-size: 1rem;
font-family: Roboto;
height: 190px;
border: 1px solid #CDCDCD;
border-radius: 6px;
background-color: #FFFFFF;
@ -85,6 +84,10 @@
margin-top: 8px;
}
&__seedphrase {
margin-top: 9px !important;
}
&__breadcrumbs {
margin: 36px 0;
}