diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/authorize.jsx | 42 | ||||
-rw-r--r-- | web/react/components/docs.jsx | 2 | ||||
-rw-r--r-- | web/react/components/find_team.jsx | 65 | ||||
-rw-r--r-- | web/react/components/login.jsx | 76 | ||||
-rw-r--r-- | web/react/components/login_email.jsx | 49 | ||||
-rw-r--r-- | web/react/components/login_ldap.jsx | 48 | ||||
-rw-r--r-- | web/react/components/password_reset_form.jsx | 64 | ||||
-rw-r--r-- | web/react/components/password_reset_send_link.jsx | 63 | ||||
-rw-r--r-- | web/react/components/signup_team.jsx | 43 | ||||
-rw-r--r-- | web/react/components/team_signup_choose_auth.jsx | 42 | ||||
-rw-r--r-- | web/react/components/team_signup_with_email.jsx | 34 | ||||
-rw-r--r-- | web/react/components/team_signup_with_sso.jsx | 52 |
12 files changed, 498 insertions, 82 deletions
diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx index 32e39fbff..90cbe3289 100644 --- a/web/react/components/authorize.jsx +++ b/web/react/components/authorize.jsx @@ -3,6 +3,8 @@ import * as Client from '../utils/client.jsx'; +import {FormattedMessage} from 'mm-intl'; + export default class Authorize extends React.Component { constructor(props) { super(props); @@ -35,25 +37,55 @@ export default class Authorize extends React.Component { return ( <div className='authorize-box'> <div className='authorize-inner'> - <h3>{'An application would like to connect to your '}{this.props.teamName}{' account'}</h3> - <label>{'The app '}{this.props.appName}{' would like the ability to access and modify your basic information.'}</label> + <h3> + <FormattedMessage + id='authorize.title' + defaultMessage='An application would like to connect to your {teamName} account' + values={{ + teamName: this.props.teamName + }} + /> + </h3> + <label> + <FormattedMessage + id='authorize.app' + defaultMessage='The app {appName} would like the ability to access and modify your basic information.' + values={{ + appName: this.props.appName + }} + /> + </label> <br/> <br/> - <label>{'Allow '}{this.props.appName}{' access?'}</label> + <label> + <FormattedMessage + id='authorize.access' + defaultMessage='Allow {appName} access?' + values={{ + appName: this.props.appName + }} + /> + </label> <br/> <button type='submit' className='btn authorize-btn' onClick={this.handleDeny} > - {'Deny'} + <FormattedMessage + id='authorize.deny' + defaultMessage='Deny' + /> </button> <button type='submit' className='btn btn-primary authorize-btn' onClick={this.handleAllow} > - {'Allow'} + <FormattedMessage + id='authorize.allow' + defaultMessage='Allow' + /> </button> </div> </div> diff --git a/web/react/components/docs.jsx b/web/react/components/docs.jsx index 188ca340b..6d3a109c2 100644 --- a/web/react/components/docs.jsx +++ b/web/react/components/docs.jsx @@ -13,7 +13,7 @@ export default class Docs extends React.Component { const errorState = {text: '## 404'}; if (props.site) { - $.get('/static/help/' + props.site + '.md').then((response) => { + $.get(`/static/help/${props.site}_${global.window.mm_locale}.md`).then((response) => { this.setState({text: response}); }, () => { this.setState(errorState); diff --git a/web/react/components/find_team.jsx b/web/react/components/find_team.jsx index 94ca48dbf..3ff9787ad 100644 --- a/web/react/components/find_team.jsx +++ b/web/react/components/find_team.jsx @@ -4,7 +4,20 @@ import * as utils from '../utils/utils.jsx'; import * as client from '../utils/client.jsx'; -export default class FindTeam extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +var holders = defineMessages({ + submitError: { + id: 'find_team.submitError', + defaultMessage: 'Please enter a valid email address' + }, + placeholder: { + id: 'find_team.placeholder', + defaultMessage: 'you@domain.com' + } +}); + +class FindTeam extends React.Component { constructor(props) { super(props); this.state = {}; @@ -19,7 +32,7 @@ export default class FindTeam extends React.Component { var email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase(); if (!email || !utils.isEmail(email)) { - state.email_error = 'Please enter a valid email address'; + state.email_error = this.props.intl.formatMessage(holders.submitError); this.setState(state); return; } @@ -50,25 +63,50 @@ export default class FindTeam extends React.Component { if (this.state.sent) { return ( <div> - <h4>{'Find Your teams'}</h4> - <p>{'An email was sent with links to any teams to which you are a member.'}</p> + <h4> + <FormattedMessage + id='find_team.findTitle' + defaultMessage='Find Your Team' + /> + </h4> + <p> + <FormattedMessage + id='find_team.findDescription' + defaultMessage='An email was sent with links to any teams to which you are a member.' + /> + </p> </div> ); } return ( <div> - <h4>Find Your Team</h4> + <h4> + <FormattedMessage + id='find_team.findTitle' + defaultMessage='Find Your Team' + /> + </h4> <form onSubmit={this.handleSubmit}> - <p>{'Get an email with links to any teams to which you are a member.'}</p> + <p> + <FormattedMessage + id='find_team.getLinks' + defaultMessage='Get an email with links to any teams to which you are a member.' + /> + </p> <div className='form-group'> - <label className='control-label'>Email</label> + <label className='control-label'> + <FormattedMessage + id='find_team.email' + defaultMessage='Email' + /> + </label> <div className={emailErrorClass}> <input type='text' ref='email' className='form-control' - placeholder='you@domain.com' + placeholder={this.props.intl.formatMessage(holders.placeholder)} maxLength='128' spellCheck='false' /> @@ -79,10 +117,19 @@ export default class FindTeam extends React.Component { className='btn btn-md btn-primary' type='submit' > - Send + <FormattedMessage + id='find_team.send' + defaultMessage='Send' + /> </button> </form> </div> ); } } + +FindTeam.propTypes = { + intl: intlShape.isRequired +}; + +export default injectIntl(FindTeam);
\ No newline at end of file diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 3c1d66334..c4f530af0 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -7,7 +7,7 @@ import LoginLdap from './login_ldap.jsx'; import * as Utils from '../utils/utils.jsx'; import Constants from '../utils/constants.jsx'; -var FormattedMessage = ReactIntl.FormattedMessage; +import {FormattedMessage} from 'mm-intl'; export default class Login extends React.Component { constructor(props) { @@ -24,10 +24,16 @@ export default class Login extends React.Component { loginMessage.push( <a className='btn btn-custom-login gitlab' + key='gitlab' href={'/' + teamName + '/login/gitlab'} > <span className='icon' /> - <span>{'with GitLab'}</span> + <span> + <FormattedMessage + id='login.gitlab' + defaultMessage='with GitLab' + /> + </span> </a> ); } @@ -36,10 +42,16 @@ export default class Login extends React.Component { loginMessage.push( <a className='btn btn-custom-login google' + key='google' href={'/' + teamName + '/login/google'} > <span className='icon' /> - <span>{'with Google Apps'}</span> + <span> + <FormattedMessage + id='login.google' + defaultMessage='with Google Apps' + /> + </span> </a> ); } @@ -49,9 +61,19 @@ export default class Login extends React.Component { if (extraParam) { let msg; if (extraParam === Constants.SIGNIN_CHANGE) { - msg = ' Sign-in method changed successfully'; + msg = ( + <FormattedMessage + id='login.changed' + defaultMessage=' Sign-in method changed successfully' + /> + ); } else if (extraParam === Constants.SIGNIN_VERIFIED) { - msg = ' Email Verified'; + msg = ( + <FormattedMessage + id='login.verified' + defaultMessage=' Email Verified' + /> + ); } if (msg != null) { @@ -78,7 +100,12 @@ export default class Login extends React.Component { <div> {loginMessage} <div className='or__container'> - <span>{'or'}</span> + <span> + <FormattedMessage + id='login.or' + defaultMessage='or' + /> + </span> </div> </div> ); @@ -90,7 +117,7 @@ export default class Login extends React.Component { <div className='form-group'> <a href={'/' + teamName + '/reset_password'}> <FormattedMessage - id='login.forgot_password' + id='login.forgot' defaultMessage='I forgot my password' /> </a> @@ -102,12 +129,19 @@ export default class Login extends React.Component { if (this.props.inviteId) { userSignUp = ( <div> - <span>{`Don't have an account? `} + <span> + <FormattedMessage + id='login.noAccount' + defaultMessage="Don't have an account? " + /> <a href={'/signup_user_complete/?id=' + this.props.inviteId} className='signup-team-login' > - {'Create one now'} + <FormattedMessage + id='login.create' + defaultMessage='Create one now' + /> </a> </span> </div> @@ -122,7 +156,10 @@ export default class Login extends React.Component { href='/' className='signup-team-login' > - {'Create a new team'} + <FormattedMessage + id='login.createTeam' + defaultMessage='Create a new team' + /> </a> </div> ); @@ -144,7 +181,7 @@ export default class Login extends React.Component { <span> <a href='/find_team'> <FormattedMessage - id='login.find_teams' + id='login.find' defaultMessage='Find your other teams' /> </a></span> @@ -154,9 +191,22 @@ export default class Login extends React.Component { return ( <div className='signup-team__container'> - <h5 className='margin--less'>{'Sign in to:'}</h5> + <h5 className='margin--less'> + <FormattedMessage + id='login.signTo' + defaultMessage='Sign in to:' + /> + </h5> <h2 className='signup-team__name'>{teamDisplayName}</h2> - <h2 className='signup-team__subdomain'>{'on '}{global.window.mm_config.SiteName}</h2> + <h2 className='signup-team__subdomain'> + <FormattedMessage + id='login.on' + defaultMessage='on {siteName}' + values={{ + siteName: global.window.mm_config.SiteName + }} + /> + </h2> {extraBox} {loginMessage} {emailSignup} diff --git a/web/react/components/login_email.jsx b/web/react/components/login_email.jsx index cfe34d1c7..cf1e1bc40 100644 --- a/web/react/components/login_email.jsx +++ b/web/react/components/login_email.jsx @@ -5,7 +5,32 @@ import * as Utils from '../utils/utils.jsx'; import * as Client from '../utils/client.jsx'; import UserStore from '../stores/user_store.jsx'; -export default class LoginEmail extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +var holders = defineMessages({ + badTeam: { + id: 'login_email.badTeam', + defaultMessage: 'Bad team name' + }, + emailReq: { + id: 'login_email.emailReq', + defaultMessage: 'An email is required' + }, + pwdReq: { + id: 'login_email.pwdReq', + defaultMessage: 'A password is required' + }, + email: { + id: 'login_email.email', + defaultMessage: 'Email' + }, + pwd: { + id: 'login_email.pwd', + defaultMessage: 'Password' + } +}); + +class LoginEmail extends React.Component { constructor(props) { super(props); @@ -17,25 +42,26 @@ export default class LoginEmail extends React.Component { } handleSubmit(e) { e.preventDefault(); + const {formatMessage} = this.props.intl; var state = {}; const name = this.props.teamName; if (!name) { - state.serverError = 'Bad team name'; + state.serverError = formatMessage(holders.badTeam); this.setState(state); return; } const email = this.refs.email.value.trim(); if (!email) { - state.serverError = 'An email is required'; + state.serverError = formatMessage(holders.emailReq); this.setState(state); return; } const password = this.refs.password.value.trim(); if (!password) { - state.serverError = 'A password is required'; + state.serverError = formatMessage(holders.pwdReq); this.setState(state); return; } @@ -55,7 +81,7 @@ export default class LoginEmail extends React.Component { } }, (err) => { - if (err.message === 'Login failed because email address has not been verified') { + if (err.id === 'api.user.login.not_verified.app_error') { window.location.href = '/verify_email?teamname=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email); return; } @@ -87,6 +113,7 @@ export default class LoginEmail extends React.Component { priorEmail = decodeURIComponent(emailParam); } + const {formatMessage} = this.props.intl; return ( <form onSubmit={this.handleSubmit}> <div className='signup__email-container'> @@ -101,7 +128,7 @@ export default class LoginEmail extends React.Component { name='email' defaultValue={priorEmail} ref='email' - placeholder='Email' + placeholder={formatMessage(holders.email)} spellCheck='false' /> </div> @@ -112,7 +139,7 @@ export default class LoginEmail extends React.Component { className='form-control' name='password' ref='password' - placeholder='Password' + placeholder={formatMessage(holders.pwd)} spellCheck='false' /> </div> @@ -121,7 +148,10 @@ export default class LoginEmail extends React.Component { type='submit' className='btn btn-primary' > - {'Sign in'} + <FormattedMessage + id='login_email.signin' + defaultMessage='Sign in' + /> </button> </div> </div> @@ -133,5 +163,8 @@ LoginEmail.defaultProps = { }; LoginEmail.propTypes = { + intl: intlShape.isRequired, teamName: React.PropTypes.string.isRequired }; + +export default injectIntl(LoginEmail);
\ No newline at end of file diff --git a/web/react/components/login_ldap.jsx b/web/react/components/login_ldap.jsx index 1e0e32f4f..d67f15fa5 100644 --- a/web/react/components/login_ldap.jsx +++ b/web/react/components/login_ldap.jsx @@ -4,7 +4,32 @@ import * as Utils from '../utils/utils.jsx'; import * as Client from '../utils/client.jsx'; -export default class LoginLdap extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + badTeam: { + id: 'login_ldap.badTeam', + defaultMessage: 'Bad team name' + }, + idReq: { + id: 'login_ldap.idlReq', + defaultMessage: 'An LDAP ID is required' + }, + pwdReq: { + id: 'login_ldap.pwdReq', + defaultMessage: 'An LDAP password is required' + }, + username: { + id: 'login_ldap.username', + defaultMessage: 'LDAP Username' + }, + pwd: { + id: 'login_ldap.pwd', + defaultMessage: 'LDAP Password' + } +}); + +class LoginLdap extends React.Component { constructor(props) { super(props); @@ -16,25 +41,26 @@ export default class LoginLdap extends React.Component { } handleSubmit(e) { e.preventDefault(); + const {formatMessage} = this.props.intl; var state = {}; const teamName = this.props.teamName; if (!teamName) { - state.serverError = 'Bad team name'; + state.serverError = formatMessage(holders.badTeam); this.setState(state); return; } const id = this.refs.id.value.trim(); if (!id) { - state.serverError = 'An LDAP ID is required'; + state.serverError = formatMessage(holders.idReq); this.setState(state); return; } const password = this.refs.password.value.trim(); if (!password) { - state.serverError = 'An LDAP password is required'; + state.serverError = formatMessage(holders.pwdReq); this.setState(state); return; } @@ -64,7 +90,7 @@ export default class LoginLdap extends React.Component { serverError = <label className='control-label'>{this.state.serverError}</label>; errorClass = ' has-error'; } - + const {formatMessage} = this.props.intl; return ( <form onSubmit={this.handleSubmit}> <div className='signup__email-container'> @@ -76,7 +102,7 @@ export default class LoginLdap extends React.Component { autoFocus={true} className='form-control' ref='id' - placeholder='LDAP Username' + placeholder={formatMessage(holders.username)} spellCheck='false' /> </div> @@ -85,7 +111,7 @@ export default class LoginLdap extends React.Component { type='password' className='form-control' ref='password' - placeholder='LDAP Password' + placeholder={formatMessage(holders.pwd)} spellCheck='false' /> </div> @@ -94,7 +120,10 @@ export default class LoginLdap extends React.Component { type='submit' className='btn btn-primary' > - {'Sign in'} + <FormattedMessage + id='login_ldap.signin' + defaultMessage='Sign in' + /> </button> </div> </div> @@ -106,5 +135,8 @@ LoginLdap.defaultProps = { }; LoginLdap.propTypes = { + intl: intlShape.isRequired, teamName: React.PropTypes.string.isRequired }; + +export default injectIntl(LoginLdap);
\ No newline at end of file diff --git a/web/react/components/password_reset_form.jsx b/web/react/components/password_reset_form.jsx index 8063db05a..380dbe973 100644 --- a/web/react/components/password_reset_form.jsx +++ b/web/react/components/password_reset_form.jsx @@ -4,7 +4,24 @@ import * as Client from '../utils/client.jsx'; import Constants from '../utils/constants.jsx'; -export default class PasswordResetForm extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl'; + +const holders = defineMessages({ + error: { + id: 'password_form.error', + defaultMessage: 'Please enter at least {chars} characters.' + }, + update: { + id: 'password_form.update', + defaultMessage: 'Your password has been updated successfully.' + }, + pwd: { + id: 'password_form.pwd', + defaultMessage: 'Password' + } +}); + +class PasswordResetForm extends React.Component { constructor(props) { super(props); @@ -14,11 +31,13 @@ export default class PasswordResetForm extends React.Component { } handlePasswordReset(e) { e.preventDefault(); + + const {formatMessage} = this.props.intl; var state = {}; var password = ReactDOM.findDOMNode(this.refs.password).value.trim(); if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) { - state.error = 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters.'; + state.error = formatMessage(holders.error, {chars: Constants.MIN_PASSWORD_LENGTH}); this.setState(state); return; } @@ -34,7 +53,7 @@ export default class PasswordResetForm extends React.Component { Client.resetPassword(data, function resetSuccess() { - this.setState({error: null, updateText: 'Your password has been updated successfully.'}); + this.setState({error: null, updateText: formatMessage(holders.update)}); }.bind(this), function resetFailure(err) { this.setState({error: err.message, updateText: null}); @@ -44,7 +63,15 @@ export default class PasswordResetForm extends React.Component { render() { var updateText = null; if (this.state.updateText) { - updateText = <div className='form-group'><br/><label className='control-label reset-form'>{this.state.updateText} Click <a href={'/' + this.props.teamName + '/login'}>here</a> to log in.</label></div>; + updateText = (<div className='form-group'><br/><label className='control-label reset-form'>{this.state.updateText} + <FormattedHTMLMessage + id='password_form.click' + defaultMessage='Click <a href={url}>here</a> to log in.' + values={{ + url: '/' + this.props.teamName + '/login' + }} + /> + </label></div>); } var error = null; @@ -57,19 +84,34 @@ export default class PasswordResetForm extends React.Component { formClass += ' has-error'; } + const {formatMessage} = this.props.intl; return ( <div className='col-sm-12'> <div className='signup-team__container'> - <h3>{'Password Reset'}</h3> + <h3> + <FormattedMessage + id='password_form.title' + defaultMessage='Password Reset' + /> + </h3> <form onSubmit={this.handlePasswordReset}> - <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p> + <p> + <FormattedMessage + id='password_form.enter' + defaultMessage='Enter a new password for your {teamDisplayName} {siteName} account.' + values={{ + teamDisplayName: this.props.teamDisplayName, + siteName: global.window.mm_config.SiteName + }} + /> + </p> <div className={formClass}> <input type='password' className='form-control' name='password' ref='password' - placeholder='Password' + placeholder={formatMessage(holders.pwd)} spellCheck='false' /> </div> @@ -78,7 +120,10 @@ export default class PasswordResetForm extends React.Component { type='submit' className='btn btn-primary' > - {'Change my password'} + <FormattedMessage + id='password_form.change' + defaultMessage='Change my password' + /> </button> {updateText} </form> @@ -95,8 +140,11 @@ PasswordResetForm.defaultProps = { data: '' }; PasswordResetForm.propTypes = { + intl: intlShape.isRequired, teamName: React.PropTypes.string, teamDisplayName: React.PropTypes.string, hash: React.PropTypes.string, data: React.PropTypes.string }; + +export default injectIntl(PasswordResetForm);
\ No newline at end of file diff --git a/web/react/components/password_reset_send_link.jsx b/web/react/components/password_reset_send_link.jsx index 051b8b02c..8cc8a050d 100644 --- a/web/react/components/password_reset_send_link.jsx +++ b/web/react/components/password_reset_send_link.jsx @@ -4,7 +4,28 @@ import * as Utils from '../utils/utils.jsx'; import * as client from '../utils/client.jsx'; -export default class PasswordResetSendLink extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + error: { + id: 'password_send.error', + defaultMessage: 'Please enter a valid email address.' + }, + link: { + id: 'password_send.link', + defaultMessage: '<p>A password reset link has been sent to <b>{email}</b> for your <b>{teamDisplayName}</b> team on {hostname}.</p>' + }, + checkInbox: { + id: 'password_send.checkInbox', + defaultMessage: 'Please check your inbox.' + }, + email: { + id: 'password_send.email', + defaultMessage: 'Email' + } +}); + +class PasswordResetSendLink extends React.Component { constructor(props) { super(props); @@ -15,10 +36,11 @@ export default class PasswordResetSendLink extends React.Component { handleSendLink(e) { e.preventDefault(); var state = {}; + const {formatMessage} = this.props.intl; var email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase(); if (!email || !Utils.isEmail(email)) { - state.error = 'Please enter a valid email address.'; + state.error = formatMessage(holders.error); this.setState(state); return; } @@ -32,7 +54,7 @@ export default class PasswordResetSendLink extends React.Component { client.sendPasswordReset(data, function passwordResetSent() { - this.setState({error: null, updateText: <p>A password reset link has been sent to <b>{email}</b> for your <b>{this.props.teamDisplayName}</b> team on {window.location.hostname}.</p>, moreUpdateText: 'Please check your inbox.'}); + this.setState({error: null, updateText: formatMessage(holders.link, {email: email, teamDisplayName: this.props.teamDisplayName, hostname: window.location.hostname}), moreUpdateText: formatMessage(holders.checkInbox)}); $(ReactDOM.findDOMNode(this.refs.reset_form)).hide(); }.bind(this), function passwordResetFailedToSend(err) { @@ -43,7 +65,12 @@ export default class PasswordResetSendLink extends React.Component { render() { var updateText = null; if (this.state.updateText) { - updateText = <div className='reset-form alert alert-success'>{this.state.updateText}{this.state.moreUpdateText}</div>; + updateText = ( + <div className='reset-form alert alert-success' + dangerouslySetInnerHTML={{__html: this.state.updateText + this.state.moreUpdateText}} + > + </div> + ); } var error = null; @@ -56,23 +83,37 @@ export default class PasswordResetSendLink extends React.Component { formClass += ' has-error'; } + const {formatMessage} = this.props.intl; return ( <div className='col-sm-12'> <div className='signup-team__container'> - <h3>Password Reset</h3> + <h3> + <FormattedMessage + id='password_send.title' + defaultMessage='Password Reset' + /> + </h3> {updateText} <form onSubmit={this.handleSendLink} ref='reset_form' > - <p>{'To reset your password, enter the email address you used to sign up for ' + this.props.teamDisplayName + '.'}</p> + <p> + <FormattedMessage + id='password_send.description' + defaultMessage='To reset your password, enter the email address you used to sign up for {teamName}.' + values={{ + teamName: this.props.teamDisplayName + }} + /> + </p> <div className={formClass}> <input type='email' className='form-control' name='email' ref='email' - placeholder='Email' + placeholder={formatMessage(holders.email)} spellCheck='false' /> </div> @@ -81,7 +122,10 @@ export default class PasswordResetSendLink extends React.Component { type='submit' className='btn btn-primary' > - Reset my password + <FormattedMessage + id='password_send.reset' + defaultMessage='Reset my password' + /> </button> </form> </div> @@ -95,6 +139,9 @@ PasswordResetSendLink.defaultProps = { teamDisplayName: '' }; PasswordResetSendLink.propTypes = { + intl: intlShape.isRequired, teamName: React.PropTypes.string, teamDisplayName: React.PropTypes.string }; + +export default injectIntl(PasswordResetSendLink);
\ No newline at end of file diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx index a554427d5..098e9f65a 100644 --- a/web/react/components/signup_team.jsx +++ b/web/react/components/signup_team.jsx @@ -6,6 +6,8 @@ import EmailSignUpPage from './team_signup_with_email.jsx'; import SSOSignupPage from './team_signup_with_sso.jsx'; import Constants from '../utils/constants.jsx'; +import {FormattedMessage} from 'mm-intl'; + export default class TeamSignUp extends React.Component { constructor(props) { super(props); @@ -43,12 +45,24 @@ export default class TeamSignUp extends React.Component { if (global.window.mm_config.EnableTeamListing === 'true') { if (this.props.teams.length === 0) { if (global.window.mm_config.EnableTeamCreation !== 'true') { - teamListing = (<div>{'There are no teams include in the Team Directory and team creation has been disabled.'}</div>); + teamListing = ( + <div> + <FormattedMessage + id='signup_team.noTeams' + defaultMessage='There are no teams include in the Team Directory and team creation has been disabled.' + /> + </div> + ); } } else { teamListing = ( <div> - <h4>{'Choose a Team'}</h4> + <h4> + <FormattedMessage + id='signup_team.choose' + defaultMessage='Choose a Team' + /> + </h4> <div className='signup-team-all'> { this.props.teams.map((team) => { @@ -71,7 +85,12 @@ export default class TeamSignUp extends React.Component { }) } </div> - <h4>{'Or Create a Team'}</h4> + <h4> + <FormattedMessage + id='signup_team.createTeam' + defaultMessage='Or Create a Team' + /> + </h4> </div> ); } @@ -79,7 +98,14 @@ export default class TeamSignUp extends React.Component { if (global.window.mm_config.EnableTeamCreation !== 'true') { if (teamListing == null) { - return (<div>{'Team creation has been disabled. Please contact an administrator for access.'}</div>); + return ( + <div> + <FormattedMessage + id='signup_team.disabled' + defaultMessage='Team creation has been disabled. Please contact an administrator for access.' + /> + </div> + ); } return ( @@ -122,7 +148,14 @@ export default class TeamSignUp extends React.Component { </div> ); } else if (this.state.page === 'none') { - return (<div>{'No team creation method has been enabled. Please contact an administrator for access.'}</div>); + return ( + <div> + <FormattedMessage + id='signup_team.none' + defaultMessage='No team creation method has been enabled. Please contact an administrator for access.' + /> + </div> + ); } } } diff --git a/web/react/components/team_signup_choose_auth.jsx b/web/react/components/team_signup_choose_auth.jsx index 19b9750b3..2dc67e92e 100644 --- a/web/react/components/team_signup_choose_auth.jsx +++ b/web/react/components/team_signup_choose_auth.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import {FormattedMessage} from 'mm-intl'; + export default class ChooseAuthPage extends React.Component { constructor(props) { super(props); @@ -12,6 +14,7 @@ export default class ChooseAuthPage extends React.Component { buttons.push( <a className='btn btn-custom-login gitlab btn-full' + key='gitlab' href='#' onClick={ function clickGit(e) { @@ -21,7 +24,12 @@ export default class ChooseAuthPage extends React.Component { } > <span className='icon' /> - <span>{'Create new team with GitLab Account'}</span> + <span> + <FormattedMessage + id='choose_auth_page.gitlabCreate' + defaultMessage='Create new team with GitLab Account' + /> + </span> </a> ); } @@ -30,6 +38,7 @@ export default class ChooseAuthPage extends React.Component { buttons.push( <a className='btn btn-custom-login google btn-full' + key='google' href='#' onClick={ (e) => { @@ -39,7 +48,12 @@ export default class ChooseAuthPage extends React.Component { } > <span className='icon' /> - <span>{'Create new team with Google Apps Account'}</span> + <span> + <FormattedMessage + id='choose_auth_page.googleCreate' + defaultMessage='Create new team with Google Apps Account' + /> + </span> </a> ); } @@ -48,6 +62,7 @@ export default class ChooseAuthPage extends React.Component { buttons.push( <a className='btn btn-custom-login email btn-full' + key='email' href='#' onClick={ function clickEmail(e) { @@ -57,20 +72,37 @@ export default class ChooseAuthPage extends React.Component { } > <span className='fa fa-envelope' /> - <span>{'Create new team with email address'}</span> + <span> + <FormattedMessage + id='choose_auth_page.emailCreate' + defaultMessage='Create new team with email address' + /> + </span> </a> ); } if (buttons.length === 0) { - buttons = <span>{'No sign-up methods configured, please contact your system administrator.'}</span>; + buttons = ( + <span> + <FormattedMessage + id='choose_auth_page.noSignup' + defaultMessage='No sign-up methods configured, please contact your system administrator.' + /> + </span> + ); } return ( <div> {buttons} <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{'Find my teams'}</a></span> + <span><a href='/find_team'> + <FormattedMessage + id='choose_auth_page.find' + defaultMessage='Find my teams' + /> + </a></span> </div> </div> ); diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx index 4150a0013..7dd645b25 100644 --- a/web/react/components/team_signup_with_email.jsx +++ b/web/react/components/team_signup_with_email.jsx @@ -4,7 +4,20 @@ import * as Utils from '../utils/utils.jsx'; import * as Client from '../utils/client.jsx'; -export default class EmailSignUpPage extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + emailError: { + id: 'email_signup.emailError', + defaultMessage: 'Please enter a valid email address' + }, + address: { + id: 'email_signup.address', + defaultMessage: 'Email Address' + } +}); + +class EmailSignUpPage extends React.Component { constructor() { super(); @@ -20,7 +33,7 @@ export default class EmailSignUpPage extends React.Component { team.email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase(); if (!team.email || !Utils.isEmail(team.email)) { - state.emailError = 'Please enter a valid email address'; + state.emailError = this.props.intl.formatMessage(holders.emailError); isValid = false; } else { state.emailError = null; @@ -67,7 +80,7 @@ export default class EmailSignUpPage extends React.Component { type='email' ref='email' className='form-control' - placeholder='Email Address' + placeholder={this.props.intl.formatMessage(holders.address)} maxLength='128' spellCheck='false' /> @@ -78,12 +91,20 @@ export default class EmailSignUpPage extends React.Component { className='btn btn-md btn-primary' type='submit' > - {'Create Team'} + <FormattedMessage + id='email_signup.createTeam' + defaultMessage='Create Team' + /> </button> {serverError} </div> <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{`Find my teams`}</a></span> + <span><a href='/find_team'> + <FormattedMessage + id='email_signup.find' + defaultMessage='Find my teams' + /> + </a></span> </div> </form> ); @@ -93,4 +114,7 @@ export default class EmailSignUpPage extends React.Component { EmailSignUpPage.defaultProps = { }; EmailSignUpPage.propTypes = { + intl: intlShape.isRequired }; + +export default injectIntl(EmailSignUpPage);
\ No newline at end of file diff --git a/web/react/components/team_signup_with_sso.jsx b/web/react/components/team_signup_with_sso.jsx index f4b323956..465f73fd2 100644 --- a/web/react/components/team_signup_with_sso.jsx +++ b/web/react/components/team_signup_with_sso.jsx @@ -5,7 +5,24 @@ import * as utils from '../utils/utils.jsx'; import * as client from '../utils/client.jsx'; import Constants from '../utils/constants.jsx'; -export default class SSOSignUpPage extends React.Component { +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + team_error: { + id: 'sso_signup.team_error', + defaultMessage: 'Please enter a team name' + }, + length_error: { + id: 'sso_signup.length_error', + defaultMessage: 'Name must be 3 or more characters up to a maximum of 15' + }, + teamName: { + id: 'sso_signup.teamName', + defaultMessage: 'Enter name of new team' + } +}); + +class SSOSignUpPage extends React.Component { constructor(props) { super(props); @@ -16,6 +33,7 @@ export default class SSOSignUpPage extends React.Component { } handleSubmit(e) { e.preventDefault(); + const {formatMessage} = this.props.intl; var team = {}; var state = this.state; state.nameError = null; @@ -24,13 +42,13 @@ export default class SSOSignUpPage extends React.Component { team.display_name = this.state.name; if (!team.display_name) { - state.nameError = 'Please enter a team name'; + state.nameError = formatMessage(holders.team_error); this.setState(state); return; } if (team.display_name.length <= 2) { - state.nameError = 'Name must be 3 or more characters up to a maximum of 15'; + state.nameError = formatMessage(holders.length_error); this.setState(state); return; } @@ -80,24 +98,36 @@ export default class SSOSignUpPage extends React.Component { button = ( <a className='btn btn-custom-login gitlab btn-full' + key='gitlab' href='#' onClick={this.handleSubmit} disabled={disabled} > <span className='icon'/> - <span>{'Create team with GitLab Account'}</span> + <span> + <FormattedMessage + id='sso_signup.gitlab' + defaultMessage='Create team with GitLab Account' + /> + </span> </a> ); } else if (this.props.service === Constants.GOOGLE_SERVICE) { button = ( <a className='btn btn-custom-login google btn-full' + key='google' href='#' onClick={this.handleSubmit} disabled={disabled} > <span className='icon'/> - <span>{'Create team with Google Apps Account'}</span> + <span> + <FormattedMessage + id='sso_signup.google' + defaultMessage='Create team with Google Apps Account' + /> + </span> </a> ); } @@ -113,7 +143,7 @@ export default class SSOSignUpPage extends React.Component { type='text' ref='teamname' className='form-control' - placeholder='Enter name of new team' + placeholder={this.props.intl.formatMessage(holders.teamName)} maxLength='128' onChange={this.nameChange} spellCheck='false' @@ -125,7 +155,12 @@ export default class SSOSignUpPage extends React.Component { {serverError} </div> <div className='form-group margin--extra-2x'> - <span><a href='/find_team'>{'Find my teams'}</a></span> + <span><a href='/find_team'> + <FormattedMessage + id='sso_signup.find' + defaultMessage='Find my teams' + /> + </a></span> </div> </form> ); @@ -136,5 +171,8 @@ SSOSignUpPage.defaultProps = { service: '' }; SSOSignUpPage.propTypes = { + intl: intlShape.isRequired, service: React.PropTypes.string }; + +export default injectIntl(SSOSignUpPage);
\ No newline at end of file |