diff options
Diffstat (limited to 'webapp/components/admin_console')
3 files changed, 234 insertions, 0 deletions
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 |