mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-7: Refactoring frontend (chunk 4)

Просмотр исходного кода
Этот коммит содержится в:
Elias Nahum
2016-01-28 16:16:39 -03:00
родитель db37897538
Коммит 53e495cf33
24 изменённых файлов: 759 добавлений и 107 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

42
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>

2
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);

65
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);

76
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}

49
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);

48
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);

64
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);

63
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);

43
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>
);
}
}
}

42
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>
);

34
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);

52
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);