[FIX] Default selected language

client/startup/startup.js

@@ -17,16 +17,14 @@ if (window.DISABLE_ANIMATION) {
 Meteor.startup(function() {
 	TimeSync.loggingEnabled = false;
 
-
-
 	Session.setDefault('AvatarRandom', 0);
 
 	window.lastMessageWindow = {};
 	window.lastMessageWindowHistory = {};
 
 	TAPi18n.conf.i18n_files_route = Meteor._relativeToSiteRootUrl('/tap-i18n');
 
-	const defaultAppLanguage = function() {
+	const defaultAppLanguage = () => {
 		let lng = window.navigator.userLanguage || window.navigator.language || 'en';
 		// Fix browsers having all-lowercase language settings eg. pt-br, en-us
 		const re = /([a-z]{2}-)([a-z]{2})/;
@@ -38,9 +36,7 @@ Meteor.startup(function() {
 		return lng;
 	};
 
-	window.defaultUserLanguage = function() {
-		return RocketChat.settings.get('Language') || defaultAppLanguage();
-	};
+	window.defaultUserLanguage = () => RocketChat.settings.get('Language') || defaultAppLanguage();
 
 	const availableLanguages = TAPi18n.getLanguages();
 	const loadedLanguages = [];
@@ -94,7 +90,6 @@ Meteor.startup(function() {
 		const user = RocketChat.models.Users.findOne(Meteor.userId(), {
 			fields: {
 				status: 1,
-				language: 1,
 				'settings.preferences.idleTimeLimit': 1,
 				'settings.preferences.enableAutoAway': 1
 			}
@@ -104,12 +99,6 @@ Meteor.startup(function() {
 			return;
 		}
 
-		const userLanguage = user.language ? user.language : window.defaultUserLanguage();
-		if (localStorage.getItem('userLanguage') !== userLanguage) {
-			localStorage.setItem('userLanguage', userLanguage);
-			window.setLanguage(userLanguage);
-		}
-
 		if (RocketChat.getUserPreference(user, 'enableAutoAway')) {
 			const idleTimeLimit = RocketChat.getUserPreference(user, 'idleTimeLimit') || 300;
 			UserPresence.awayTime = idleTimeLimit * 1000;
@@ -125,4 +114,13 @@ Meteor.startup(function() {
 			fireGlobalEvent('status-changed', status);
 		}
 	});
+
+	Tracker.autorun(() => {
+		const userLanguage = Meteor.user() && Meteor.user().language || RocketChat.settings.get('Language') || 'en';
+
+		if (loadedLanguages.length === 0 || localStorage.getItem('userLanguage') !== userLanguage) {
+			localStorage.setItem('userLanguage', userLanguage);
+			window.setLanguage(userLanguage);
+		}
+	});
 });

packages/rocketchat-ui-account/client/accountPreferences.html

@@ -17,10 +17,10 @@ <h1>{{_ "Localization"}}</h1>
 								<div class="rc-select">
 									<select id="language" class="required rc-select__element">
 										{{#each languages}}
-											<option value="{{key}}" selected="{{userLanguage key}}" dir="auto">{{name}}</option>
+											<option value="{{key}}" selected="{{isUserLanguage key}}" dir="auto">{{name}}</option>
 										{{/each}}
 									</select>
-									{{> icon block="rc-select__arrow" icon="arrow-down" }}
+									{{> icon block="rc-select__arrow" icon="arrow-down"}}
 								</div>
 							</div>
 						</div>

packages/rocketchat-ui-account/client/accountPreferences.js

@@ -1,4 +1,4 @@
-/*globals defaultUserLanguage, KonchatNotification */
+/*globals KonchatNotification */
 import _ from 'underscore';
 import s from 'underscore.string';
 import toastr from 'toastr';
@@ -37,23 +37,25 @@ Template.accountPreferences.helpers({
 	languages() {
 		const languages = TAPi18n.getLanguages();
 
-		const result = Object.keys(languages).map((key) => {
-			const language = languages[key];
-			return _.extend(language, { key });
+		const result = Object.entries(languages)
+			.map(([ key, language ]) => ({ ...language, key: key.toLowerCase() }))
+			.sort((a, b) => a.key - b.key);
+
+		const appLanguageKey = RocketChat.settings.get('Language') || 'en';
+		const appLanguage = result.filter(({ key }) => key === appLanguageKey.toLowerCase())[0];
+
+		result.unshift({
+			'name': appLanguage ? `Default (${ appLanguage.name })` : 'Default',
+			'en': 'Default',
+			'key': ''
 		});
 
-		return _.sortBy(result, 'key');
-	},
-	userLanguage(key) {
-		const user = Meteor.user();
-		let result = undefined;
-		if (user.language) {
-			result = user.language === key;
-		} else if (defaultUserLanguage()) {
-			result = defaultUserLanguage() === key;
-		}
 		return result;
 	},
+	isUserLanguage(key) {
+		const languageKey = Meteor.user().language;
+		return typeof languageKey === 'string' && languageKey.toLowerCase() === key;
+	},
 	checked(property, value, defaultValue=undefined) {
 		return checkedSelected(property, value, defaultValue);
 	},

packages/rocketchat-ui-admin/client/admin.html

@@ -92,7 +92,7 @@
 													<div class="rc-select">
 														<select class="input-monitor rc-select__element" name="{{_id}}" {{isDisabled}} {{isReadonly}}>
 															{{#each languages}}
-															<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
+															<option value="{{key}}" selected="{{isAppLanguage key}}" dir="auto">{{name}}</option>
 															{{/each}}
 														</select>
 														{{> icon block="rc-select__arrow" icon="arrow-down" }}

packages/rocketchat-ui-admin/client/admin.js

@@ -85,11 +85,9 @@ Template.admin.helpers({
 	languages() {
 		const languages = TAPi18n.getLanguages();
 
-		const result = Object.entries(languages).map(language => {
-			const obj = language[1];
-			obj.key = language[0];
-			return obj;
-		}).sort((a, b) => a.key - b.key);
+		const result = Object.entries(languages)
+			.map(([ key, language ]) => ({ ...language, key: key.toLowerCase() }))
+			.sort((a, b) => a.key - b.key);
 
 		result.unshift({
 			'name': 'Default',
@@ -99,9 +97,9 @@ Template.admin.helpers({
 
 		return result;
 	},
-	appLanguage(key) {
-		const setting = RocketChat.settings.get('Language');
-		return setting && setting.split('-').shift().toLowerCase() === key;
+	isAppLanguage(key) {
+		const languageKey = RocketChat.settings.get('Language');
+		return typeof languageKey === 'string' && languageKey.toLowerCase() === key;
 	},
 	group() {
 		const groupId = FlowRouter.getParam('group');