Add recover and backup tempaltes

3 files changed, 42 insertions, 18 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 8267658b1..cbc6b3a3c 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -83,6 +83,9 @@
   "buyCoinbaseExplainer": {
     "message": "Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin."
   },
+  "ok": {
+    message: "Ok"
+  },
   "cancel": {
     "message": "Cancel"
   },
@@ -244,6 +247,12 @@
   "enterPasswordConfirm": {
     "message": "Enter your password to confirm"
   },
+  "passwordNotLongEnough": {
+    "message": "Password not long enough"
+  },
+  "passwordsDontMatch": {
+    "message": "Passwords Don't Match"
+  },
   "etherscanView": {
     "message": "View account on Etherscan"
   },
@@ -583,12 +592,18 @@
   "restoreFromSeed": {
     "message": "Restore from seed phrase"
   },
+  "restoreVault": {
+    "message": "Restore Vault"
+  },
   "required": {
     "message": "Required"
   },
   "retryWithMoreGas": {
     "message": "Retry with a higher gas price here"
   },
+  "walletSeed": {
+    "message": "Wallet Seed"
+  },
   "revealSeedWords": {
     "message": "Reveal Seed Words"
   },
@@ -639,6 +654,9 @@
   "secretPhrase": {
     "message": "Enter your secret twelve word phrase here to restore your vault."
   },
+  "newPassword8Chars": {
+    "message": "New Password (min 8 chars)"
+  },
   "seedPhraseReq": {
     "message": "seed phrases are 12 words long"
   },
diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js
index 4335186a5..bc5339549 100644
--- a/ui/app/keychains/hd/recover-seed/confirmation.js
+++ b/ui/app/keychains/hd/recover-seed/confirmation.js
@@ -4,6 +4,7 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
+const t = require('../../../../i18n')
 
 module.exports = connect(mapStateToProps)(RevealSeedConfirmation)
 
@@ -49,13 +50,13 @@ RevealSeedConfirmation.prototype.render = function () {
         },
       }, [
 
-        h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
+        h('h4', t('revealSeedWordsWarning')),
 
         // confirmation
         h('input.large-input.letter-spacey', {
           type: 'password',
           id: 'password-box',
-          placeholder: 'Enter your password to confirm',
+          placeholder: t('enterPasswordConfirm'),
           onKeyPress: this.checkConfirmation.bind(this),
           style: {
             width: 260,
@@ -91,7 +92,7 @@ RevealSeedConfirmation.prototype.render = function () {
         ),
 
         props.inProgress && (
-          h('span.in-progress-notification', 'Generating Seed...')
+          h('span.in-progress-notification', t('generatingSeed'))
         ),
       ]),
     ])
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index cb4088f61..5e4e004cf 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -2,6 +2,7 @@ const inherits = require('util').inherits
 const PersistentForm = require('../../../lib/persistent-form')
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const t = require('../../../i18n')
 const actions = require('../../actions')
 
 module.exports = connect(mapStateToProps)(RestoreVaultScreen)
@@ -36,23 +37,23 @@ RestoreVaultScreen.prototype.render = function () {
           padding: 6,
         },
       }, [
-        'Restore Vault',
+        t('restoreVault'),
       ]),
 
       // wallet seed entry
-      h('h3', 'Wallet Seed'),
+      h('h3', t('walletSeed')),
       h('textarea.twelve-word-phrase.letter-spacey', {
         dataset: {
           persistentFormId: 'wallet-seed',
         },
-        placeholder: 'Enter your secret twelve word phrase here to restore your vault.',
+        placeholder: t('secretPhrase'),
       }),
 
       // password
       h('input.large-input.letter-spacey', {
         type: 'password',
         id: 'password-box',
-        placeholder: 'New Password (min 8 chars)',
+        placeholder: t('newPassword8Chars'),
         dataset: {
           persistentFormId: 'password',
         },
@@ -66,7 +67,7 @@ RestoreVaultScreen.prototype.render = function () {
       h('input.large-input.letter-spacey', {
         type: 'password',
         id: 'password-box-confirm',
-        placeholder: 'Confirm Password',
+        placeholder: t('confirmPassword'),
         onKeyPress: this.createOnEnter.bind(this),
         dataset: {
           persistentFormId: 'password-confirmation',
@@ -93,16 +94,20 @@ RestoreVaultScreen.prototype.render = function () {
         // cancel
         h('button.primary', {
           onClick: this.showInitializeMenu.bind(this),
-        }, 'CANCEL'),
+          style: {
+            textTransform: 'uppercase',
+          },
+        }, t('cancel')),
 
         // submit
         h('button.primary', {
           onClick: this.createNewVaultAndRestore.bind(this),
-        }, 'OK'),
-
+          style: {
+            textTransform: 'uppercase',
+          },
+        }, t('ok')),
       ]),
     ])
-
   )
 }
 
@@ -131,13 +136,13 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   var passwordConfirmBox = document.getElementById('password-box-confirm')
   var passwordConfirm = passwordConfirmBox.value
   if (password.length < 8) {
-    this.warning = 'Password not long enough'
+    this.warning = t('passwordNotLongEnough')
 
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   if (password !== passwordConfirm) {
-    this.warning = 'Passwords don\'t match'
+    this.warning = t('passwordsDontMatch')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
@@ -147,18 +152,18 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
 
   // true if the string has more than a space between words.
   if (seed.split('  ').length > 1) {
-    this.warning = 'there can only be a space between words'
+    this.warning = t('spaceBetween')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   // true if seed contains a character that is not between a-z or a space
   if (!seed.match(/^[a-z ]+$/)) {
-    this.warning = 'seed words only have lowercase characters'
-    this.props.dispatch(actions.displayWarning(this.warning))
+    this.warning = t('loweCaseWords')
+      this.props.dispatch(actions.displayWarning(this.warning))
     return
   }
   if (seed.split(' ').length !== 12) {
-    this.warning = 'seed phrases are 12 words long'
+    this.warning = t('seedPhraseReq')
     this.props.dispatch(actions.displayWarning(this.warning))
     return
   }