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

PLT-7: Refactoring frontend (chunk 3)

Просмотр исходного кода 
- Tutorial components
- Claim components
- Suggestion components
Этот коммит содержится в:
Elias Nahum
2016-01-28 11:21:12 -03:00
родитель c8ca70870f
Коммит a72ba14024
9 изменённых файлов: 297 добавлений и 44 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

11
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

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

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