add: use user preferred lang for user form, and allow selecting

3 files changed, 50 insertions, 0 deletions

diff --git a/client/components/main/layouts.jade b/client/components/main/layouts.jade
index 166f143a..65b53f04 100644
--- a/client/components/main/layouts.jade
+++ b/client/components/main/layouts.jade
@@ -13,6 +13,13 @@ template(name="userFormsLayout")
     h1.at-form-landing-logo
       img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan")
     +Template.dynamic(template=content)
+    div.at-form-lang
+      select.select-lang.js-userform-set-language
+        each languages
+          if isCurrentLanguage
+            option(value="{{tag}}" selected="selected") {{name}}
+          else
+            option(value="{{tag}}") {{name}}
 
 template(name="defaultLayout")
   +header
diff --git a/client/components/main/layouts.js b/client/components/main/layouts.js
index ab62e76a..3df17f41 100644
--- a/client/components/main/layouts.js
+++ b/client/components/main/layouts.js
@@ -2,10 +2,43 @@ Meteor.subscribe('boards');
 
 BlazeLayout.setRoot('body');
 
+const i18nTagToT9n = (i18nTag) => {
+  // t9n/i18n tags are same now, see: https://github.com/softwarerero/meteor-accounts-t9n/pull/129
+  // but we keep this conversion function here, to be aware that that they are different system.
+  return i18nTag;
+};
+
 Template.userFormsLayout.onRendered(() => {
+  const i18nTag = navigator.language;
+  if (i18nTag) {
+    T9n.setLanguage(i18nTagToT9n(i18nTag));
+  }
   EscapeActions.executeAll();
 });
 
+Template.userFormsLayout.helpers({
+  languages() {
+    return _.map(TAPi18n.getLanguages(), (lang, tag) => {
+      const name = lang.name;
+      return { tag, name };
+    });
+  },
+
+  isCurrentLanguage() {
+    const t9nTag = i18nTagToT9n(this.tag);
+    const curLang = T9n.getLanguage() || 'en';
+    return t9nTag === curLang;
+  },
+});
+
+Template.userFormsLayout.events({
+  'change .js-userform-set-language'(evt) {
+    const i18nTag = $(evt.currentTarget).val();
+    T9n.setLanguage(i18nTagToT9n(i18nTag));
+    evt.preventDefault();
+  },
+});
+
 Template.defaultLayout.events({
   'click .js-close-modal': () => {
     Modal.close();
diff --git a/client/components/users/userForm.styl b/client/components/users/userForm.styl
index 9b6e86ce..dbe62b4e 100644
--- a/client/components/users/userForm.styl
+++ b/client/components/users/userForm.styl
@@ -45,3 +45,13 @@
       .at-signUp,
       .at-signIn
         font-weight: bold
+
+  .at-form-lang
+    margin: auto
+    width: 275px
+    padding: 25px
+    padding-bottom: 10px
+
+    .select-lang
+      width: 275px
+      font-size: 1.0em