diff options
Diffstat (limited to 'web/react/components/signup_team_complete/components/team_signup_email_item.jsx')
-rw-r--r-- | web/react/components/signup_team_complete/components/team_signup_email_item.jsx | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/web/react/components/signup_team_complete/components/team_signup_email_item.jsx b/web/react/components/signup_team_complete/components/team_signup_email_item.jsx new file mode 100644 index 000000000..c87d6ec07 --- /dev/null +++ b/web/react/components/signup_team_complete/components/team_signup_email_item.jsx @@ -0,0 +1,86 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as Utils from '../../../utils/utils.jsx'; + +import {intlShape, injectIntl, defineMessages} from 'mm-intl'; + +const holders = defineMessages({ + validEmail: { + id: 'team_signup_email.validEmail', + defaultMessage: 'Please enter a valid email address' + }, + different: { + id: 'team_signup_email.different', + defaultMessage: 'Please use a different email than the one used at signup' + }, + address: { + id: 'team_signup_email.address', + defaultMessage: 'Email Address' + } +}); + +class TeamSignupEmailItem extends React.Component { + constructor(props) { + super(props); + + this.getValue = this.getValue.bind(this); + this.validate = this.validate.bind(this); + + this.state = {}; + } + getValue() { + return ReactDOM.findDOMNode(this.refs.email).value.trim(); + } + validate(teamEmail) { + const {formatMessage} = this.props.intl; + const email = ReactDOM.findDOMNode(this.refs.email).value.trim().toLowerCase(); + + if (!email) { + return true; + } + + if (!Utils.isEmail(email)) { + this.setState({emailError: formatMessage(holders.validEmail)}); + return false; + } else if (email === teamEmail) { + this.setState({emailError: formatMessage(holders.different)}); + return false; + } + + this.setState({emailError: ''}); + return true; + } + render() { + let emailError = null; + let emailDivClass = 'form-group'; + if (this.state.emailError) { + emailError = <label className='control-label'>{this.state.emailError}</label>; + emailDivClass += ' has-error'; + } + + return ( + <div className={emailDivClass}> + <input + autoFocus={this.props.focus} + type='email' + ref='email' + className='form-control' + placeholder={this.props.intl.formatMessage(holders.address)} + defaultValue={this.props.email} + maxLength='128' + spellCheck='false' + /> + {emailError} + </div> + ); + } +} + +TeamSignupEmailItem.propTypes = { + intl: intlShape.isRequired, + focus: React.PropTypes.bool, + email: React.PropTypes.string +}; + +export default injectIntl(TeamSignupEmailItem, {withRef: true}); |