mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Feature/hide seedphrase when restoring vault (#9329)
* hide seedphrase (by default) with option to show it
This commit is contained in:
ricky
GitHub
parent
449118dfc9
commit
f281df3b36
@ -137,6 +137,8 @@ describe('MetaMask', function () {
|
||||
await restoreSeedLink.click()
|
||||
await driver.delay(regularDelayMs)
|
||||
|
||||
await driver.clickElement(By.css('.import-account__checkbox-container'))
|
||||
|
||||
const seedTextArea = await driver.findElement(By.css('textarea'))
|
||||
await seedTextArea.sendKeys(testSeedPhrase)
|
||||
await driver.delay(regularDelayMs)
|
||||
|
||||
@ -144,6 +144,8 @@ describe('MetaMask', function () {
|
||||
await restoreSeedLink.click()
|
||||
await driver.delay(regularDelayMs)
|
||||
|
||||
await driver.clickElement(By.css('.import-account__checkbox-container'))
|
||||
|
||||
const seedTextArea = await driver.findElement(By.css('textarea'))
|
||||
await seedTextArea.sendKeys(testSeedPhrase)
|
||||
await driver.delay(regularDelayMs)
|
||||
|
||||
@ -193,6 +193,8 @@ describe('MetaMask', function () {
|
||||
await restoreSeedLink.click()
|
||||
await driver.delay(regularDelayMs)
|
||||
|
||||
await driver.clickElement(By.css('.import-account__checkbox-container'))
|
||||
|
||||
const seedTextArea = await driver.findElement(By.css('textarea'))
|
||||
await seedTextArea.sendKeys(testSeedPhrase)
|
||||
await driver.delay(regularDelayMs)
|
||||
|
||||
@ -39,6 +39,7 @@ html {
|
||||
*/
|
||||
.error {
|
||||
color: #f7861c;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
|
||||
@ -243,6 +243,13 @@ export default class ImportWithSeedPhrase extends PureComponent {
|
||||
placeholder={t('seedPhrasePlaceholderPaste')}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
seedPhraseError && (
|
||||
<span className="error">
|
||||
{ seedPhraseError }
|
||||
</span>
|
||||
)
|
||||
}
|
||||
<div className="first-time-flow__checkbox-container" onClick={this.toggleShowSeedPhrase}>
|
||||
<div
|
||||
className="first-time-flow__checkbox"
|
||||
@ -259,13 +266,6 @@ export default class ImportWithSeedPhrase extends PureComponent {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
seedPhraseError && (
|
||||
<span className="error">
|
||||
{ seedPhraseError }
|
||||
</span>
|
||||
)
|
||||
}
|
||||
<TextField
|
||||
id="password"
|
||||
label={t('newPassword')}
|
||||
|
||||
@ -62,134 +62,167 @@
|
||||
}
|
||||
}
|
||||
|
||||
.import-account__title {
|
||||
color: #1b344d;
|
||||
font-size: 40px;
|
||||
line-height: 51px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.import-account__back-button {
|
||||
margin-bottom: 18px;
|
||||
color: #22232c;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.import-account__secret-phrase {
|
||||
height: 190px;
|
||||
width: 495px;
|
||||
border: 1px solid #cdcdcd;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
padding: 17px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.import-account__secret-phrase::placeholder {
|
||||
color: #9b9b9b;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.import-account__faq-link {
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.import-account__selector-label {
|
||||
color: #1b344d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.import-account__dropdown {
|
||||
width: 325px;
|
||||
border: 1px solid #cdcdcd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
margin-top: 14px;
|
||||
color: #5b5d67;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
padding: 14px 21px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.import-account__description-text {
|
||||
color: #757575;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
.import-account__input-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.import-account__input-error-message {
|
||||
margin-top: 10px;
|
||||
width: 422px;
|
||||
color: #ff001f;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.import-account__input-label {
|
||||
margin-bottom: 9px;
|
||||
color: #1b344d;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.import-account__input-label__disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.import-account__input {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.import-account__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.import-account__file-input {
|
||||
display: none;
|
||||
}
|
||||
.import-account {
|
||||
&__title {
|
||||
color: #1b344d;
|
||||
font-size: 40px;
|
||||
line-height: 51px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.import-account__file-input-label {
|
||||
height: 53px;
|
||||
width: 148px;
|
||||
border: 1px solid #1b344d;
|
||||
border-radius: 4px;
|
||||
color: #1b344d;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
&__back-button {
|
||||
margin-bottom: 18px;
|
||||
color: #22232c;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.import-account__file-picker-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
&__secret-phrase {
|
||||
height: 190px;
|
||||
width: 495px;
|
||||
border: 1px solid #cdcdcd;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
padding: 17px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.import-account__file-name {
|
||||
color: #000;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
margin-left: 22px;
|
||||
&__secret-phrase::placeholder {
|
||||
color: #9b9b9b;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
&__faq-link {
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
&__selector-label {
|
||||
color: #1b344d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
width: 325px;
|
||||
border: 1px solid #cdcdcd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
margin-top: 14px;
|
||||
color: #5b5d67;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
padding: 14px 21px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__description-text {
|
||||
color: #757575;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
&__input-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&__input-error-message {
|
||||
margin-top: 10px;
|
||||
width: 422px;
|
||||
color: #ff001f;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&__input-label {
|
||||
margin-bottom: 9px;
|
||||
color: #1b344d;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
&__checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
background: #fff;
|
||||
border: 1px solid #cdcdcd;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
border: 1.5px solid #2f9ae0;
|
||||
}
|
||||
|
||||
.fa-check {
|
||||
color: #2f9ae0;
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox-label {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
font-size: 18px;
|
||||
color: #939090;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
&__file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__file-input-label {
|
||||
height: 53px;
|
||||
width: 148px;
|
||||
border: 1px solid #1b344d;
|
||||
border-radius: 4px;
|
||||
color: #1b344d;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__file-picker-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__file-name {
|
||||
color: #000;
|
||||
font-size: 18px;
|
||||
line-height: 23px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal-seed {
|
||||
|
||||
@ -26,6 +26,7 @@ class RestoreVaultPage extends Component {
|
||||
|
||||
state = {
|
||||
seedPhrase: '',
|
||||
showSeedPhrase: false,
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
seedPhraseError: null,
|
||||
@ -104,9 +105,16 @@ class RestoreVaultPage extends Component {
|
||||
return passwordError || confirmPasswordError || seedPhraseError
|
||||
}
|
||||
|
||||
toggleShowSeedPhrase = () => {
|
||||
this.setState(({ showSeedPhrase }) => ({
|
||||
showSeedPhrase: !showSeedPhrase,
|
||||
}))
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
seedPhrase,
|
||||
showSeedPhrase,
|
||||
password,
|
||||
confirmPassword,
|
||||
seedPhraseError,
|
||||
@ -140,16 +148,41 @@ class RestoreVaultPage extends Component {
|
||||
</div>
|
||||
<div className="import-account__input-wrapper">
|
||||
<label className="import-account__input-label">Wallet Seed</label>
|
||||
<textarea
|
||||
className="import-account__secret-phrase"
|
||||
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
|
||||
value={this.state.seedPhrase}
|
||||
placeholder={this.context.t('separateEachWord')}
|
||||
/>
|
||||
{showSeedPhrase ? (
|
||||
<textarea
|
||||
className="import-account__secret-phrase"
|
||||
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
|
||||
value={seedPhrase}
|
||||
placeholder={this.context.t('separateEachWord')}
|
||||
/>
|
||||
) : (
|
||||
<TextField
|
||||
className="import-account__textarea import-account__seedphrase"
|
||||
type="password"
|
||||
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
|
||||
value={seedPhrase}
|
||||
placeholder={t('seedPhrasePlaceholderPaste')}
|
||||
/>
|
||||
)}
|
||||
<span className="error">
|
||||
{ seedPhraseError }
|
||||
</span>
|
||||
<div className="import-account__checkbox-container" onClick={this.toggleShowSeedPhrase}>
|
||||
<div
|
||||
className="import-account__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="import-account__checkbox-label">
|
||||
{ t('showSeedPhrase') }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="error">
|
||||
{ seedPhraseError }
|
||||
</span>
|
||||
<TextField
|
||||
id="password"
|
||||
label={t('newPassword')}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user