diff options
Diffstat (limited to 'webapp/components/user_settings/manage_languages.jsx')
-rw-r--r-- | webapp/components/user_settings/manage_languages.jsx | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/webapp/components/user_settings/manage_languages.jsx b/webapp/components/user_settings/manage_languages.jsx new file mode 100644 index 000000000..094eaa127 --- /dev/null +++ b/webapp/components/user_settings/manage_languages.jsx @@ -0,0 +1,124 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +import SettingItemMax from '../setting_item_max.jsx'; + +import * as Client from 'utils/client.jsx'; +import * as I18n from 'i18n/i18n.jsx'; +import * as GlobalActions from 'action_creators/global_actions.jsx'; + +import {FormattedMessage} from 'react-intl'; + +import React from 'react'; + +export default class ManageLanguage extends React.Component { + constructor(props) { + super(props); + + this.setupInitialState = this.setupInitialState.bind(this); + this.setLanguage = this.setLanguage.bind(this); + this.changeLanguage = this.changeLanguage.bind(this); + this.submitUser = this.submitUser.bind(this); + this.state = this.setupInitialState(props); + } + setupInitialState(props) { + var user = props.user; + return { + locale: user.locale + }; + } + setLanguage(e) { + this.setState({locale: e.target.value}); + } + changeLanguage(e) { + e.preventDefault(); + + var user = this.props.user; + var locale = this.state.locale; + + user.locale = locale; + + this.submitUser(user); + } + submitUser(user) { + Client.updateUser(user, + () => { + GlobalActions.newLocalizationSelected(user.locale); + }, + (err) => { + let serverError; + if (err.message) { + serverError = err.message; + } else { + serverError = err; + } + this.setState({serverError}); + } + ); + } + render() { + let serverError; + if (this.state.serverError) { + serverError = <label className='has-error'>{this.state.serverError}</label>; + } + + const options = []; + const languages = I18n.getLanguages(); + for (const key in languages) { + if (languages.hasOwnProperty(key)) { + const lang = languages[key]; + options.push( + <option + key={lang.value} + value={lang.value} + > + {lang.name} + </option> + ); + } + } + + const input = ( + <div key='changeLanguage'> + <br/> + <label className='control-label'> + <FormattedMessage + id='user.settings.languages.change' + defaultMessage='Change interface language' + /> + </label> + <div className='padding-top'> + <select + ref='language' + className='form-control' + value={this.state.locale} + onChange={this.setLanguage} + > + {options} + </select> + {serverError} + </div> + </div> + ); + + return ( + <SettingItemMax + title={ + <FormattedMessage + id='user.settings.display.language' + defaultMessage='Language' + /> + } + width='medium' + submit={this.changeLanguage} + inputs={[input]} + updateSection={this.props.updateSection} + /> + ); + } +} + +ManageLanguage.propTypes = { + user: React.PropTypes.object.isRequired, + updateSection: React.PropTypes.func.isRequired +}; |