[#923] Add translation for the validation error

@FrailWords

5 files changed, 12 insertions, 5 deletions

diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 3f050e67..9df1867e 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -86,7 +86,10 @@
       "paragraph1": "You will need a backup account. Choose an alternative email address you use regularly.",
       "paragraph2": "Instructions to recover your password will be sent to this email address, save it.",
       "input-label": "Type your backup account",
-      "button": "Add Account"
+      "button": "Add Account",
+      "error": {
+        "invalid-email": "Please enter a valid email address"
+      }
     },
     "back-to-inbox": "Back to my inbox",
     "footer-text": "Product in development. Feedback and issues to",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index 431b8f82..ac4fe10d 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -86,7 +86,10 @@
       "paragraph1": "Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.",
       "paragraph2": "Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.",
       "input-label": "Digite seu e-mail de recuperação",
-      "button": "Adicionar e-mail"
+      "button": "Adicionar e-mail",
+      "error": {
+        "invalid-email": "Por favor informe um e-mail válido"
+      }
     },
     "back-to-inbox": "Voltar",
     "footer-text": "Produto em desenvolvimento. Reporte problemas através do",
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 07a36283..c7554cfb 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -39,8 +39,9 @@ export class Page extends React.Component {
   validateEmail(event) {
     const validEmail = validator.isEmail(event.target.value);
     const emptyEmail = validator.isEmpty(event.target.value);
+    const t = this.props.t;
     this.setState({
-      error: !emptyEmail && !validEmail ? 'Your email is invalid' : '',
+      error: !emptyEmail && !validEmail ? t('backup-account.error.invalid-email') : '',
       submitButtonDisabled: !validEmail || emptyEmail
     });
   }
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 9a79392c..f3590ed8 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -37,7 +37,7 @@ describe('BackupAccount', () => {
 
     it('should set error in state and disabled submit button when email is invalid', () => {
       pageInstance.validateEmail({ target: { value: 'test' } });
-      expect(pageInstance.state.error).toEqual('Your email is invalid');
+      expect(pageInstance.state.error).toEqual('backup-account.error.invalid-email');
       expect(page.find('SubmitButton').props().disabled).toEqual(true);
     });
 
diff --git a/web-ui/test/integration/backup_account.spec.js b/web-ui/test/integration/backup_account.spec.js
index 2a37442e..eb247653 100644
--- a/web-ui/test/integration/backup_account.spec.js
+++ b/web-ui/test/integration/backup_account.spec.js
@@ -22,7 +22,7 @@ describe('Backup account email validation', () => {
 
     it('shows error and disables submit button on invalid email', () => {
       backupAccountPage.find('input').simulate('change', {target: {value: 'test'}});
-      expect(backupAccountPage.find('InputField').props().errorText).toEqual('Your email is invalid');
+      expect(backupAccountPage.find('InputField').props().errorText).toEqual('Please enter a valid email address');
       expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
     });