Updates the i18next to latest version

See: #727

28 files changed, 135 insertions, 83 deletions

diff --git a/web-ui/app/js/helpers/monitored_ajax.js b/web-ui/app/js/helpers/monitored_ajax.js
index 061806fc..bbf85c45 100644
--- a/web-ui/app/js/helpers/monitored_ajax.js
+++ b/web-ui/app/js/helpers/monitored_ajax.js
@@ -49,7 +49,7 @@ define(['page/events', 'views/i18n', 'helpers/browser'], function (events, i18n,
       if (!config.skipErrorMessage) {
         var msg = (xmlhttprequest.responseJSON && xmlhttprequest.responseJSON.message) ||
           messages[textstatus] || messages.error;
-        on.trigger(document, events.ui.userAlerts.displayMessage, {message: i18n(msg), class: 'error'});
+        on.trigger(document, events.ui.userAlerts.displayMessage, {message: i18n.t(msg), class: 'error'});
       }
 
       if (xmlhttprequest.status === 302) {
diff --git a/web-ui/app/js/helpers/view_helper.js b/web-ui/app/js/helpers/view_helper.js
index f8152ff7..c12e6aaf 100644
--- a/web-ui/app/js/helpers/view_helper.js
+++ b/web-ui/app/js/helpers/view_helper.js
@@ -72,7 +72,7 @@ define(
   }
 
   function prependFrom(mail) {
-    return i18n(
+    return i18n.t(
       'On __date__, <__from__> wrote:\n',
       {'date': new Date(mail.header.date).toString(), 'from': mail.header.from}
     );
diff --git a/web-ui/app/js/mail_view/ui/forward_box.js b/web-ui/app/js/mail_view/ui/forward_box.js
index f767915c..970fad7f 100644
--- a/web-ui/app/js/mail_view/ui/forward_box.js
+++ b/web-ui/app/js/mail_view/ui/forward_box.js
@@ -31,7 +31,7 @@ define(
     return defineComponent(forwardBox, withHideAndShow, withComposeInline);
 
     function forwardBox() {
-      var fwd = function(v) { return i18n('fwd') + ': ' + v; };
+      var fwd = function(v) { return i18n.t('fwd') + v; };
 
       this.fetchTargetMail = function (ev) {
         this.trigger(document, events.mail.want, { mail: this.attr.ident, caller: this });
diff --git a/web-ui/app/js/mail_view/ui/reply_box.js b/web-ui/app/js/mail_view/ui/reply_box.js
index ba306d7f..fdc9dd0f 100644
--- a/web-ui/app/js/mail_view/ui/reply_box.js
+++ b/web-ui/app/js/mail_view/ui/reply_box.js
@@ -46,7 +46,7 @@ define(
         }
       };
 
-      var re = function(v) { return i18n('re') + v; };
+      var re = function(v) { return i18n.t('re') + v; };
 
       this.setupReplyBox = function() {
         var recipients, body;
diff --git a/web-ui/app/js/mail_view/ui/send_button.js b/web-ui/app/js/mail_view/ui/send_button.js
index c4cf86dc..581a244a 100644
--- a/web-ui/app/js/mail_view/ui/send_button.js
+++ b/web-ui/app/js/mail_view/ui/send_button.js
@@ -89,7 +89,7 @@ define([
         }.bind(this)));
 
         this.disableButton();
-        this.$node.text(viewHelper.i18n('sending-mail'));
+        this.$node.text(viewHelper.i18n.t('sending-mail'));
 
         this.attr.sendingInProgress = true;
 
@@ -99,7 +99,7 @@ define([
       this.resetButton = function () {
         this.attr.sendingInProgress = false;
         this.attr.uploading = false;
-        this.$node.html(viewHelper.i18n('send-button'));
+        this.$node.html(viewHelper.i18n.t('send-button'));
         this.enableButton();
       };
 
diff --git a/web-ui/app/js/main.js b/web-ui/app/js/main.js
index e093e790..b8836a6b 100644
--- a/web-ui/app/js/main.js
+++ b/web-ui/app/js/main.js
@@ -38,7 +38,9 @@ requirejs.config({
     'search': 'js/search',
     'foundation': 'js/foundation',
     'features': 'js/features/features',
-    'i18next': 'bower_components/i18next/i18next.amd',
+    'i18next': 'bower_components/i18next/i18next',
+    'i18nextXHRBackend': 'bower_components/i18next-xhr-backend/i18nextXHRBackend',
+    'i18nextBrowserLanguageDetector': 'bower_components/i18next-browser-languagedetector/i18nextBrowserLanguageDetector',
     'quoted-printable': 'bower_components/quoted-printable',
     'utf8': 'bower_components/utf8',
     'user_settings': 'js/user_settings'
@@ -68,6 +70,7 @@ require(
 
   function(compose, registry, advice, withLogging, debug, events, initializeDefault, _monkeyPatched) {
     'use strict';
+
     window.Pixelated = window.Pixelated || {};
     window.Pixelated.events = events;
 
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
index 41de162c..a60cce03 100644
--- a/web-ui/app/js/mixins/with_mail_edit_base.js
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -147,7 +147,7 @@ define(
                 } else {
                     this.trigger(
                         events.ui.userAlerts.displayMessage,
-                        {message: i18n('One or more of the recipients are not valid emails')}
+                        {message: i18n.t('One or more of the recipients are not valid emails')}
                     );
                     this.trigger(events.mail.send_failed);
                 }
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 965fb577..ecaedfd8 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -97,46 +97,48 @@ define(
     'use strict';
     function initialize(path) {
       viewI18n.init(path + '/assets/');
-      paneContractExpand.attachTo(document);
+      viewI18n.loaded(function() {
+        paneContractExpand.attachTo(document);
 
-      userAlerts.attachTo('#user-alerts');
+        userAlerts.attachTo('#user-alerts');
 
-      mailList.attachTo('#mail-list');
-      mailListActions.attachTo('#list-actions');
+        mailList.attachTo('#mail-list');
+        mailListActions.attachTo('#list-actions');
 
-      searchTrigger.attachTo('#search-trigger');
-      resultsHighlighter.attachTo(document);
+        searchTrigger.attachTo('#search-trigger');
+        resultsHighlighter.attachTo(document);
 
-      mailSender.attachTo(document);
+        mailSender.attachTo(document);
 
-      mailService.attachTo(document);
-      deleteService.attachTo(document);
-      recoverService.attachTo(document);
+        mailService.attachTo(document);
+        deleteService.attachTo(document);
+        recoverService.attachTo(document);
 
-      tags.attachTo(document);
-      tagList.attachTo('#tag-list');
+        tags.attachTo(document);
+        tagList.attachTo('#tag-list');
 
-      router.attachTo(document);
+        router.attachTo(document);
 
-      rightPaneDispatcher.attachTo(document);
-      middlePaneDispatcher.attachTo(document);
-      leftPaneDispatcher.attachTo(document);
+        rightPaneDispatcher.attachTo(document);
+        middlePaneDispatcher.attachTo(document);
+        leftPaneDispatcher.attachTo(document);
 
-      offCanvas.attachTo(document);
-      userSettings.attachTo(document);
-      userSettingsIcon.attachTo('#user-settings-icon');
-      logout.attachTo('#logout');
-      logoutShortcut.attachTo('#logout-shortcut');
-      version.attachTo('.version');
+        offCanvas.attachTo(document);
+        userSettings.attachTo(document);
+        userSettingsIcon.attachTo('#user-settings-icon');
+        logout.attachTo('#logout');
+        logoutShortcut.attachTo('#logout-shortcut');
+        version.attachTo('.version');
 
-      feedback.attachTo('#feedback');
-      feedbackSender.attachTo(document);
+        feedback.attachTo('#feedback');
+        feedbackSender.attachTo(document);
 
-      unreadCountTitle.attachTo(document);
+        unreadCountTitle.attachTo(document);
 
-      pixLogo.attachTo(document);
+        pixLogo.attachTo(document);
 
-      $.ajaxSetup({headers: {'X-XSRF-TOKEN': browser.getCookie('XSRF-TOKEN')}});
+        $.ajaxSetup({headers: {'X-XSRF-TOKEN': browser.getCookie('XSRF-TOKEN')}});
+      });
     }
 
     return initialize;
diff --git a/web-ui/app/js/services/delete_service.js b/web-ui/app/js/services/delete_service.js
index 4097ea7e..0dfc1bdb 100644
--- a/web-ui/app/js/services/delete_service.js
+++ b/web-ui/app/js/services/delete_service.js
@@ -22,14 +22,14 @@ define(['flight/lib/component', 'page/events', 'views/i18n'], function (defineCo
 
     this.successDeleteMessageFor = function(mail) {
       return mail.isInTrash() ?
-        i18n('delete-single') :
-        i18n('trash-single');
+        i18n.t('delete-single') :
+        i18n.t('trash-single');
     };
 
     this.successDeleteManyMessageFor = function(mail) {
       return mail.isInTrash() ?
-        i18n('delete-bulk') :
-        i18n('trash-bulk');
+        i18n.t('delete-bulk') :
+        i18n.t('trash-bulk');
     };
 
     this.deleteEmail = function (event, data) {
diff --git a/web-ui/app/js/services/mail_service.js b/web-ui/app/js/services/mail_service.js
index 412451cb..529a43b8 100644
--- a/web-ui/app/js/services/mail_service.js
+++ b/web-ui/app/js/services/mail_service.js
@@ -60,9 +60,9 @@ define(
         };
 
         var failure = function (resp) {
-          var msg = i18n('Could not update mail tags');
+          var msg = i18n.t('Could not update mail tags');
           if (resp.status === 403) {
-            msg = i18n('Invalid tag name');
+            msg = i18n.t('Invalid tag name');
           }
           this.trigger(document, events.ui.userAlerts.displayMessage, { message: msg });
         };
@@ -128,7 +128,7 @@ define(
           var mails = dataToRecover.mails || [dataToRecover.mail];
 
           this.refreshMails();
-          this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(dataToRecover.successMessage)});
+          this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n.t(dataToRecover.successMessage)});
           this.trigger(document, events.ui.mails.uncheckAll);
         }, this);
       };
@@ -136,7 +136,7 @@ define(
       this.triggerArchived = function (dataToArchive) {
         return _.bind(function (response) {
           this.refreshMails();
-          this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(response.successMessage)});
+          this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n.t(response.successMessage)});
           this.trigger(document, events.ui.mails.uncheckAll);
         }, this);
       };
@@ -151,14 +151,14 @@ define(
           contentType: 'application/json; charset=utf-8',
           data: JSON.stringify({idents: mailIdents})
         }).done(this.triggerArchived(dataToArchive))
-          .fail(this.errorMessage(i18n('Could not archive emails')));
+          .fail(this.errorMessage(i18n.t('Could not archive emails')));
       };
 
       this.deleteMail = function (ev, data) {
         monitoredAjax(this, '/mail/' + data.mail.ident,
           {type: 'DELETE'})
           .done(this.triggerDeleted(data))
-          .fail(this.errorMessage(i18n('Could not delete email')));
+          .fail(this.errorMessage(i18n.t('Could not delete email')));
       };
 
       this.deleteManyMails = function (ev, data) {
@@ -173,7 +173,7 @@ define(
           contentType: 'application/json; charset=utf-8',
           data: JSON.stringify({idents: mailIdents})
         }).done(this.triggerDeleted(dataToDelete))
-          .fail(this.errorMessage(i18n('Could not delete emails')));
+          .fail(this.errorMessage(i18n.t('Could not delete emails')));
       };
 
       this.recoverManyMails = function (ev, data) {
@@ -188,7 +188,7 @@ define(
           contentType: 'application/json; charset=utf-8',
           data: JSON.stringify({idents: mailIdents})
         }).done(this.triggerRecovered(dataToRecover))
-          .fail(this.errorMessage(i18n('Could not move emails to inbox')));
+          .fail(this.errorMessage(i18n.t('Could not move emails to inbox')));
       };
 
       function compileQuery(data) {
@@ -246,7 +246,7 @@ define(
             this.trigger(document, events.mails.available, _.merge({tag: this.attr.currentTag, forSearch: this.attr.lastQuery }, this.parseMails(data)));
           }.bind(this))
           .fail(function () {
-            this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n('Could not fetch messages'), class: 'error' });
+            this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n.t('Could not fetch messages'), class: 'error' });
           }.bind(this));
       };
 
diff --git a/web-ui/app/js/services/recover_service.js b/web-ui/app/js/services/recover_service.js
index 62fcf1f9..d7d9cdc9 100644
--- a/web-ui/app/js/services/recover_service.js
+++ b/web-ui/app/js/services/recover_service.js
@@ -25,7 +25,7 @@ define(['flight/lib/component', 'page/events', 'views/i18n'], function (defineCo
 
       this.trigger(document, events.mail.recoverMany, {
         mails: emails,
-        successMessage: i18n('Your messages were moved to inbox!')
+        successMessage: i18n.t('Your messages were moved to inbox!')
       });
 
     };
diff --git a/web-ui/app/js/tags/ui/tag.js b/web-ui/app/js/tags/ui/tag.js
index ba6dfe61..37814cfc 100644
--- a/web-ui/app/js/tags/ui/tag.js
+++ b/web-ui/app/js/tags/ui/tag.js
@@ -78,7 +78,7 @@ define(
 
       this.viewFor = function (tag, template, currentTag) {
         return template({
-          tagName: tag.default ? i18n('tags.' + tag.name) : tag.name,
+          tagName: tag.default ? i18n.t('tags.' + tag.name) : tag.name,
           ident: this.hashIdent(tag.ident),
           count: this.badgeType(tag) === 'total' ? tag.counts.total : (tag.counts.total - tag.counts.read),
           displayBadge: this.displayBadge(tag),
diff --git a/web-ui/app/js/views/i18n.js b/web-ui/app/js/views/i18n.js
index 6a39ee89..f843b845 100644
--- a/web-ui/app/js/views/i18n.js
+++ b/web-ui/app/js/views/i18n.js
@@ -14,15 +14,49 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
-define(['i18next'], function(i18n) {
+define(['i18next',
+        'i18nextXHRBackend',
+        'i18nextBrowserLanguageDetector'],
+function(i18n, i18n_backend, I18n_detector) {
   'use strict';
 
-  var self = i18n.t;
+  var detector = new I18n_detector();
+  var detect = detector.detect.bind(detector);
 
-  self.init = function(path) {
-    i18n.init({detectLngQS: 'lang', fallbackLng: 'en_US', lowerCaseLng: true, getAsync: false, resGetPath: path + 'locales/__lng__/__ns__.json'});
-    Handlebars.registerHelper('t', self.bind(self));
+  detector.detect = function(detectionOrder)  {
+    var result = detect(detectionOrder);
+    return result.replace('-', '_');
   };
 
-  return self;
+  function t(i18n_key) {
+    var result = i18n.t(i18n_key);
+    var safe_string = new Handlebars.SafeString(result);
+    return safe_string.string;
+  }
+
+  function loaded(callback) {
+    i18n.on('loaded', function(loaded) {
+        callback();
+    });
+  }
+
+  function init(path) {
+    i18n
+      .use(i18n_backend)
+      .use(detector)
+      .init({
+        fallbackLng: 'en_US',
+        backend: {
+          loadPath: path + 'locales/{{lng}}/{{ns}}.json'
+        }
+      });
+    // Handlebars.registerHelper('t', self.bind(self));
+    Handlebars.registerHelper('t', t);
+  }
+
+  return {
+    t: t,
+    init: init,
+    loaded: loaded
+  };
 });
diff --git a/web-ui/app/locales/de_DE/translation.json b/web-ui/app/locales/de_DE/translation.json
index 357187b0..c625790c 100644
--- a/web-ui/app/locales/de_DE/translation.json
+++ b/web-ui/app/locales/de_DE/translation.json
@@ -1,7 +1,7 @@
 {
     "compose": "Compose",
     "re": "Re: ",
-    "Fwd: ": "Fwd: ",
+    "fwd": "Fwd: ",
     "Your message was moved to trash!": "Your message was moved to trash!",
     "Your message was archived": "Your message was archived",
     "Your message was permanently deleted!": "Your message was permanently deleted!",
diff --git a/web-ui/app/locales/es_ES/translation.json b/web-ui/app/locales/es_ES/translation.json
index 357187b0..c625790c 100644
--- a/web-ui/app/locales/es_ES/translation.json
+++ b/web-ui/app/locales/es_ES/translation.json
@@ -1,7 +1,7 @@
 {
     "compose": "Compose",
     "re": "Re: ",
-    "Fwd: ": "Fwd: ",
+    "fwd": "Fwd: ",
     "Your message was moved to trash!": "Your message was moved to trash!",
     "Your message was archived": "Your message was archived",
     "Your message was permanently deleted!": "Your message was permanently deleted!",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index d20b02b3..80da4a93 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -2,6 +2,7 @@
     "compose": "Escrever",
     "re": "Res: ",
     "fwd": "Enc",
+    "Your message was moved to trash!": "Sua mensagem foi movida para a lixeira!",
     "Your message was archived": "Sua mensagem foi arquivada!",
     "Saved as draft.": "Mensagem salva como rascunho.",
     "One or more of the recipients are not valid emails": "Email de um ou mais destinatários é inválido",
diff --git a/web-ui/app/locales/sv_SE/translation.json b/web-ui/app/locales/sv_SE/translation.json
index aa7035f3..416665f2 100644
--- a/web-ui/app/locales/sv_SE/translation.json
+++ b/web-ui/app/locales/sv_SE/translation.json
@@ -2,6 +2,7 @@
     "compose": "Skriv nytt",
     "re": "Sv: ",
     "fwd": "VB",
+    "Your message was moved to trash!": "Ditt meddelande har flyttats till papperskorgen!",
     "Your message was archived": "Ditt meddelande har arkiverats!",
     "Saved as draft.": "Sparat som utkast.",
     "One or more of the recipients are not valid emails": "En eller flera mottagare är inte giltiga epost-adresser",
diff --git a/web-ui/bower.json b/web-ui/bower.json
index 336c1efa..4b7bdfb9 100644
--- a/web-ui/bower.json
+++ b/web-ui/bower.json
@@ -7,7 +7,9 @@
     "requirejs": "~2.1.15",
     "lodash": "2.4.1",
     "foundation": "~5.4.7",
-    "i18next": "~1.7.7",
+    "i18next": "~3.3.1",
+    "i18next-xhr-backend": "~0.6.0",
+    "i18next-browser-languagedetector": "~0.3.0",
     "font-awesome": "4.2.0",
     "quoted-printable": "0.2.1",
     "typeahead.js": "~0.10.5",
diff --git a/web-ui/karma.conf.js b/web-ui/karma.conf.js
index 152da31b..f1f590ff 100644
--- a/web-ui/karma.conf.js
+++ b/web-ui/karma.conf.js
@@ -40,6 +40,8 @@ module.exports = function (config) {
       {pattern: 'app/bower_components/he/he.js', included: false},
       {pattern: 'app/bower_components/flight/**/*.js', included: false},
       {pattern: 'app/bower_components/i18next/**/*.js', included: false},
+      {pattern: 'app/bower_components/i18next-xhr-backend/**/*.js', included: false},
+      {pattern: 'app/bower_components/i18next-browser-languagedetector/**/*.js', included: false},
       {pattern: 'app/bower_components/quoted-printable/*.js', included: false},
       {pattern: 'app/bower_components/utf8/utf8.js', included: false},
       {pattern: 'app/locales/**/*.json', included: false},
diff --git a/web-ui/test/spec/helpers/browser.spec.js b/web-ui/test/spec/helpers/browser.spec.js
index 5b740da8..0c981a70 100644
--- a/web-ui/test/spec/helpers/browser.spec.js
+++ b/web-ui/test/spec/helpers/browser.spec.js
@@ -5,7 +5,6 @@ define(['helpers/browser'], function (browser) {
       it('gets cookie', function() {
         document.cookie = 'TWISTED_SESSION=ff895ffc45a4ce140bfc5dda6c61d232; i18next=en-us';
         expect(browser.getCookie('TWISTED_SESSION')).toEqual('ff895ffc45a4ce140bfc5dda6c61d232');
-        expect(browser.getCookie('i18next')).toEqual('en-us');
       });
 
     });
diff --git a/web-ui/test/spec/mail_list_actions/ui/mail_list_actions.spec.js b/web-ui/test/spec/mail_list_actions/ui/mail_list_actions.spec.js
index a12ca98a..1ab90562 100644
--- a/web-ui/test/spec/mail_list_actions/ui/mail_list_actions.spec.js
+++ b/web-ui/test/spec/mail_list_actions/ui/mail_list_actions.spec.js
@@ -1,25 +1,25 @@
 describeComponent('mail_list_actions/ui/mail_list_actions', function () {
   'use strict';
   var mailListActionsContainer;
-
+  var i18n;
   describe('post initialization', function () {
     beforeEach(function () {
       this.setupComponent();
+      i18n = require('views/i18n');
       mailListActionsContainer = $('<input>', { id: 'delete-selected'});
     });
 
     it('should render button text', function () {
       $(document).trigger(Pixelated.events.ui.tag.select, {tag: 'inbox'});
-      
-      expect(this.component.$node.html()).toMatch('<li><input type="button" id="delete-selected" value="Delete" disabled="disabled"></li>');
+
+      expect(this.component.$node.html()).toMatch('<li><input type="button" id="delete-selected" value="' + i18n.t('Delete') + '" disabled="disabled"></li>');
     });
 
     it('should render button text delete permanently if tag trash', function () {
       $(document).trigger(Pixelated.events.ui.tag.select, {tag: 'trash'});
-      
-      expect(this.component.$node.html()).toMatch('<li><input type="button" id="delete-selected" value="Delete Permanently" disabled="disabled"></li>');
+      expect(this.component.$node.html()).toMatch('<li><input type="button" id="delete-selected" value="Delete permanently" disabled="disabled"></li>');
     });
-    
+
     it('should render button delete permanently if url contains trash tag', function () {
       var urlParams = require('page/router/url_params');
       spyOn(urlParams, 'getTag').and.returnValue('trash');
diff --git a/web-ui/test/spec/mail_view/ui/forward_box.spec.js b/web-ui/test/spec/mail_view/ui/forward_box.spec.js
index de6a6b0d..4985f23a 100644
--- a/web-ui/test/spec/mail_view/ui/forward_box.spec.js
+++ b/web-ui/test/spec/mail_view/ui/forward_box.spec.js
@@ -3,9 +3,10 @@ describeComponent('mail_view/ui/forward_box', function () {
 
   var attrs;
   var testMail;
+  var i18n;
   beforeEach(function () {
     testMail = Pixelated.testData().parsedMail.simpleTextPlain;
-
+    i18n = require('views/i18n');
     Pixelated.mockBloodhound();
   });
 
@@ -13,7 +14,7 @@ describeComponent('mail_view/ui/forward_box', function () {
     testMail.header.subject = 'Very interesting';
     this.setupComponent({ mail: testMail });
 
-    expect(this.component.select('subjectDisplay').text()).toEqual('Fwd: '+ testMail.header.subject);
+    expect(this.component.select('subjectDisplay').text()).toEqual(i18n.t('fwd') + testMail.header.subject);
   });
 
   it('should have no recipients', function () {
diff --git a/web-ui/test/spec/mail_view/ui/reply_box.spec.js b/web-ui/test/spec/mail_view/ui/reply_box.spec.js
index 731d57b3..896fdde3 100644
--- a/web-ui/test/spec/mail_view/ui/reply_box.spec.js
+++ b/web-ui/test/spec/mail_view/ui/reply_box.spec.js
@@ -13,7 +13,7 @@ describeComponent('mail_view/ui/reply_box', function () {
 
   describe('reply compose box', function() {
     it('should display subject of the reply', function() {
-      expect(this.component.select('subjectDisplay').text()).toBe(i18n('Re: ') + attrs.mail.header.subject);
+      expect(this.component.select('subjectDisplay').text()).toBe(i18n.t('re') + attrs.mail.header.subject);
     });
 
     it('should show recipient fields when clicking on recipient display', function() {
@@ -43,7 +43,7 @@ describeComponent('mail_view/ui/reply_box', function () {
 
       this.setupComponent(attrs);
 
-      expect(this.component.select('subjectDisplay').text()).toEqual(i18n('Re: ')+ attrs.mail.header.subject);
+      expect(this.component.select('subjectDisplay').text()).toEqual(i18n.t('re')+ attrs.mail.header.subject);
     });
 
     it('should use set In-Reply-To header when Message-Id header is set', function() {
diff --git a/web-ui/test/spec/mail_view/ui/send_button.spec.js b/web-ui/test/spec/mail_view/ui/send_button.spec.js
index 480fe7a8..05fce52c 100644
--- a/web-ui/test/spec/mail_view/ui/send_button.spec.js
+++ b/web-ui/test/spec/mail_view/ui/send_button.spec.js
@@ -2,6 +2,11 @@ describeComponent('mail_view/ui/send_button', function () {
 
   'use strict';
 
+  var i18n;
+  beforeEach(function () {
+    i18n = require('views/i18n');
+  });
+
   describe('send button', function () {
     beforeEach(function () {
       this.setupComponent('<button></button>');
@@ -29,7 +34,7 @@ describeComponent('mail_view/ui/send_button', function () {
         $(document).trigger(Pixelated.events.ui.recipients.updated, { newRecipients: ['InvalidEmail']});
 
         expect(this.$node).not.toBeDisabled();
-        expect(this.$node.text()).toBe('Send');
+        expect(this.$node.text()).toBe(i18n.t('send-button'));
       });
     });
 
@@ -82,22 +87,22 @@ describeComponent('mail_view/ui/send_button', function () {
       });
 
       it('disables the button after clicking', function () {
-        expect(this.$node.text()).toBe('Send');
+        expect(this.$node.text()).toBe(i18n.t('send-button'));
 
         this.$node.click();
 
-        expect(this.$node.text()).toBe('Sending...');
+        expect(this.$node.text()).toBe(i18n.t('sending-mail'));
         expect(this.$node.prop('disabled')).toBeTruthy();
       });
 
       it('enables again if sending errors out', function() {
-        expect(this.$node.text()).toBe('Send');
+        expect(this.$node.text()).toBe(i18n.t('send-button'));
 
         this.$node.click();
 
         $(document).trigger(Pixelated.events.mail.send_failed);
 
-        expect(this.$node.text()).toBe('Send');
+        expect(this.$node.text()).toBe(i18n.t('send-button'));
         expect(this.$node.prop('disabled')).not.toBeTruthy();
 
       });
diff --git a/web-ui/test/spec/services/delete_service.spec.js b/web-ui/test/spec/services/delete_service.spec.js
index 9872a644..f98a33a8 100644
--- a/web-ui/test/spec/services/delete_service.spec.js
+++ b/web-ui/test/spec/services/delete_service.spec.js
@@ -28,7 +28,7 @@ describeComponent('services/delete_service', function () {
 
     var expectedDeleteEventData = {
       mail: mailWithoutTrashTag,
-      successMessage: i18n('Your message was moved to trash!')
+      successMessage: i18n.t('Your message was moved to trash!')
     };
 
     expect(mailDeleteEvent).toHaveBeenTriggeredOnAndWith(document, expectedDeleteEventData);
@@ -42,7 +42,7 @@ describeComponent('services/delete_service', function () {
 
     var expectedDeleteEventData = {
       mail: mailWithTrashTag,
-      successMessage: i18n('Your message was permanently deleted!')
+      successMessage: i18n.t('Your message was permanently deleted!')
     };
 
     expect(mailDeleteEvent).toHaveBeenTriggeredOnAndWith(document, expectedDeleteEventData );
diff --git a/web-ui/test/spec/services/mail_service.spec.js b/web-ui/test/spec/services/mail_service.spec.js
index 82714797..2d22d1cf 100644
--- a/web-ui/test/spec/services/mail_service.spec.js
+++ b/web-ui/test/spec/services/mail_service.spec.js
@@ -167,7 +167,7 @@ describeComponent('services/mail_service', function () {
 
     deferred.reject({mailsJSON: {}});
 
-    expect(spyEvent).toHaveBeenTriggeredOnAndWith(document, {message: i18n('Could not delete email')} );
+    expect(spyEvent).toHaveBeenTriggeredOnAndWith(document, {message: i18n.t('Could not delete email')} );
   });
 
   it('will try to recover a message when requested to', function() {
@@ -202,11 +202,11 @@ describeComponent('services/mail_service', function () {
       spyOn(this.component, 'errorMessage');
 
       this.component.trigger(Pixelated.events.mail.archiveMany, mails);
-      
+
       deferred.reject({});
-      expect(this.component.errorMessage).toHaveBeenCalledWith(i18n('Could not archive emails'));
+      expect(this.component.errorMessage).toHaveBeenCalledWith(i18n.t('Could not archive emails'));
     });
-    
+
     it('make an ajax request to /mails/archive', function() {
       this.component.trigger(Pixelated.events.mail.archiveMany,
                             {checkedMails: [{ident: '43'}, {ident: '44'}]});
diff --git a/web-ui/test/spec/services/recover_service.spec.js b/web-ui/test/spec/services/recover_service.spec.js
index 86fe9f87..16dc26f4 100644
--- a/web-ui/test/spec/services/recover_service.spec.js
+++ b/web-ui/test/spec/services/recover_service.spec.js
@@ -24,7 +24,7 @@ describeComponent('services/recover_service', function () {
 
     var expectedRecoverManyEventData = {
       mails: [mail1, mail2],
-      successMessage: i18n('Your messages were moved to inbox!')
+      successMessage: i18n.t('Your messages were moved to inbox!')
     };
 
     expect(mailRecoverManyEvent).toHaveBeenTriggeredOnAndWith(document, expectedRecoverManyEventData);
diff --git a/web-ui/test/test-main.js b/web-ui/test/test-main.js
index 17ba3876..d9fb001e 100644
--- a/web-ui/test/test-main.js
+++ b/web-ui/test/test-main.js
@@ -29,7 +29,9 @@ requirejs.config({
     'services': 'app/js/services',
     'search': 'app/js/search',
     'monkey_patching': 'app/js/monkey_patching',
-    'i18next': 'app/bower_components/i18next/i18next.amd',
+    'i18next': 'app/bower_components/i18next/i18next',
+    'i18nextXHRBackend': 'app/bower_components/i18next-xhr-backend/i18nextXHRBackend',
+    'i18nextBrowserLanguageDetector': 'app/bower_components/i18next-browser-languagedetector/i18nextBrowserLanguageDetector',
     'quoted-printable': 'app/bower_components/quoted-printable',
     'utf8': 'app/bower_components/utf8',
     'test': 'test',