diff options
Diffstat (limited to 'web/react/components/user_settings/user_settings_security.jsx')
-rw-r--r-- | web/react/components/user_settings/user_settings_security.jsx | 153 |
1 files changed, 122 insertions, 31 deletions
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx index 5a21abd19..0c9e722de 100644 --- a/web/react/components/user_settings/user_settings_security.jsx +++ b/web/react/components/user_settings/user_settings_security.jsx @@ -13,7 +13,40 @@ import * as Client from '../../utils/client.jsx'; import * as AsyncClient from '../../utils/async_client.jsx'; import Constants from '../../utils/constants.jsx'; -export default class SecurityTab extends React.Component { +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + currentPasswordError: { + id: 'user.settings.security.currentPasswordError', + defaultMessage: 'Please enter your current password' + }, + passwordLengthError: { + id: 'user.settings.security.passwordLengthError', + defaultMessage: 'New passwords must be at least {chars} characters' + }, + passwordMatchError: { + id: 'user.settings.security.passwordMatchError', + defaultMessage: 'The new passwords you entered do not match' + }, + password: { + id: 'user.settings.security.password', + defaultMessage: 'Password' + }, + lastUpdated: { + id: 'user.settings.security.lastUpdated', + defaultMessage: 'Last updated {date} at {time}' + }, + method: { + id: 'user.settings.security.method', + defaultMessage: 'Sign-in Method' + }, + close: { + id: 'user.settings.security.close', + defaultMessage: 'Close' + } +}); + +class SecurityTab extends React.Component { constructor(props) { super(props); @@ -43,18 +76,19 @@ export default class SecurityTab extends React.Component { var newPassword = this.state.newPassword; var confirmPassword = this.state.confirmPassword; + const {formatMessage} = this.props.intl; if (currentPassword === '') { - this.setState({passwordError: 'Please enter your current password', serverError: ''}); + this.setState({passwordError: formatMessage(holders.currentPasswordError), serverError: ''}); return; } if (newPassword.length < Constants.MIN_PASSWORD_LENGTH) { - this.setState({passwordError: 'New passwords must be at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters', serverError: ''}); + this.setState({passwordError: formatMessage(holders.passwordLengthError, {chars: Constants.MIN_PASSWORD_LENGTH}), serverError: ''}); return; } if (newPassword !== confirmPassword) { - this.setState({passwordError: 'The new passwords you entered do not match', serverError: ''}); + this.setState({passwordError: formatMessage(holders.passwordMatchError), serverError: ''}); return; } @@ -92,6 +126,7 @@ export default class SecurityTab extends React.Component { } createPasswordSection() { let updateSectionStatus; + const {formatMessage} = this.props.intl; if (this.props.activeSection === 'password' && this.props.user.auth_service === '') { const inputs = []; @@ -101,7 +136,12 @@ export default class SecurityTab extends React.Component { key='currentPasswordUpdateForm' className='form-group' > - <label className='col-sm-5 control-label'>{'Current Password'}</label> + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.security.currentPassword' + defaultMessage='Current Password' + /> + </label> <div className='col-sm-7'> <input className='form-control' @@ -117,7 +157,12 @@ export default class SecurityTab extends React.Component { key='newPasswordUpdateForm' className='form-group' > - <label className='col-sm-5 control-label'>{'New Password'}</label> + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.security.newPassword' + defaultMessage='New Password' + /> + </label> <div className='col-sm-7'> <input className='form-control' @@ -133,7 +178,12 @@ export default class SecurityTab extends React.Component { key='retypeNewPasswordUpdateForm' className='form-group' > - <label className='col-sm-5 control-label'>{'Retype New Password'}</label> + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.security.retypePassword' + defaultMessage='Retype New Password' + /> + </label> <div className='col-sm-7'> <input className='form-control' @@ -153,7 +203,7 @@ export default class SecurityTab extends React.Component { return ( <SettingItemMax - title='Password' + title={formatMessage(holders.password)} inputs={inputs} submit={this.submitPassword} server_error={this.state.serverError} @@ -165,20 +215,16 @@ export default class SecurityTab extends React.Component { var describe; var d = new Date(this.props.user.last_password_update); - var hour = '12'; - if (d.getHours() % 12) { - hour = String(d.getHours() % 12); - } - var min = String(d.getMinutes()); - if (d.getMinutes() < 10) { - min = '0' + d.getMinutes(); - } var timeOfDay = ' am'; if (d.getHours() >= 12) { timeOfDay = ' pm'; } - describe = 'Last updated ' + Constants.MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' at ' + hour + ':' + min + timeOfDay; + const locale = global.window.mm_locale; + describe = formatMessage(holders.lastUpdated, { + date: d.toLocaleDateString(locale, {month: 'short', day: '2-digit', year: 'numeric'}), + time: d.toLocaleTimeString(locale, {hours12: true, hour: '2-digit', minute: '2-digit'}) + timeOfDay + }); updateSectionStatus = function updateSection() { this.props.updateSection('password'); @@ -186,7 +232,7 @@ export default class SecurityTab extends React.Component { return ( <SettingItemMin - title='Password' + title={formatMessage(holders.password)} describe={describe} updateSection={updateSectionStatus} /> @@ -208,7 +254,10 @@ export default class SecurityTab extends React.Component { className='btn btn-primary' href={'/' + teamName + '/claim?email=' + encodeURIComponent(user.email)} > - {'Switch to using email and password'} + <FormattedMessage + id='user.settings.security.switchEmail' + defaultMessage='Switch to using email and password' + /> </a> <br/> </div> @@ -223,7 +272,10 @@ export default class SecurityTab extends React.Component { className='btn btn-primary' href={'/' + teamName + '/claim?email=' + encodeURIComponent(user.email) + '&new_type=' + Constants.GITLAB_SERVICE} > - {'Switch to using GitLab SSO'} + <FormattedMessage + id='user.settings.security.switchGitlab' + defaultMessage='Switch to using GitLab SSO' + /> </a> <br/> </div> @@ -238,7 +290,10 @@ export default class SecurityTab extends React.Component { className='btn btn-primary' href={'/' + teamName + '/claim?email=' + encodeURIComponent(user.email) + '&new_type=' + Constants.GOOGLE_SERVICE} > - {'Switch to using Google SSO'} + <FormattedMessage + id='user.settings.security.switchGoogle' + defaultMessage='Switch to using Google SSO' + /> </a> <br/> </div> @@ -260,11 +315,18 @@ export default class SecurityTab extends React.Component { e.preventDefault(); }.bind(this); - const extraInfo = <span>{'You may only have one sign-in method at a time. Switching sign-in method will send an email notifying you if the change was successful.'}</span>; + const extraInfo = ( + <span> + <FormattedMessage + id='user.settings.security.oneSignin' + defaultMessage='You may only have one sign-in method at a time. Switching sign-in method will send an email notifying you if the change was successful.' + /> + </span> + ); return ( <SettingItemMax - title='Sign-in Method' + title={this.props.intl.formatMessage(holders.method)} extraInfo={extraInfo} inputs={inputs} server_error={this.state.serverError} @@ -277,14 +339,24 @@ export default class SecurityTab extends React.Component { this.props.updateSection('signin'); }.bind(this); - let describe = 'Email and Password'; + let describe = ( + <FormattedMessage + id='user.settings.security.emailPwd' + defaultMessage='Email and Password' + /> + ); if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { - describe = 'GitLab SSO'; + describe = ( + <FormattedMessage + id='user.settings.security.gitlab' + defaultMessage='GitLab SSO' + /> + ); } return ( <SettingItemMin - title='Sign-in Method' + title={this.props.intl.formatMessage(holders.method)} describe={describe} updateSection={updateSectionStatus} /> @@ -309,7 +381,7 @@ export default class SecurityTab extends React.Component { type='button' className='close' data-dismiss='modal' - aria-label='Close' + aria-label={this.props.intl.formatMessage(holders.close)} onClick={this.props.closeModal} > <span aria-hidden='true'>{'×'}</span> @@ -322,11 +394,19 @@ export default class SecurityTab extends React.Component { className='modal-back' onClick={this.props.collapseModal} /> - {'Security Settings'} + <FormattedMessage + id='user.settings.security.title' + defaultMessage='Security Settings' + /> </h4> </div> <div className='user-settings'> - <h3 className='tab-header'>{'Security Settings'}</h3> + <h3 className='tab-header'> + <FormattedMessage + id='user.settings.security.title' + defaultMessage='Security Settings' + /> + </h3> <div className='divider-dark first'/> {passwordSection} <div className='divider-light'/> @@ -337,14 +417,22 @@ export default class SecurityTab extends React.Component { className='security-links theme' dialogType={AccessHistoryModal} > - <i className='fa fa-clock-o'></i>{'View Access History'} + <i className='fa fa-clock-o'></i> + <FormattedMessage + id='user.settings.security.viewHistory' + defaultMessage='View Access History' + /> </ToggleModalButton> <b> </b> <ToggleModalButton className='security-links theme' dialogType={ActivityLogModal} > - <i className='fa fa-clock-o'></i>{'View and Logout of Active Sessions'} + <i className='fa fa-clock-o'></i> + <FormattedMessage + id='user.settings.security.logoutActiveSessions' + defaultMessage='View and Logout of Active Sessions' + /> </ToggleModalButton> </div> </div> @@ -357,6 +445,7 @@ SecurityTab.defaultProps = { activeSection: '' }; SecurityTab.propTypes = { + intl: intlShape.isRequired, user: React.PropTypes.object, activeSection: React.PropTypes.string, updateSection: React.PropTypes.func, @@ -365,3 +454,5 @@ SecurityTab.propTypes = { collapseModal: React.PropTypes.func.isRequired, setEnforceFocus: React.PropTypes.func.isRequired }; + +export default injectIntl(SecurityTab);
\ No newline at end of file |