PLT-1800 Load server side locale from the config.json (#3076)

* PLT-1800 Load server side locale from the config.json

* Add support for locales with country specifics

24 files changed, 377 insertions, 51 deletions

diff --git a/api/apitestlib.go b/api/apitestlib.go
index ab342c6b7..a685528d1 100644
--- a/api/apitestlib.go
+++ b/api/apitestlib.go
@@ -30,7 +30,7 @@ type TestHelper struct {
 func SetupEnterprise() *TestHelper {
 	if Srv == nil {
 		utils.LoadConfig("config.json")
-		utils.InitTranslations()
+		utils.InitTranslations(utils.Cfg.LocalizationSettings)
 		utils.Cfg.TeamSettings.MaxUsersPerTeam = 50
 		utils.DisableDebugLogForTest()
 		utils.License.Features.SetDefaults()
@@ -50,7 +50,7 @@ func SetupEnterprise() *TestHelper {
 func Setup() *TestHelper {
 	if Srv == nil {
 		utils.LoadConfig("config.json")
-		utils.InitTranslations()
+		utils.InitTranslations(utils.Cfg.LocalizationSettings)
 		utils.Cfg.TeamSettings.MaxUsersPerTeam = 50
 		utils.DisableDebugLogForTest()
 		NewServer()
diff --git a/api/user.go b/api/user.go
index 89ac1c837..ac99bd21b 100644
--- a/api/user.go
+++ b/api/user.go
@@ -239,6 +239,7 @@ func CreateUser(user *model.User) (*model.User, *model.AppError) {
 	}
 
 	user.MakeNonNil()
+	user.Locale = *utils.Cfg.LocalizationSettings.DefaultClientLocale
 
 	if result := <-Srv.Store.User().Save(user); result.Err != nil {
 		l4g.Error(utils.T("api.user.create_user.save.error"), result.Err)
diff --git a/config/config.json b/config/config.json
index b62713a91..9f5e8f9c8 100644
--- a/config/config.json
+++ b/config/config.json
@@ -154,5 +154,10 @@
         "Enable": false,
         "Directory": "./data/",
         "EnableDaily": false
+    },
+    "LocalizationSettings": {
+        "DefaultServerLocale": "en",
+        "DefaultClientLocale": "en",
+        "AvailableLocales": "en,es,fr,ja,pt-BR"
     }
 }
\ No newline at end of file
diff --git a/i18n/pt.json b/i18n/pt-BR.json
index a0b37ae36..a0b37ae36 100644
--- a/i18n/pt.json
+++ b/i18n/pt-BR.json
diff --git a/mattermost.go b/mattermost.go
index 3def1e0d9..e8abf8351 100644
--- a/mattermost.go
+++ b/mattermost.go
@@ -77,7 +77,6 @@ func main() {
 
 	parseCmds()
 
-	utils.InitTranslations()
 	if errstr := doLoadConfig(flagConfigFile); errstr != "" {
 		l4g.Exit(utils.T("mattermost.unable_to_load_config"), errstr)
 		return
@@ -86,6 +85,7 @@ func main() {
 	if flagRunCmds {
 		utils.ConfigureCmdLineLog()
 	}
+	utils.InitTranslations(utils.Cfg.LocalizationSettings)
 
 	pwd, _ := os.Getwd()
 	l4g.Info(utils.T("mattermost.current_version"), model.CurrentVersion, model.BuildNumber, model.BuildDate, model.BuildHash, model.BuildHashEnterprise)
diff --git a/model/config.go b/model/config.go
index 9a7e3b7c5..ecfd18710 100644
--- a/model/config.go
+++ b/model/config.go
@@ -203,20 +203,27 @@ type ComplianceSettings struct {
 	EnableDaily *bool
 }
 
+type LocalizationSettings struct {
+	DefaultServerLocale *string
+	DefaultClientLocale *string
+	AvailableLocales    *string
+}
+
 type Config struct {
-	ServiceSettings    ServiceSettings
-	TeamSettings       TeamSettings
-	SqlSettings        SqlSettings
-	LogSettings        LogSettings
-	FileSettings       FileSettings
-	EmailSettings      EmailSettings
-	RateLimitSettings  RateLimitSettings
-	PrivacySettings    PrivacySettings
-	SupportSettings    SupportSettings
-	GitLabSettings     SSOSettings
-	GoogleSettings     SSOSettings
-	LdapSettings       LdapSettings
-	ComplianceSettings ComplianceSettings
+	ServiceSettings      ServiceSettings
+	TeamSettings         TeamSettings
+	SqlSettings          SqlSettings
+	LogSettings          LogSettings
+	FileSettings         FileSettings
+	EmailSettings        EmailSettings
+	RateLimitSettings    RateLimitSettings
+	PrivacySettings      PrivacySettings
+	SupportSettings      SupportSettings
+	GitLabSettings       SSOSettings
+	GoogleSettings       SSOSettings
+	LdapSettings         LdapSettings
+	ComplianceSettings   ComplianceSettings
+	LocalizationSettings LocalizationSettings
 }
 
 func (o *Config) ToJson() string {
@@ -507,6 +514,21 @@ func (o *Config) SetDefaults() {
 		o.LdapSettings.NicknameAttribute = new(string)
 		*o.LdapSettings.NicknameAttribute = ""
 	}
+
+	if o.LocalizationSettings.DefaultServerLocale == nil {
+		o.LocalizationSettings.DefaultServerLocale = new(string)
+		*o.LocalizationSettings.DefaultServerLocale = DEFAULT_LOCALE
+	}
+
+	if o.LocalizationSettings.DefaultClientLocale == nil {
+		o.LocalizationSettings.DefaultClientLocale = new(string)
+		*o.LocalizationSettings.DefaultClientLocale = DEFAULT_LOCALE
+	}
+
+	if o.LocalizationSettings.AvailableLocales == nil {
+		o.LocalizationSettings.AvailableLocales = new(string)
+		*o.LocalizationSettings.AvailableLocales = *o.LocalizationSettings.DefaultClientLocale
+	}
 }
 
 func (o *Config) IsValid() *AppError {
diff --git a/model/user.go b/model/user.go
index 7dee67381..9b52cfa97 100644
--- a/model/user.go
+++ b/model/user.go
@@ -136,7 +136,6 @@ func (u *User) PreSave() {
 
 	u.Username = strings.ToLower(u.Username)
 	u.Email = strings.ToLower(u.Email)
-	u.Locale = strings.ToLower(u.Locale)
 
 	u.CreateAt = GetMillis()
 	u.UpdateAt = u.CreateAt
@@ -166,7 +165,6 @@ func (u *User) PreSave() {
 func (u *User) PreUpdate() {
 	u.Username = strings.ToLower(u.Username)
 	u.Email = strings.ToLower(u.Email)
-	u.Locale = strings.ToLower(u.Locale)
 	u.UpdateAt = GetMillis()
 
 	if u.AuthData != nil && *u.AuthData == "" {
diff --git a/store/sql_store_test.go b/store/sql_store_test.go
index 474a68ac7..19ae2caae 100644
--- a/store/sql_store_test.go
+++ b/store/sql_store_test.go
@@ -16,7 +16,7 @@ var store Store
 func Setup() {
 	if store == nil {
 		utils.LoadConfig("config.json")
-		utils.InitTranslations()
+		utils.InitTranslations(utils.Cfg.LocalizationSettings)
 		store = NewSqlStore()
 
 		store.MarkSystemRanUnitTests()
diff --git a/utils/config.go b/utils/config.go
index 313b4e29c..a3969fc40 100644
--- a/utils/config.go
+++ b/utils/config.go
@@ -246,7 +246,8 @@ func getClientConfig(c *model.Config) map[string]string {
 	props["WebsocketPort"] = fmt.Sprintf("%v", *c.ServiceSettings.WebsocketPort)
 	props["WebsocketSecurePort"] = fmt.Sprintf("%v", *c.ServiceSettings.WebsocketSecurePort)
 
-	props["AllowCorsFrom"] = *c.ServiceSettings.AllowCorsFrom
+	props["DefaultClientLocale"] = *c.LocalizationSettings.DefaultClientLocale
+	props["AvailableLocales"] = *c.LocalizationSettings.AvailableLocales
 
 	if IsLicensed {
 		if *License.Features.CustomBrand {
diff --git a/utils/config_test.go b/utils/config_test.go
index 6f36b30c3..96ef49696 100644
--- a/utils/config_test.go
+++ b/utils/config_test.go
@@ -9,5 +9,5 @@ import (
 
 func TestConfig(t *testing.T) {
 	LoadConfig("config.json")
-	InitTranslations()
+	InitTranslations(Cfg.LocalizationSettings)
 }
diff --git a/utils/i18n.go b/utils/i18n.go
index 2503cd500..300f5ca7c 100644
--- a/utils/i18n.go
+++ b/utils/i18n.go
@@ -7,15 +7,17 @@ import (
 	"strings"
 
 	l4g "github.com/alecthomas/log4go"
-	"github.com/cloudfoundry/jibber_jabber"
+	//"github.com/cloudfoundry/jibber_jabber"
 	"github.com/mattermost/platform/model"
 	"github.com/nicksnyder/go-i18n/i18n"
 )
 
 var T i18n.TranslateFunc
 var locales map[string]string = make(map[string]string)
+var settings model.LocalizationSettings
 
-func InitTranslations() {
+func InitTranslations(localizationSettings model.LocalizationSettings) {
+	settings = localizationSettings
 	InitTranslationsWithDir("i18n")
 }
 
@@ -34,14 +36,10 @@ func InitTranslationsWithDir(dir string) {
 }
 
 func GetTranslationsBySystemLocale() i18n.TranslateFunc {
-	locale := model.DEFAULT_LOCALE
-	if userLanguage, err := jibber_jabber.DetectLanguage(); err == nil {
-		if _, ok := locales[userLanguage]; ok {
-			locale = userLanguage
-		} else {
-			l4g.Error("Failed to load system translations for '%v' attempting to fall back to '%v'", locale, model.DEFAULT_LOCALE)
-			locale = model.DEFAULT_LOCALE
-		}
+	locale := *settings.DefaultServerLocale
+	if _, ok := locales[locale]; !ok {
+		l4g.Error("Failed to load system translations for '%v' attempting to fall back to '%v'", locale, model.DEFAULT_LOCALE)
+		locale = model.DEFAULT_LOCALE
 	}
 
 	if locales[locale] == "" {
@@ -72,10 +70,20 @@ func SetTranslations(locale string) i18n.TranslateFunc {
 }
 
 func GetTranslationsAndLocale(w http.ResponseWriter, r *http.Request) (i18n.TranslateFunc, string) {
+	// This is for checking against locales like pt_BR or zn_CN
+	headerLocaleFull := strings.Split(r.Header.Get("Accept-Language"), ",")[0]
+	// This is for checking agains locales like en, es
 	headerLocale := strings.Split(strings.Split(r.Header.Get("Accept-Language"), ",")[0], "-")[0]
-	if locales[headerLocale] != "" {
+	defaultLocale := *settings.DefaultClientLocale
+	if locales[headerLocaleFull] != "" {
+		translations := TfuncWithFallback(headerLocaleFull)
+		return translations, headerLocaleFull
+	} else if locales[headerLocale] != "" {
 		translations := TfuncWithFallback(headerLocale)
 		return translations, headerLocale
+	} else if locales[defaultLocale] != "" {
+		translations := TfuncWithFallback(defaultLocale)
+		return translations, headerLocale
 	}
 
 	translations := TfuncWithFallback(model.DEFAULT_LOCALE)
@@ -89,7 +97,7 @@ func TfuncWithFallback(pref string) i18n.TranslateFunc {
 			return translated
 		}
 
-		t, _ := i18n.Tfunc("en")
+		t, _ := i18n.Tfunc(model.DEFAULT_LOCALE)
 		return t(translationID, args...)
 	}
 }
diff --git a/web/web_test.go b/web/web_test.go
index d4d9a5f26..0a9869e40 100644
--- a/web/web_test.go
+++ b/web/web_test.go
@@ -21,7 +21,7 @@ var URL string
 func Setup() {
 	if api.Srv == nil {
 		utils.LoadConfig("config.json")
-		utils.InitTranslations()
+		utils.InitTranslations(utils.Cfg.LocalizationSettings)
 		api.NewServer()
 		api.StartServer()
 		api.InitApi()
diff --git a/webapp/action_creators/global_actions.jsx b/webapp/action_creators/global_actions.jsx
index 6bb0c1732..1c2e5ed36 100644
--- a/webapp/action_creators/global_actions.jsx
+++ b/webapp/action_creators/global_actions.jsx
@@ -390,8 +390,10 @@ export function newLocalizationSelected(locale) {
             translations: en
         });
     } else {
+        const localeInfo = I18n.getLanguageInfo(locale) || I18n.getLanguageInfo(global.window.mm_config.DefaultClientLocale);
+
         Client.getTranslations(
-            I18n.getLanguageInfo(locale).url,
+            localeInfo.url,
             (data) => {
                 AppDispatcher.handleServerAction({
                     type: ActionTypes.RECEIVED_LOCALE,
@@ -406,10 +408,11 @@ export function newLocalizationSelected(locale) {
     }
 }
 
-export function loadBrowserLocale() {
-    let locale = (navigator.languages && navigator.languages.length > 0 ? navigator.languages[0] :
-        (navigator.language || navigator.userLanguage)).split('-')[0];
-    if (!I18n.getLanguages()[locale]) {
+export function loadDefaultLocale() {
+    const defaultLocale = global.window.mm_config.DefaultClientLocale;
+    let locale = global.window.mm_user ? global.window.mm_user.locale || defaultLocale : defaultLocale;
+
+    if (!I18n.getLanguageInfo(locale)) {
         locale = 'en';
     }
     return newLocalizationSelected(locale);
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index cdb7e29d5..9548a7763 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -293,6 +293,15 @@ export default class AdminSidebar extends React.Component {
                                     }
                                 />
                                 <AdminSidebarSection
+                                    name='localization'
+                                    title={
+                                        <FormattedMessage
+                                            id='admin.sidebar.localization'
+                                            defaultMessage='Localization'
+                                        />
+                                    }
+                                />
+                                <AdminSidebarSection
                                     name='users_and_teams'
                                     title={
                                         <FormattedMessage
diff --git a/webapp/components/admin_console/localization_settings.jsx b/webapp/components/admin_console/localization_settings.jsx
new file mode 100644
index 000000000..6876e0c36
--- /dev/null
+++ b/webapp/components/admin_console/localization_settings.jsx
@@ -0,0 +1,145 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as I18n from 'i18n/i18n.jsx';
+
+import AdminSettings from './admin_settings.jsx';
+import {FormattedMessage} from 'react-intl';
+import SettingsGroup from './settings_group.jsx';
+import DropdownSetting from './dropdown_setting.jsx';
+import MultiSelectSetting from './multiselect_settings.jsx';
+
+export default class LocalizationSettings extends AdminSettings {
+    constructor(props) {
+        super(props);
+
+        this.getConfigFromState = this.getConfigFromState.bind(this);
+
+        this.renderSettings = this.renderSettings.bind(this);
+        this.canSave = this.canSave.bind(this);
+
+        const locales = I18n.getAllLanguages();
+
+        this.state = Object.assign(this.state, {
+            hasErrors: false,
+            defaultServerLocale: props.config.LocalizationSettings.DefaultServerLocale,
+            defaultClientLocale: props.config.LocalizationSettings.DefaultClientLocale,
+            availableLocales: props.config.LocalizationSettings.AvailableLocales.split(','),
+            languages: Object.keys(locales).map((l) => {
+                return {value: locales[l].value, text: locales[l].name};
+            })
+        });
+    }
+
+    canSave() {
+        return this.state.availableLocales.join(',').indexOf(this.state.defaultClientLocale) !== -1;
+    }
+
+    getConfigFromState(config) {
+        config.LocalizationSettings.DefaultServerLocale = this.state.defaultServerLocale;
+        config.LocalizationSettings.DefaultClientLocale = this.state.defaultClientLocale;
+        config.LocalizationSettings.AvailableLocales = this.state.availableLocales.join(',');
+
+        return config;
+    }
+
+    renderTitle() {
+        return (
+            <h3>
+                <FormattedMessage
+                    id='admin.general.title'
+                    defaultMessage='General Settings'
+                />
+            </h3>
+        );
+    }
+
+    renderSettings() {
+        return (
+            <SettingsGroup
+                header={
+                    <FormattedMessage
+                        id='admin.general.localization'
+                        defaultMessage='Localization'
+                    />
+                }
+            >
+                <DropdownSetting
+                    id='defaultServerLocale'
+                    values={this.state.languages}
+                    label={
+                        <FormattedMessage
+                            id='admin.general.localization.serverLocaleTitle'
+                            defaultMessage='Default Server Language:'
+                        />
+                    }
+                    value={this.state.defaultServerLocale}
+                    onChange={this.handleChange}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.general.localization.serverLocaleDescription'
+                            defaultMessage='This setting sets the default language for the system messages and logs. (NEED SERVER RESTART)'
+                        />
+                    }
+                />
+                <DropdownSetting
+                    id='defaultClientLocale'
+                    values={this.state.languages}
+                    label={
+                        <FormattedMessage
+                            id='admin.general.localization.clientLocaleTitle'
+                            defaultMessage='Default Client Language:'
+                        />
+                    }
+                    value={this.state.defaultClientLocale}
+                    onChange={this.handleChange}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.general.localization.clientLocaleDescription'
+                            defaultMessage="This setting sets the Default language for newly created users and for pages where the user hasn't loggged in."
+                        />
+                    }
+                />
+                <MultiSelectSetting
+                    id='availableLocales'
+                    values={this.state.languages}
+                    label={
+                        <FormattedMessage
+                            id='admin.general.localization.availableLocalesTitle'
+                            defaultMessage='Available Languages:'
+                        />
+                    }
+                    selected={this.state.availableLocales}
+                    mustBePresent={this.state.defaultClientLocale}
+                    onChange={this.handleChange}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.general.localization.availableLocalesDescription'
+                            defaultMessage='This setting determines the available languages that a user can set using the Account Settings.'
+                        />
+                    }
+                    noResultText={
+                        <FormattedMessage
+                            id='admin.general.localization.availableLocalesNoResults'
+                            defaultMessage='No results found'
+                        />
+                    }
+                    errorText={
+                        <FormattedMessage
+                            id='admin.general.localization.availableLocalesError'
+                            defaultMessage='There has to be at least one language available'
+                        />
+                    }
+                    notPresent={
+                        <FormattedMessage
+                            id='admin.general.localization.availableLocalesNotPresent'
+                            defaultMessage='The default client language must be included in the available list'
+                        />
+                    }
+                />
+            </SettingsGroup>
+        );
+    }
+}
\ No newline at end of file
diff --git a/webapp/components/admin_console/multiselect_settings.jsx b/webapp/components/admin_console/multiselect_settings.jsx
new file mode 100644
index 000000000..deba983de
--- /dev/null
+++ b/webapp/components/admin_console/multiselect_settings.jsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+import React from 'react';
+import ReactSelect from 'react-select';
+
+import Setting from './setting.jsx';
+import FormError from 'components/form_error.jsx';
+
+export default class MultiSelectSetting extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleChange = this.handleChange.bind(this);
+        this.state = {error: false};
+    }
+
+    handleChange(newValue) {
+        const values = newValue.map((n) => {
+            return n.value;
+        });
+
+        if (!newValue || newValue.length === 0) {
+            this.setState({error: this.props.errorText});
+        } else if (this.props.mustBePresent && values.join(',').indexOf(this.props.mustBePresent) === -1) {
+            this.setState({error: this.props.notPresent});
+        } else {
+            this.props.onChange(this.props.id, values);
+            this.setState({error: false});
+        }
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.mustBePresent && newProps.selected.join(',').indexOf(newProps.mustBePresent) === -1) {
+            this.setState({error: this.props.notPresent});
+        } else {
+            this.setState({error: false});
+        }
+    }
+
+    render() {
+        return (
+            <Setting
+                label={this.props.label}
+                inputId={this.props.id}
+                helpText={this.props.helpText}
+            >
+                <ReactSelect
+                    id={this.props.id}
+                    multi={true}
+                    labelKey='text'
+                    options={this.props.values}
+                    joinValues={true}
+                    disabled={this.props.disabled}
+                    noResultsText={this.props.noResultText}
+                    onChange={this.handleChange}
+                    value={this.props.selected}
+                />
+                <FormError error={this.state.error}/>
+            </Setting>
+        );
+    }
+}
+
+MultiSelectSetting.defaultProps = {
+    disabled: false
+};
+
+MultiSelectSetting.propTypes = {
+    id: React.PropTypes.string.isRequired,
+    values: React.PropTypes.array.isRequired,
+    label: React.PropTypes.node.isRequired,
+    selected: React.PropTypes.array.isRequired,
+    mustBePresent: React.PropTypes.string,
+    onChange: React.PropTypes.func.isRequired,
+    disabled: React.PropTypes.bool,
+    helpText: React.PropTypes.node,
+    noResultText: React.PropTypes.node,
+    errorText: React.PropTypes.node,
+    notPresent: React.PropTypes.node
+};
\ No newline at end of file
diff --git a/webapp/components/root.jsx b/webapp/components/root.jsx
index 0adbc7f04..d27a6d8ac 100644
--- a/webapp/components/root.jsx
+++ b/webapp/components/root.jsx
@@ -6,6 +6,7 @@
 
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 import LocalizationStore from 'stores/localization_store.jsx';
+import Client from 'utils/web_client.jsx';
 
 import {IntlProvider} from 'react-intl';
 
@@ -28,7 +29,10 @@ export default class Root extends React.Component {
         this.redirectIfNecessary = this.redirectIfNecessary.bind(this);
     }
     localizationChanged() {
-        this.setState({locale: LocalizationStore.getLocale(), translations: LocalizationStore.getTranslations()});
+        const locale = LocalizationStore.getLocale();
+
+        Client.setAcceptLanguage(locale);
+        this.setState({locale, translations: LocalizationStore.getTranslations()});
     }
 
     redirectIfNecessary(props) {
@@ -63,7 +67,7 @@ export default class Root extends React.Component {
         FastClick.attach(document.body);
 
         // Get our localizaiton
-        GlobalActions.loadBrowserLocale();
+        GlobalActions.loadDefaultLocale();
 
         // Redirect if Necessary
         this.redirectIfNecessary(this.props);
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index fa0118d1e..27e7c93a4 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -632,7 +632,11 @@ export default class UserSettingsDisplay extends React.Component {
             );
         }
 
+        const userLocale = this.props.user.locale;
         if (this.props.activeSection === 'languages') {
+            if (!I18n.isLanguageAvailable(userLocale)) {
+                this.props.user.locale = global.window.mm_config.DefaultClientLocale;
+            }
             languagesSection = (
                 <ManageLanguages
                     user={this.props.user}
@@ -643,7 +647,12 @@ export default class UserSettingsDisplay extends React.Component {
                 />
             );
         } else {
-            var locale = I18n.getLanguageInfo(this.props.user.locale).name;
+            let locale;
+            if (I18n.isLanguageAvailable(userLocale)) {
+                locale = I18n.getLanguageInfo(userLocale).name;
+            } else {
+                locale = I18n.getLanguageInfo(global.window.mm_config.DefaultClientLocale).name;
+            }
 
             languagesSection = (
                 <SettingItemMin
diff --git a/webapp/i18n/i18n.jsx b/webapp/i18n/i18n.jsx
index 2214fd386..783cef975 100644
--- a/webapp/i18n/i18n.jsx
+++ b/webapp/i18n/i18n.jsx
@@ -4,7 +4,7 @@
 const es = require('!!file?name=i18n/[name].[ext]!./es.json');
 const fr = require('!!file?name=i18n/[name].[ext]!./fr.json');
 const ja = require('!!file?name=i18n/[name].[ext]!./ja.json');
-const pt = require('!!file?name=i18n/[name].[ext]!./pt.json');
+const pt_BR = require('!!file?name=i18n/[name].[ext]!./pt-BR.json'); //eslint-disable-line camelcase
 
 import {addLocaleData} from 'react-intl';
 import enLocaleData from 'react-intl/locale-data/en';
@@ -34,19 +34,47 @@ const languages = {
         name: '日本語 (Beta)',
         url: ja
     },
-    pt: {
-        value: 'pt',
+    'pt-BR': {
+        value: 'pt-BR',
         name: 'Portugues (Beta)',
-        url: pt
+        url: pt_BR
     }
 };
 
-export function getLanguages() {
+let availableLanguages = null;
+
+function setAvailableLanguages() {
+    const available = global.window.mm_config.AvailableLocales.split(',');
+
+    availableLanguages = {};
+
+    available.forEach((l) => {
+        if (languages[l]) {
+            availableLanguages[l] = languages[l];
+        }
+    });
+}
+
+export function getAllLanguages() {
     return languages;
 }
 
+export function getLanguages() {
+    if (!availableLanguages) {
+        setAvailableLanguages();
+    }
+    return availableLanguages;
+}
+
 export function getLanguageInfo(locale) {
-    return languages[locale];
+    if (!availableLanguages) {
+        setAvailableLanguages();
+    }
+    return availableLanguages[locale];
+}
+
+export function isLanguageAvailable(locale) {
+    return !!availableLanguages[locale];
 }
 
 export function safariFix(callback) {
diff --git a/webapp/i18n/pt.json b/webapp/i18n/pt-BR.json
index a18de4139..a18de4139 100644
--- a/webapp/i18n/pt.json
+++ b/webapp/i18n/pt-BR.json
diff --git a/webapp/package.json b/webapp/package.json
index 380c01a34..df699b773 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -17,8 +17,8 @@
     "jquery": "2.2.3",
     "keymirror": "0.1.1",
     "marked": "mattermost/marked#43e7e590944ea308a4d36f21917118d51a261e74",
-    "mattermost": "mattermost/mattermost-javascript#master",
     "match-at": "0.1.0",
+    "mattermost": "mattermost/mattermost-javascript#master",
     "object-assign": "4.1.0",
     "perfect-scrollbar": "0.6.11",
     "react": "15.0.2",
@@ -26,8 +26,9 @@
     "react-bootstrap": "0.29.3",
     "react-custom-scrollbars": "4.0.0-beta.1",
     "react-dom": "15.0.2",
-    "react-intl": "2.0.0-rc-1",
+    "react-intl": "2.1.2",
     "react-router": "2.4.0",
+    "react-select": "1.0.0-beta13",
     "react-textarea-autosize": "4.0.1",
     "superagent": "1.8.3",
     "twemoji": "2.0.5",
diff --git a/webapp/root.jsx b/webapp/root.jsx
index aef2607ef..d2f7f1099 100644
--- a/webapp/root.jsx
+++ b/webapp/root.jsx
@@ -53,6 +53,7 @@ const ActionTypes = Constants.ActionTypes;
 import AdminConsole from 'components/admin_console/admin_console.jsx';
 import SystemAnalytics from 'components/analytics/system_analytics.jsx';
 import ConfigurationSettings from 'components/admin_console/configuration_settings.jsx';
+import LocalizationSettings from 'components/admin_console/localization_settings.jsx';
 import UsersAndTeamsSettings from 'components/admin_console/users_and_teams_settings.jsx';
 import PrivacySettings from 'components/admin_console/privacy_settings.jsx';
 import LogSettings from 'components/admin_console/log_settings.jsx';
@@ -142,8 +143,8 @@ function preRenderSetup(callwhendone) {
     );
 
     function afterIntl() {
-        I18n.doAddLocaleData();
         $.when(d1).done(() => {
+            I18n.doAddLocaleData();
             callwhendone();
         });
     }
@@ -363,6 +364,10 @@ function renderRootComponent() {
                                 component={ConfigurationSettings}
                             />
                             <Route
+                                path='localization'
+                                component={LocalizationSettings}
+                            />
+                            <Route
                                 path='users_and_teams'
                                 component={UsersAndTeamsSettings}
                             />
diff --git a/webapp/sass/styles.scss b/webapp/sass/styles.scss
index 67e62d023..c42722652 100644
--- a/webapp/sass/styles.scss
+++ b/webapp/sass/styles.scss
@@ -9,6 +9,7 @@
 @import '~perfect-scrollbar/dist/css/perfect-scrollbar.css';
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css';
+@import '~react-select/dist/react-select.css';
 
 // styles.scss
 @import 'utils/module';
diff --git a/webapp/stores/user_store.jsx b/webapp/stores/user_store.jsx
index 855222d47..906a4cf9b 100644
--- a/webapp/stores/user_store.jsx
+++ b/webapp/stores/user_store.jsx
@@ -4,6 +4,9 @@
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import EventEmitter from 'events';
 
+import * as GlobalActions from 'action_creators/global_actions.jsx';
+import LocalizationStore from './localization_store.jsx';
+
 import Constants from 'utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;
 
@@ -100,6 +103,9 @@ class UserStoreClass extends EventEmitter {
         this.saveProfile(user);
         this.currentUserId = user.id;
         global.window.mm_current_user_id = this.currentUserId;
+        if (LocalizationStore.getLocale() !== user.locale) {
+            GlobalActions.newLocalizationSelected(user.locale);
+        }
     }
 
     getCurrentId() {