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,23 +62,30 @@
   }
 }
 
-.import-account__title {
+@media only screen and (max-width: 575px) {
+  .import-account__input {
+    width: 100%;
+  }
+}
+
+.import-account {
+  &__title {
     color: #1b344d;
     font-size: 40px;
     line-height: 51px;
     margin-bottom: 10px;
-}
+  }
 
-.import-account__back-button {
+  &__back-button {
     margin-bottom: 18px;
     color: #22232c;
     font-size: 16px;
     line-height: 21px;
     position: absolute;
     top: -25px;
-}
+  }
 
-.import-account__secret-phrase {
+  &__secret-phrase {
     height: 190px;
     width: 495px;
     border: 1px solid #cdcdcd;
@@ -86,24 +93,24 @@
     background-color: #fff;
     padding: 17px;
     font-size: 16px;
-}
+  }
 
-.import-account__secret-phrase::placeholder {
+  &__secret-phrase::placeholder {
     color: #9b9b9b;
     font-weight: 200;
-}
+  }
 
-.import-account__faq-link {
+  &__faq-link {
     font-size: 18px;
     line-height: 23px;
-}
+  }
 
-.import-account__selector-label {
+  &__selector-label {
     color: #1b344d;
     font-size: 16px;
-}
+  }
 
-.import-account__dropdown {
+  &__dropdown {
     width: 325px;
     border: 1px solid #cdcdcd;
     border-radius: 4px;
@@ -117,55 +124,80 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;
-}
+  }
 
-.import-account__description-text {
+  &__description-text {
     color: #757575;
     font-size: 18px;
     line-height: 23px;
     margin-top: 21px;
-}
+  }
 
-.import-account__input-wrapper {
+  &__input-wrapper {
     display: flex;
     flex-flow: column nowrap;
     margin-top: 30px;
-}
+  }
 
-.import-account__input-error-message {
+  &__input-error-message {
     margin-top: 10px;
     width: 422px;
     color: #ff001f;
     font-size: 16px;
     line-height: 21px;
-}
+  }
 
-.import-account__input-label {
+  &__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 {
+  &__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;
-}
+  }
 
-.import-account__file-input-label {
+  &__file-input-label {
     height: 53px;
     width: 148px;
     border: 1px solid #1b344d;
@@ -177,19 +209,20 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-}
+  }
 
-.import-account__file-picker-wrapper {
+  &__file-picker-wrapper {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-}
+  }
 
-.import-account__file-name {
+  &__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>
+              {showSeedPhrase ? (
                 <textarea
                   className="import-account__secret-phrase"
                   onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
-                value={this.state.seedPhrase}
+                  value={seedPhrase}
                   placeholder={this.context.t('separateEachWord')}
                 />
-            </div>
+              ) : (
+                <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>
             <TextField
               id="password"
               label={t('newPassword')}