diff options
Diffstat (limited to 'web/react/components/password_reset_send_link.jsx')
| -rw-r--r-- | web/react/components/password_reset_send_link.jsx | 186 |
1 files changed, 94 insertions, 92 deletions
diff --git a/web/react/components/password_reset_send_link.jsx b/web/react/components/password_reset_send_link.jsx index 8cc8a050d..ce6253e16 100644 --- a/web/react/components/password_reset_send_link.jsx +++ b/web/react/components/password_reset_send_link.jsx @@ -4,26 +4,7 @@ import * as Utils from '../utils/utils.jsx'; import * as client from '../utils/client.jsx'; -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' - } -}); +import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl'; class PasswordResetSendLink extends React.Component { constructor(props) { @@ -31,48 +12,64 @@ class PasswordResetSendLink extends React.Component { this.handleSendLink = this.handleSendLink.bind(this); - this.state = {}; + this.state = { + error: '', + updateText: '' + }; } 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 = formatMessage(holders.error); - this.setState(state); + this.setState({ + error: ( + <FormattedMessage + id={'password_send.error'} + defaultMessage={'Please enter a valid email address.'} + /> + ) + }); return; } - state.error = null; - this.setState(state); + // End of error checking clear error + this.setState({ + error: '' + }); var data = {}; data.email = email; - data.name = this.props.teamName; - + data.name = this.props.params.team; client.sendPasswordReset(data, - function passwordResetSent() { - 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) { - this.setState({error: err.message, update_text: null, moreUpdateText: null}); - }.bind(this) - ); + () => { + this.setState({ + error: null, + updateText: ( + <div className='reset-form alert alert-success'> + <FormattedHTMLMessage + id='password_send.link' + defaultMessage='<p>A password reset link has been sent to <b>{email}</b></p>' + email={email} + /> + <FormattedMessage + id={'password_send.checkInbox'} + defaultMessage={'Please check your inbox.'} + /> + </div> + ) + }); + $(ReactDOM.findDOMNode(this.refs.reset_form)).hide(); + }, + (err) => { + this.setState({ + error: err.message, + update_text: null + }); + } + ); } render() { - var updateText = null; - if (this.state.updateText) { - updateText = ( - <div className='reset-form alert alert-success' - dangerouslySetInnerHTML={{__html: this.state.updateText + this.state.moreUpdateText}} - > - </div> - ); - } - var error = null; if (this.state.error) { error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; @@ -83,51 +80,60 @@ 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> + <div> + <div className='signup-header'> + <a href='/'> + <span className='fa fa-chevron-left'/> <FormattedMessage - id='password_send.title' - defaultMessage='Password Reset' + id='web.header.back' /> - </h3> - {updateText} - <form - onSubmit={this.handleSendLink} - ref='reset_form' - > - <p> + </a> + </div> + <div className='col-sm-12'> + <div className='signup-team__container'> + <h3> <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 - }} + id='password_send.title' + defaultMessage='Password Reset' /> - </p> - <div className={formClass}> - <input - type='email' - className='form-control' - name='email' - ref='email' - placeholder={formatMessage(holders.email)} - spellCheck='false' - /> - </div> - {error} - <button - type='submit' - className='btn btn-primary' + </h3> + {this.state.updateText} + <form + onSubmit={this.handleSendLink} + ref='reset_form' > - <FormattedMessage - id='password_send.reset' - defaultMessage='Reset my password' - /> - </button> - </form> + <p> + <FormattedMessage + id='password_send.description' + defaultMessage='To reset your password, enter the email address you used to sign up' + /> + </p> + <div className={formClass}> + <input + type='email' + className='form-control' + name='email' + ref='email' + placeholder={Utils.localizeMessage( + 'password_send.email', + 'Email' + )} + spellCheck='false' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + <FormattedMessage + id='password_send.reset' + defaultMessage='Reset my password' + /> + </button> + </form> + </div> </div> </div> ); @@ -135,13 +141,9 @@ class PasswordResetSendLink extends React.Component { } PasswordResetSendLink.defaultProps = { - teamName: '', - teamDisplayName: '' }; PasswordResetSendLink.propTypes = { - intl: intlShape.isRequired, - teamName: React.PropTypes.string, - teamDisplayName: React.PropTypes.string + params: React.PropTypes.object.isRequired }; -export default injectIntl(PasswordResetSendLink);
\ No newline at end of file +export default PasswordResetSendLink; |