use localStorage instead of cookie to save locale setting

there is no need to tell the server which locale is prefered by client

app/instance-initializers/i18n.js

@@ -1,29 +1,21 @@
+import Ember from 'ember';
+
+const { getOwner } = Ember;
+
 export default {
   name: 'i18n',
   initialize(appInstance) {
     const i18n = appInstance.lookup('service:i18n');
     const availableLocales = i18n.get('locales');
-    const moment = appInstance.lookup('service:moment');
-    const locale = getLocale(availableLocales);
 
-    i18n.set('locale', locale);
-    moment.changeLocale(locale);
-
-    i18n.addObserver('locale', i18n, function() {
-      const locale = this.get('locale');
-      // give cookie a lifetime of one year
-      const maxAge = 60 * 60 * 24 * 356;
-      moment.changeLocale(locale);
-
-      // save selected locale in cookie
-      document.cookie = `language=${locale};max-age=${maxAge};`;
-    });
+    i18n.addObserver('locale', i18n, localeChanged);
+    i18n.set('locale', getLocale(availableLocales));
   }
 };
 
 function getLocale(availableLocales) {
   const methods = [
-    getLocaleFromCookie,
+    getSavedLocale,
     getLocaleByBrowser
   ];
   let locale;
@@ -47,15 +39,30 @@ function getLocaleByBrowser() {
   return (window.navigator.userLanguage || window.navigator.language).split('-')[0];
 }
 
-function getLocaleFromCookie() {
-  let language;
+function getSavedLocale() {
+  let { localStorage } = window;
 
-  const cookie = document.cookie.replace(' ', '').split(';');
-  cookie.forEach(function(t) {
-    let x = t.split('=');
-    if (x[0] === 'language') {
-      language = x[1];
-    }
-  });
-  return language;
+  // test browser support
+  if (!localStorage) {
+    return;
+  }
+
+  return localStorage.getItem('locale');
+}
+
+function saveLocale(locale) {
+  let { localStorage } = window;
+
+  // test browser support
+  if (!localStorage) {
+    return;
+  }
+
+  localStorage.setItem('locale', locale);
+}
+
+function localeChanged() {
+  let locale = this.get('locale');
+  getOwner(this).lookup('service:moment').changeLocale(locale);
+  saveLocale(locale);
 }

tests/acceptance/create-a-poll-test.js

@@ -22,6 +22,8 @@ const randomString = function(length) {
 
 module('Acceptance | create a poll', {
   beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+
     let lastCreatedPoll = {};
     const pollId = randomString(10);
 

tests/acceptance/i18n-test.js

@@ -0,0 +1,26 @@
+import { test } from 'qunit';
+import moduleForAcceptance from 'croodle/tests/helpers/module-for-acceptance';
+import pageIndex from 'croodle/tests/pages/index';
+
+moduleForAcceptance('Acceptance | i18n', {
+  beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+  }
+});
+
+test('locale is saved in localStorage', function(assert) {
+  visit('/');
+
+  andThen(() => {
+    assert.equal(find('.language-select').val(), 'en');
+    pageIndex.locale('de');
+
+    andThen(function() {
+      assert.equal(find('.language-select').val(), 'de');
+      assert.equal(
+        window.localStorage.getItem('locale'), 'de',
+        'persisted in localeStorage'
+      );
+    });
+  });
+});

tests/acceptance/participate-in-a-poll-test.js

@@ -12,6 +12,8 @@ let application, server;
 
 module('Acceptance | participate in a poll', {
   beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+
     application = startApp();
     application.__container__.lookup('adapter:application').__proto__.namespace = '';
 

tests/acceptance/view-evaluation-test.js

@@ -13,6 +13,8 @@ let dateString;
 
 module('Acceptance | view evaluation', {
   beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+
     application = startApp();
     application.__container__.lookup('adapter:application').__proto__.namespace = '';
 

tests/acceptance/view-poll-test.js

@@ -13,6 +13,8 @@ let application, server;
 
 module('Acceptance | view poll', {
   beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+
     application = startApp();
     application.__container__.lookup('adapter:application').__proto__.namespace = '';
 

tests/integration/create-a-poll-test.js

@@ -14,6 +14,8 @@ let application;
 
 module('Integration', {
   beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+
     application = startApp();
     moment.locale(
       application.__container__.lookup('service:i18n').get('locale')

tests/integration/legacy-support-test.js

@@ -9,6 +9,8 @@ let application;
 
 module('Integration | legacy support', {
   beforeEach() {
+    window.localStorage.setItem('locale', 'en');
+
     application = startApp();
     moment.locale(
       application.__container__.lookup('service:i18n').get('locale')

tests/pages/create/index.js

@@ -10,7 +10,7 @@ const {
   visitable
 } = PageObject;
 
-export default PageObject.create(assign(defaultsForCreate, {
+export default PageObject.create(assign({}, defaultsForCreate, {
   pollType: fillable('.poll-type select'),
   visit: visitable('/create')
 }));

tests/pages/create/meta.js

@@ -9,7 +9,7 @@ let {
   fillable
 } = PageObject;
 
-export default PageObject.create(assign(defaultsForCreate, {
+export default PageObject.create(assign({}, defaultsForCreate, {
   description: fillable('.description textarea'),
   title: fillable('.title input')
 }));

tests/pages/create/options-datetime.js

@@ -13,7 +13,7 @@ let {
   text
 } = PageObject;
 
-export default PageObject.create(assign(defaultsForCreate, {
+export default PageObject.create(assign({}, defaultsForCreate, {
   days: collection({
     itemScope: '.form-group',
     labels: text('label:not(.sr-only)', { multiple: true })

tests/pages/create/options.js

@@ -39,7 +39,7 @@ const setBootstrapDatepicker = function(selector, options = {}) {
   };
 };
 
-export default PageObject.create(assign(defaultsForCreate, {
+export default PageObject.create(assign({}, defaultsForCreate, {
   dateOptions: setBootstrapDatepicker('.days .ember-view:has(.datepicker:first-child)'),
   dateHasError: isVisible('.days.has-error'),
   dateError: text('.days .help-block'),

tests/pages/create/settings.js

@@ -5,5 +5,10 @@ const {
   assign
 } = Object;
 
-export default PageObject.create(assign(defaultsForCreate, {
+const {
+  visitable
+} = PageObject;
+
+export default PageObject.create(assign({}, defaultsForCreate, {
+  visit: visitable('/create/settings')
 }));

tests/pages/defaults.js

@@ -3,14 +3,24 @@ import PageObject from 'ember-cli-page-object';
 const {
   clickable,
   collection,
+  fillable,
   property,
   text
 } = PageObject;
 
+const { assign } = Object;
+
+/*
+ * shared features between all pages
+ */
+export const defaultsForApplication = {
+  locale: fillable('.language-select')
+};
+
 /*
  * shared features between all create/* page objects
  */
-export const defaultsForCreate = {
+export const defaultsForCreate = assign({}, defaultsForApplication, {
   back: clickable('button.back'),
   next: clickable('button[type="submit"]'),
   statusBar: collection({
@@ -21,4 +31,4 @@ export const defaultsForCreate = {
       text: text()
     }
   })
-};
+});

tests/pages/index.js

@@ -0,0 +1,4 @@
+import PageObject from 'ember-cli-page-object';
+import { defaultsForApplication } from 'croodle/tests/pages/defaults';
+
+export default PageObject.create(defaultsForApplication);

tests/pages/poll/participation.js

@@ -1,4 +1,5 @@
 import PageObject from 'ember-cli-page-object';
+import { defaultsForApplication } from 'croodle/tests/pages/defaults';
 
 let {
   collection,
@@ -6,6 +7,8 @@ let {
   visitable
 } = PageObject;
 
+const { assign } = Object;
+
 const urlMatches = function(regExp) {
   return function() {
     const pollURL = currentURL();
@@ -13,7 +16,7 @@ const urlMatches = function(regExp) {
   };
 };
 
-export default PageObject.create({
+export default PageObject.create(assign({}, defaultsForApplication, {
   description: text('.description'),
   options: collection({
     answers: text('.selections .form-group:eq(0) .radio', { multiple: true }),
@@ -27,4 +30,4 @@ export default PageObject.create({
   urlIsValid: urlMatches(/^\/poll\/[a-zA-Z0-9]{10}\/participation\?encryptionKey=[a-zA-Z0-9]{40}$/),
   // use as .visit({ encryptionKey: ??? })
   visit: visitable('/poll/participation')
-});
+}));