Feature/hide seedphrase when restoring vault (#9329)

* hide seedphrase (by default) with option to show it

test/e2e/address-book.spec.js

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

test/e2e/metamask-responsive-ui.spec.js

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

test/e2e/metamask-ui.spec.js

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

ui/app/css/base-styles.scss

@@ -39,6 +39,7 @@ html {
 */
 .error {
   color: #f7861c;
+  margin-top: 3px;
   margin-bottom: 9px;
 }
 

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

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

ui/app/pages/keychains/index.scss

@@ -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 {
+.import-account {
-  display: none;
+  &__title {
-}
+    color: #1b344d;
+    font-size: 40px;
+    line-height: 51px;
+    margin-bottom: 10px;
+  }
 
-.import-account__file-input-label {
+  &__back-button {
-  height: 53px;
+    margin-bottom: 18px;
-  width: 148px;
+    color: #22232c;
-  border: 1px solid #1b344d;
+    font-size: 16px;
-  border-radius: 4px;
+    line-height: 21px;
-  color: #1b344d;
+    position: absolute;
-  font-size: 18px;
+    top: -25px;
-  display: flex;
+  }
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
 
-.import-account__file-picker-wrapper {
+  &__secret-phrase {
-  display: flex;
+    height: 190px;
-  flex-flow: row nowrap;
+    width: 495px;
-  align-items: center;
+    border: 1px solid #cdcdcd;
-}
+    border-radius: 6px;
+    background-color: #fff;
+    padding: 17px;
+    font-size: 16px;
+  }
 
-.import-account__file-name {
+  &__secret-phrase::placeholder {
-  color: #000;
+    color: #9b9b9b;
-  font-size: 18px;
+    font-weight: 200;
-  line-height: 23px;
+  }
-  margin-left: 22px;
+
+  &__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 {

ui/app/pages/keychains/restore-vault.js

@@ -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
+              {showSeedPhrase ? (
-                className="import-account__secret-phrase"
+                <textarea
-                onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
+                  className="import-account__secret-phrase"
-                value={this.state.seedPhrase}
+                  onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
-                placeholder={this.context.t('separateEachWord')}
+                  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')}