diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/claim/claim_account.jsx | 11 | ||||
-rw-r--r-- | web/react/components/claim/email_to_sso.jsx | 61 | ||||
-rw-r--r-- | web/react/components/claim/sso_to_email.jsx | 72 | ||||
-rw-r--r-- | web/react/components/suggestion/at_mention_provider.jsx | 16 | ||||
-rw-r--r-- | web/react/components/suggestion/search_suggestion_list.jsx | 17 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 65 | ||||
-rw-r--r-- | web/react/components/tutorial/tutorial_tip.jsx | 25 |
7 files changed, 227 insertions, 40 deletions
diff --git a/web/react/components/claim/claim_account.jsx b/web/react/components/claim/claim_account.jsx index f38f558db..87026b762 100644 --- a/web/react/components/claim/claim_account.jsx +++ b/web/react/components/claim/claim_account.jsx @@ -4,6 +4,8 @@ import EmailToSSO from './email_to_sso.jsx'; import SSOToEmail from './sso_to_email.jsx'; +import {FormattedMessage} from 'mm-intl'; + export default class ClaimAccount extends React.Component { constructor(props) { super(props); @@ -13,7 +15,14 @@ export default class ClaimAccount extends React.Component { render() { let content; if (this.props.email === '') { - content = <p>{'No email specified.'}</p>; + content = ( + <p> + <FormattedMessage + id='claim.account.noEmail' + defaultMessage='No email specified' + /> + </p> + ); } else if (this.props.currentType === '' && this.props.newType !== '') { content = ( <EmailToSSO diff --git a/web/react/components/claim/email_to_sso.jsx b/web/react/components/claim/email_to_sso.jsx index ac0cf876b..3d4b9e91f 100644 --- a/web/react/components/claim/email_to_sso.jsx +++ b/web/react/components/claim/email_to_sso.jsx @@ -4,7 +4,20 @@ import * as Utils from '../../utils/utils.jsx'; import * as Client from '../../utils/client.jsx'; -export default class EmailToSSO extends React.Component { +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + pwdError: { + id: 'claim.email_to_sso.pwdError', + defaultMessage: 'Please enter your password.' + }, + pwd: { + id: 'claim.email_to_sso.pwd', + defaultMessage: 'Password' + } +}); + +class EmailToSSO extends React.Component { constructor(props) { super(props); @@ -18,7 +31,7 @@ export default class EmailToSSO extends React.Component { var password = ReactDOM.findDOMNode(this.refs.password).value.trim(); if (!password) { - state.error = 'Please enter your password.'; + state.error = this.props.intl.formatMessage(holders.pwdError); this.setState(state); return; } @@ -59,17 +72,42 @@ export default class EmailToSSO extends React.Component { return ( <div className='col-sm-12'> <div className='signup-team__container'> - <h3>{'Switch Email/Password Account to ' + uiType}</h3> + <h3> + <FormattedMessage + id='claim.email_to_sso.title' + defaultMessage='Switch Email/Password Account to {uiType}' + values={{ + uiType: uiType + }} + /> + </h3> <form onSubmit={this.submit}> - <p>{'Upon claiming your account, you will only be able to login with ' + Utils.toTitleCase(this.props.type) + ' SSO.'}</p> - <p>{'Enter the password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p> + <p> + <FormattedMessage + id='claim.email_to_sso.ssoType' + defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO' + values={{ + type: Utils.toTitleCase(this.props.type) + }} + /> + </p> + <p> + <FormattedMessage + id='claim.email_to_sso.enterPwd' + defaultMessage='Enter the password for your {team} {site} account' + values={{ + team: this.props.teamDisplayName, + site: global.window.mm_config.SiteName + }} + /> + </p> <div className={formClass}> <input type='password' className='form-control' name='password' ref='password' - placeholder='Password' + placeholder={this.props.intl.formatMessage(holders.pwd)} spellCheck='false' /> </div> @@ -78,7 +116,13 @@ export default class EmailToSSO extends React.Component { type='submit' className='btn btn-primary' > - {'Switch account to ' + uiType} + <FormattedMessage + id='claim.email_to_sso.switchTo' + defaultMessage='Switch account to {uiType}' + values={{ + uiType: uiType + }} + /> </button> </form> </div> @@ -90,8 +134,11 @@ export default class EmailToSSO extends React.Component { EmailToSSO.defaultProps = { }; EmailToSSO.propTypes = { + intl: intlShape.isRequired, type: React.PropTypes.string.isRequired, email: React.PropTypes.string.isRequired, teamName: React.PropTypes.string.isRequired, teamDisplayName: React.PropTypes.string.isRequired }; + +export default injectIntl(EmailToSSO);
\ No newline at end of file diff --git a/web/react/components/claim/sso_to_email.jsx b/web/react/components/claim/sso_to_email.jsx index 0868b7f2f..73ff13cc9 100644 --- a/web/react/components/claim/sso_to_email.jsx +++ b/web/react/components/claim/sso_to_email.jsx @@ -4,7 +4,28 @@ import * as Utils from '../../utils/utils.jsx'; import * as Client from '../../utils/client.jsx'; -export default class SSOToEmail extends React.Component { +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + enterPwd: { + id: 'claim.sso_to_email.enterPwd', + defaultMessage: 'Please enter a password.' + }, + pwdNotMatch: { + id: 'claim.sso_to_email.pwdNotMatch', + defaultMessage: 'Password do not match.' + }, + newPwd: { + id: 'claim.sso_to_email.newPwd', + defaultMessage: 'New Password' + }, + confirm: { + id: 'claim.sso_to_email.confirm', + defaultMessage: 'Confirm Password' + } +}); + +class SSOToEmail extends React.Component { constructor(props) { super(props); @@ -13,19 +34,20 @@ export default class SSOToEmail extends React.Component { this.state = {}; } submit(e) { + const {formatMessage} = this.props.intl; e.preventDefault(); const state = {}; const password = ReactDOM.findDOMNode(this.refs.password).value.trim(); if (!password) { - state.error = 'Please enter a password.'; + state.error = formatMessage(holders.enterPwd); this.setState(state); return; } const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim(); if (!confirmPassword || password !== confirmPassword) { - state.error = 'Passwords do not match.'; + state.error = formatMessage(holders.pwdNotMatch); this.setState(state); return; } @@ -50,6 +72,7 @@ export default class SSOToEmail extends React.Component { ); } render() { + const {formatMessage} = this.props.intl; var error = null; if (this.state.error) { error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; @@ -65,17 +88,39 @@ export default class SSOToEmail extends React.Component { return ( <div className='col-sm-12'> <div className='signup-team__container'> - <h3>{'Switch ' + uiType + ' Account to Email'}</h3> + <h3> + <FormattedMessage + id='claim.sso_to_email.title' + defaultMessage='Switch {type} Account to Email' + values={{ + type: uiType + }} + /> + </h3> <form onSubmit={this.submit}> - <p>{'Upon changing your account type, you will only be able to login with your email and password.'}</p> - <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p> + <p> + <FormattedMessage + id='claim.sso_to_email.description' + defaultMessage='Upon changing your account type, you will only be able to login with your email and password.' + /> + </p> + <p> + <FormattedMessage + id='claim.sso_to_email_newPwd' + defaultMessage='Enter a new password for your {team} {site} account' + values={{ + team: this.props.teamDisplayName, + site: global.window.mm_config.SiteName + }} + /> + </p> <div className={formClass}> <input type='password' className='form-control' name='password' ref='password' - placeholder='New Password' + placeholder={formatMessage(holders.newPwd)} spellCheck='false' /> </div> @@ -85,7 +130,7 @@ export default class SSOToEmail extends React.Component { className='form-control' name='passwordconfirm' ref='passwordconfirm' - placeholder='Confirm Password' + placeholder={formatMessage(holders.confirm)} spellCheck='false' /> </div> @@ -94,7 +139,13 @@ export default class SSOToEmail extends React.Component { type='submit' className='btn btn-primary' > - {'Switch ' + uiType + ' account to email and password'} + <FormattedMessage + id='claim.sso_to_email.switchTo' + defaultMessage='Switch {type} to email and password' + values={{ + type: uiType + }} + /> </button> </form> </div> @@ -106,8 +157,11 @@ export default class SSOToEmail extends React.Component { SSOToEmail.defaultProps = { }; SSOToEmail.propTypes = { + intl: intlShape.isRequired, currentType: React.PropTypes.string.isRequired, email: React.PropTypes.string.isRequired, teamName: React.PropTypes.string.isRequired, teamDisplayName: React.PropTypes.string.isRequired }; + +export default injectIntl(SSOToEmail);
\ No newline at end of file diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx index e502c981d..50231ad15 100644 --- a/web/react/components/suggestion/at_mention_provider.jsx +++ b/web/react/components/suggestion/at_mention_provider.jsx @@ -5,6 +5,8 @@ import SuggestionStore from '../../stores/suggestion_store.jsx'; import UserStore from '../../stores/user_store.jsx'; import * as Utils from '../../utils/utils.jsx'; +import {FormattedMessage} from 'mm-intl'; + const MaxUserSuggestions = 40; class AtMentionSuggestion extends React.Component { @@ -16,11 +18,21 @@ class AtMentionSuggestion extends React.Component { let icon; if (item.username === 'all') { username = 'all'; - description = 'Notifies everyone in the team'; + description = ( + <FormattedMessage + id='suggestion.mention.all' + defaultMessage='Notifies everyone in the team' + /> + ); icon = <i className='mention-img fa fa-users fa-2x' />; } else if (item.username === 'channel') { username = 'channel'; - description = 'Notifies everyone in the channel'; + description = ( + <FormattedMessage + id='suggestion.mention.channel' + defaultMessage='Notifies everyone in the channel' + /> + ); icon = <i className='mention-img fa fa-users fa-2x' />; } else { username = item.username; diff --git a/web/react/components/suggestion/search_suggestion_list.jsx b/web/react/components/suggestion/search_suggestion_list.jsx index 3378a33a0..40f5d8777 100644 --- a/web/react/components/suggestion/search_suggestion_list.jsx +++ b/web/react/components/suggestion/search_suggestion_list.jsx @@ -3,7 +3,8 @@ import Constants from '../../utils/constants.jsx'; import SuggestionList from './suggestion_list.jsx'; -import * as Utils from '../../utils/utils.jsx'; + +import {FormattedMessage} from 'mm-intl'; export default class SearchSuggestionList extends SuggestionList { componentDidUpdate(prevProps, prevState) { @@ -19,9 +20,19 @@ export default class SearchSuggestionList extends SuggestionList { renderChannelDivider(type) { let text; if (type === Constants.OPEN_CHANNEL) { - text = 'Public ' + Utils.getChannelTerm(type) + 's'; + text = ( + <FormattedMessage + id='suggestion.search.public' + defaultMessage='Public Channels' + /> + ); } else { - text = 'Private ' + Utils.getChannelTerm(type) + 's'; + text = ( + <FormattedMessage + id='suggestion.search.private' + defaultMessage='Public Groups' + /> + ); } return ( diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index 7ab1e5512..78cfb7b60 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -9,6 +9,9 @@ import * as Utils from '../../utils/utils.jsx'; import * as AsyncClient from '../../utils/async_client.jsx'; import Constants from '../../utils/constants.jsx'; + +import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl'; + const Preferences = Constants.Preferences; const NUM_SCREENS = 3; @@ -61,10 +64,13 @@ export default class TutorialIntroScreens extends React.Component { return ( <div> - <h3>{'Welcome to:'}</h3> - <h1>{'Mattermost'}</h1> - <p>{'Your team communication all in one place, instantly searchable and available anywhere.'}</p> - <p>{'Keep your team connected to help them achieve what matters most.'}</p> + <FormattedHTMLMessage + id='tutorial_intro.screenOne' + defaultMessage='<h3>Welcome to:</h3> + <h1>Mattermost</h1> + <p>Your team communication all in one place, instantly searchable and available anywhere</p> + <p>Keep your team connected to help them achieve what matters most.</p>' + /> {circles} </div> ); @@ -74,9 +80,12 @@ export default class TutorialIntroScreens extends React.Component { return ( <div> - <h3>{'How Mattermost works:'}</h3> - <p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p> - <p>{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}</p> + <FormattedHTMLMessage + id='tutorial_intro.screenTwo' + defaultMessage='<h3>How Mattermost works:</h3> + <p>Communication happens in public discussion channels, private groups and direct messages.</p> + <p>Everything is archived and searchable from any web-enabled desktop, laptop or phone.</p>' + /> {circles} </div> ); @@ -92,7 +101,10 @@ export default class TutorialIntroScreens extends React.Component { data-toggle='modal' data-target='#invite_member' > - {'Invite teammates'} + <FormattedMessage + id='tutorial_intro.invite' + defaultMessage='Invite teammates' + /> </a> ); } else { @@ -105,7 +117,10 @@ export default class TutorialIntroScreens extends React.Component { data-title='Team Invite' data-value={Utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + team.id} > - {'Invite teammates'} + <FormattedMessage + id='tutorial_intro.teamInvite' + defaultMessage='Team Invite' + /> </a> ); } @@ -116,7 +131,10 @@ export default class TutorialIntroScreens extends React.Component { if (global.window.mm_config.SupportEmail) { supportInfo = ( <p> - {'Need anything, just email us at '} + <FormattedMessage + id='tutorial_intro.support' + defaultMessage='Need anything, just email us at ' + /> <a href={'mailto:' + global.window.mm_config.SupportEmail} target='_blank' @@ -130,13 +148,24 @@ export default class TutorialIntroScreens extends React.Component { return ( <div> - <h3>{'You’re all set'}</h3> + <h3> + <FormattedMessage + id='tutorial_intro.allSet' + defaultMessage='You’re all set' + /> + </h3> <p> {inviteModalLink} - {' when you’re ready.'} + <FormattedMessage + id='tutorial_intro.whenReady' + defaultMessage=' when you’re ready.' + /> </p> {supportInfo} - {'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'} + <FormattedMessage + id='tutorial_intro.end' + defaultMessage='Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.' + /> {circles} </div> ); @@ -186,14 +215,20 @@ export default class TutorialIntroScreens extends React.Component { tabIndex='1' onClick={this.handleNext} > - {'Next'} + <FormattedMessage + id='tutorial_intro.next' + defaultMessage='Next' + /> </button> <a className='tutorial-skip' href='#' onClick={this.skipTutorial} > - {'Skip tutorial'} + <FormattedMessage + id='tutorial_intro.skip' + defaultMessage='Skip tutorial' + /> </a> </div> </div> diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx index 03ecdabab..3bab7570a 100644 --- a/web/react/components/tutorial/tutorial_tip.jsx +++ b/web/react/components/tutorial/tutorial_tip.jsx @@ -6,6 +6,9 @@ import PreferenceStore from '../../stores/preference_store.jsx'; import * as AsyncClient from '../../utils/async_client.jsx'; import Constants from '../../utils/constants.jsx'; + +import {FormattedMessage} from 'mm-intl'; + const Preferences = Constants.Preferences; const Overlay = ReactBootstrap.Overlay; @@ -46,7 +49,17 @@ export default class TutorialTip extends React.Component { AsyncClient.savePreferences([preference]); } render() { - const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? 'Okay' : 'Next'; + const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? ( + <FormattedMessage + id='tutorial_tip.ok' + defaultMessage='Okay' + /> + ) : ( + <FormattedMessage + id='tutorial_tip.next' + defaultMessage='Next' + /> + ); const dots = []; if (this.props.screens.length > 1) { @@ -111,12 +124,18 @@ export default class TutorialTip extends React.Component { {buttonText} </button> <div className='tip-opt'> - {'Seen this before? '} + <FormattedMessage + id='tutorial_tip.seen' + defaultMessage='Seen this before? ' + /> <a href='#' onClick={this.skipTutorial} > - {'Opt out of these tips.'} + <FormattedMessage + id='tutorial_tip.out' + defaultMessage='Opt out of these tips.' + /> </a> </div> </div> |