Ivan - Language selection for system preferences [skip ci]

client/src/app-components/language-selector.js

@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import classNames from 'classnames';
 
 import languageList from 'data/language-list';
+import i18n from 'lib-app/i18n';
 import DropDown from 'core-components/drop-down';
 
 const languageCodes = Object.keys(languageList);
@@ -10,13 +11,15 @@ const languageCodes = Object.keys(languageList);
 class LanguageSelector extends React.Component {
     static propTypes = {
         value: React.PropTypes.oneOf(languageCodes),
-        type: React.PropTypes.oneOf(['allowed', 'supported']),
+        type: React.PropTypes.oneOf(['allowed', 'supported', 'custom']),
+        customList: React.PropTypes.array,
         allowedLanguages: React.PropTypes.array,
         supportedLanguages: React.PropTypes.array
     };
 
     static defaultProps = {
         type: 'allowed',
+        customList: ['en'],
         allowedLanguages: languageCodes,
         supportedLanguages: languageCodes
     };
@@ -75,7 +78,14 @@ class LanguageSelector extends React.Component {
     }
 
     getLanguageList() {
-        return (this.props.type === 'supported') ? this.props.supportedLanguages : this.props.allowedLanguages;
+        switch(this.props.type) {
+            case 'supported':
+                return this.props.supportedLanguages;
+            case 'allowed':
+                return this.props.supportedLanguages;
+            case 'custom':
+                return this.props.customList;
+        }
     }
 }
 

client/src/app/admin/panel/settings/admin-panel-system-preferences.js

@@ -15,13 +15,15 @@ import Button from 'core-components/button';
 import Message from 'core-components/message';
 import InfoTooltip from 'core-components/info-tooltip';
 
+const languageKeys = Object.keys(languageList);
+
 class AdminPanelSystemPreferences extends React.Component {
 
     state = {
         loading: true,
         message: null,
         values: {
-            'maintenance': false
+            maintenance: false
         }
     };
 
@@ -33,7 +35,7 @@ class AdminPanelSystemPreferences extends React.Component {
         return (
             <div className="admin-panel-system-preferences">
                 <Header title={i18n('SYSTEM_PREFERENCES')} description={i18n('SYSTEM_PREFERENCES_DESCRIPTION')}/>
-                <Form values={this.state.values} onChange={values => this.setState({values, message: null})} onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
+                <Form values={this.state.values} onChange={this.onFormChange.bind(this)} onSubmit={this.onSubmit.bind(this)} loading={this.state.loading}>
                     <div className="row">
                         <div className="col-md-12">
                             <div className="admin-panel-system-preferences__maintenance">
@@ -96,7 +98,10 @@ class AdminPanelSystemPreferences extends React.Component {
                             </div>
                         </div>
                         <div className="col-md-6">
-                            <FormField className="admin-panel-system-preferences__default-language-field" name="language" label={i18n('DEFAULT_LANGUAGE')} decorator={LanguageSelector} />
+                            <FormField className="admin-panel-system-preferences__default-language-field" name="language" label={i18n('DEFAULT_LANGUAGE')} decorator={LanguageSelector} fieldProps={{
+                                type: 'custom',
+                                customList: (this.state.values.supportedLanguages && this.state.values.supportedLanguages.length) ? this.state.values.supportedLanguages.map(index => languageKeys[index]) : undefined
+                            }} />
                             <FormField label={i18n('RECAPTCHA_PUBLIC_KEY')} fieldProps={{size: 'large'}} name="reCaptchaKey"/>
                             <FormField label={i18n('RECAPTCHA_PRIVATE_KEY')} fieldProps={{size: 'large'}} name="reCaptchaPrivate"/>
                             <div className="admin-panel-system-preferences__file-attachments">
@@ -139,8 +144,17 @@ class AdminPanelSystemPreferences extends React.Component {
         }
     }
 
+    onFormChange(form) {
+        let values = _.clone(form);
+
+        _.extend(values, {
+            supportedLanguages: _.filter(values.supportedLanguages, (language) => _.includes(values.allowedLanguages, language))
+        });
+
+        this.setState({values, message: null});
+    }
+
     onSubmit(form) {
-        let fullList = Object.keys(languageList);
         this.setState({loading: true});
 
         API.call({
@@ -161,8 +175,8 @@ class AdminPanelSystemPreferences extends React.Component {
                 'maintenance-mode': form['maintenance-mode'],
                 'allow-attachments': form['allow-attachments'],
                 'max-size': form['max-size'],
-                'allowedLanguages': JSON.stringify(form.allowedLanguages.map(index => fullList[index])),
+                'allowedLanguages': JSON.stringify(form.allowedLanguages.map(index => languageKeys[index])),
-                'supportedLanguages': JSON.stringify(form.supportedLanguages.map(index => fullList[index]))
+                'supportedLanguages': JSON.stringify(form.supportedLanguages.map(index => languageKeys[index]))
             }
         }).then(this.onSubmitSuccess.bind(this)).catch(() => this.setState({loading: false, message: 'fail'}));
     }
@@ -189,8 +203,6 @@ class AdminPanelSystemPreferences extends React.Component {
     }
 
     onRecoverSettingsSuccess(result) {
-        let fullList = Object.keys(languageList);
-
         this.setState({
             loading: false,
             values: {
@@ -209,8 +221,8 @@ class AdminPanelSystemPreferences extends React.Component {
                 'maintenance-mode': result.data['maintenance-mode'],
                 'allow-attachments': result.data['allow-attachments'],
                 'max-size': result.data['max-size'],
-                'allowedLanguages': result.data.allowedLanguages.map(lang => (_.indexOf(fullList, lang))),
+                'allowedLanguages': result.data.allowedLanguages.map(lang => (_.indexOf(languageKeys, lang))),
-                'supportedLanguages': result.data.supportedLanguages.map(lang => (_.indexOf(fullList, lang)))
+                'supportedLanguages': result.data.supportedLanguages.map(lang => (_.indexOf(languageKeys, lang)))
             }
         });
     }

client/src/core-components/form-field.js

@@ -22,7 +22,7 @@ class FormField extends React.Component {
         onBlur: React.PropTypes.func,
         required: React.PropTypes.bool,
         error: React.PropTypes.string,
-        infoMessage: React.PropTypes.string,
+        infoMessage: React.PropTypes.node,
         value: React.PropTypes.any,
         field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group']),
         fieldProps: React.PropTypes.object