i18n fixes (#634)

* i18n fixes

app/authenticated/route.js

@@ -47,6 +47,7 @@ export default Ember.Route.extend(Subscribe, {
       projects: this.loadProjects(),
       preferences: this.loadPreferences(),
       settings: this.loadPublicSettings(),
+      language: this.get('language').initLanguage(),
     }).then((hash) => {
       var projectId = null;
       if ( transition.params && transition.params['authenticated.project'] && transition.params['authenticated.project'].project_id )
@@ -54,7 +55,6 @@ export default Ember.Route.extend(Subscribe, {
         projectId = transition.params['authenticated.project'].project_id;
       }
 
-      this.get('language').initLanguage();
       // Make sure a valid project is selected
       return this.get('projects').selectDefault(projectId).then((project) => {
         // Load stuff that is needed to draw the header

app/components/language-dropdown/component.js

@@ -2,6 +2,9 @@ import Ember from 'ember';
 import C from 'ui/utils/constants';
 
 export default Ember.Component.extend({
+  // Set to true on login to savesession value instead of user-pref
+  login        : false,
+
   tagName      : 'div',
   classNames   : ['dropdown', 'language-dropdown', 'inline-block'],
   classNameBindings: ['hideSingle:hide'],
@@ -18,14 +21,14 @@ export default Ember.Component.extend({
 
   actions: {
     selectLanguage(language) {
-      let route = this.get('app.currentRouteName');
-
-      if (route === 'login') {
+      if (this.get('login')) {
         this.get('session').set(C.SESSION.LOGIN_LANGUAGE, language);
       }
 
       this.get('language').sideLoadLanguage(language).then(() => {
-        this.get('language').setLanguage(language);
+        if (!this.get('login')) {
+          this.get('language').setLanguage(language, false);
+        }
       });
     }
   },
@@ -38,4 +41,19 @@ export default Ember.Component.extend({
     return null;
   }),
 
+  selectedLabel: Ember.computed('selected','locales', function() {
+    let sel = this.get('selected');
+    let out = '';
+    if (sel) {
+      out = this.get('locales')[sel];
+    }
+
+    if (!out) {
+      out = 'Language';
+    }
+
+    // Strip parens for display
+    return out.replace(/\s+\(.+\)$/,'');
+  }),
+
 });

app/components/language-dropdown/template.hbs

@@ -1,8 +1,8 @@
 <a class="dropdown-toggle hand btn btn-sm btn-link lang-select" data-toggle="dropdown" aria-expanded="false">
-  <i class="icon icon-globe"></i> Language <i class="icon icon-chevron-down"></i>
+  <i class="icon icon-globe"></i> {{selectedLabel}} <i class="icon icon-chevron-down"></i>
 </a>
 <ul class="dropdown-menu dropdown-menu-right" role="menu">
-  {{#each-in locales as |label lang|}}
+  {{#each-in locales as |lang label|}}
     <li class="{{if (eq selected lang) 'disabled selected'}}">
       <a {{action 'selectLanguage' lang}}>
         {{label}}

app/login/route.js

@@ -9,22 +9,21 @@ export default Ember.Route.extend({
   beforeModel() {
     this._super.apply(this,arguments);
 
+    let lang = C.LANGUAGE.DEFAULT;
     const session       = this.get('session');
-    const language      = this.get('language');
-    const uplLocal      = this.get('session').get(C.SESSION.LANGUAGE); // get local language
-    let defaultLanguage = C.LANGUAGE.DEFAULT;
+    const fromLogin     = session.get(C.SESSION.LANGUAGE); // get local language
 
-    if (uplLocal) {
-      defaultLanguage = uplLocal;
+    if (fromLogin) {
+      lang = fromLogin;
     }
 
-    language.sideLoadLanguage(defaultLanguage);
+    session.set(C.SESSION.LOGIN_LANGUAGE, lang);
 
-    session.set(C.SESSION.LOGIN_LANGUAGE, defaultLanguage);
-
-    if ( !this.get('access.enabled') )
-    {
-      this.transitionTo('authenticated');
-    }
+    return this.get('language').sideLoadLanguage(lang).then(() => {
+      if ( !this.get('access.enabled') )
+      {
+        this.transitionTo('authenticated');
+      }
+    });
   },
 });

app/login/template.hbs

@@ -1,14 +1,11 @@
 <div style="max-width: 360px; margin: 100px auto 0 auto;">
   <div class="farm-box login top-colors">
-    {{#if settings.appName}}
-      {{format-html-message 'loginPage.greeting'
-        appName=settings.appName}}
-    {{else}}
-      {{format-html-message 'loginPage.greetingWhiteLabel'}}
-    {{/if}}
-    <div class="logo"></div>
+    <h1>
+      {{format-html-message 'loginPage.greeting' appName=settings.appName}}
+      <div class="logo"></div>
+    </h1>
     <section>
-      {{!-- {{language-dropdown class='r-mt10 r-mb10'}}--}}
+      {{language-dropdown login=true class='r-mt10 r-mb10'}}
       <br/>
       {{#if isGithub}}
         <p>{{t 'loginPage.githubMessage' appName=settings.appName}}</p>

app/services/user-language.js

@@ -6,7 +6,7 @@ export default Ember.Service.extend({
   prefs            : Ember.inject.service(),
   session          : Ember.inject.service(),
   intl             : Ember.inject.service(),
-  locales : Ember.computed.alias('app.locales'),
+  locales          : Ember.computed.alias('app.locales'),
   loadedLocales    : null,
 
   bootstrap: function() {
@@ -48,12 +48,12 @@ export default Ember.Service.extend({
       this.get('intl').setLocale(language);
       return Ember.RSVP.resolve();
     } else {
-      return ajaxPromise({url: `/translations/${language}.json`,
+      return ajaxPromise({url: `${this.get('app.baseAssets')}translations/${language}.json`,
         method: 'GET',
         dataType: 'json',
       }).then((resp) => {
         loadedLocales.push(language);
-        this.get('intl').addTranslations(language, resp.xhr.responseJSON).then(() => {
+        return this.get('intl').addTranslations(language, resp.xhr.responseJSON).then(() => {
           this.get('intl').setLocale(language);
         });
       });

app/styles/components/_login.scss

@@ -13,10 +13,6 @@
     border-radius: 50%;
     margin: 0 auto;
     background-color: $primary;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 105px;
     z-index: 5;
   }
 

app/styles/layout/_layout.scss

@@ -314,6 +314,7 @@ TABLE.graphs {
   h1 {
     background-color: $brand-primary;
   }
+
   h1, h2 {
         padding          : 40px 20px;
         color            : white;
@@ -323,7 +324,7 @@ TABLE.graphs {
           position : absolute;
           left     : 0;
           right    : 0;
-          bottom   : -25px;
+          bottom   : -37px;
         }
   }
 

app/utils/intl/missing-message.js

@@ -3,6 +3,7 @@ import Ember from 'ember';
 const { Logger:logger } = Ember;
 
 export default function missingMessage(key, locales) {
+  locales = locales||['unknown'];
   logger.warn(`translation not found: locale='${locales.join(', ')}', key='${key}'.`);
   return `*%${key}%*`;
 }

config/environment.js

@@ -26,17 +26,17 @@ function readLocales(environment) {
   /* Parse the translations from the translations folder*/
   /* ember intl getLocalesByTranslations does not work if intl is not managing them (bundled) */
   /* This needs a little work to read the yaml files for the langugae name prop*/
-  var translations = fs.readdirSync('./translations');
+  var files = fs.readdirSync('./translations');
   var translationsOut = {};
-  translations.forEach(function(item) {
-    if ( environment === 'production' && item === 'none.yaml' ) {
+  files.forEach(function(filename) {
+    if ( environment === 'production' && filename === 'none.yaml' ) {
       // Don't show the "None" language in prod
       return;
     }
-    var ymlFile = YAML.load('./translations/' + item);
-    var name  = ymlFile.languageName;
-    var value = item.split('.')[0];
-    translationsOut[name] = value;
+    var ymlFile = YAML.load('./translations/' + filename);
+    var label  = ymlFile.languageName;
+    var locale = filename.split('.')[0];
+    translationsOut[locale] = label;
   });
   return translationsOut;
 }

translations/en-us.yaml

@@ -2,8 +2,7 @@ languageName: "English (US)"
 
 # Routes
 loginPage:
-  greeting: "<h1>Howdy!<br>Welcome to {appName}</h1>"
-  greetingWhiteLabel: "<h1>Howdy!<br>Welcome</h1>"
+  greeting: "Howdy!<br>Welcome to {appName}"
   githubMessage: "{appName} uses GitHub to manage accounts and teams.  Click the button below to log in and give us read-only access to your basic GitHub account information."
 
 splashPage: