diff options
Diffstat (limited to 'webapp/components/claim')
-rw-r--r-- | webapp/components/claim/claim.jsx (renamed from webapp/components/claim/claim_account.jsx) | 56 | ||||
-rw-r--r-- | webapp/components/claim/components/email_to_ldap.jsx | 169 | ||||
-rw-r--r-- | webapp/components/claim/components/email_to_oauth.jsx (renamed from webapp/components/claim/email_to_sso.jsx) | 61 | ||||
-rw-r--r-- | webapp/components/claim/components/ldap_to_email.jsx | 167 | ||||
-rw-r--r-- | webapp/components/claim/components/oauth_to_email.jsx (renamed from webapp/components/claim/sso_to_email.jsx) | 61 |
5 files changed, 391 insertions, 123 deletions
diff --git a/webapp/components/claim/claim_account.jsx b/webapp/components/claim/claim.jsx index b6495e283..464187c37 100644 --- a/webapp/components/claim/claim_account.jsx +++ b/webapp/components/claim/claim.jsx @@ -1,16 +1,14 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import EmailToSSO from './email_to_sso.jsx'; -import SSOToEmail from './sso_to_email.jsx'; import TeamStore from 'stores/team_store.jsx'; +import React from 'react'; import {FormattedMessage} from 'react-intl'; -import React from 'react'; import logoImage from 'images/logo.png'; -export default class ClaimAccount extends React.Component { +export default class Claim extends React.Component { constructor(props) { super(props); @@ -39,7 +37,7 @@ export default class ClaimAccount extends React.Component { const team = TeamStore.getByName(this.state.teamName); let displayName = ''; if (team) { - displayName = team.displayName; + displayName = team.display_name; } this.setState({ teamDisplayName: displayName @@ -49,39 +47,6 @@ export default class ClaimAccount extends React.Component { this.updateStateFromStores(); } render() { - if (this.state.teamDisplayName === '') { - return (<div/>); - } - let content; - if (this.state.email === '') { - content = ( - <p> - <FormattedMessage - id='claim.account.noEmail' - defaultMessage='No email specified' - /> - </p> - ); - } else if (this.state.oldType === '' && this.state.newType !== '') { - content = ( - <EmailToSSO - email={this.state.email} - type={this.state.newType} - teamName={this.state.teamName} - teamDisplayName={this.state.teamDisplayName} - /> - ); - } else { - content = ( - <SSOToEmail - email={this.state.email} - currentType={this.state.oldType} - teamName={this.state.teamName} - teamDisplayName={this.state.teamDisplayName} - /> - ); - } - return ( <div> <div className='signup-header'> @@ -99,7 +64,13 @@ export default class ClaimAccount extends React.Component { src={logoImage} /> <div id='claim'> - {content} + {React.cloneElement(this.props.children, { + teamName: this.state.teamName, + teamDisplayName: this.state.teamDisplayName, + currentType: this.state.oldType, + newType: this.state.newType, + email: this.state.email + })} </div> </div> </div> @@ -108,9 +79,10 @@ export default class ClaimAccount extends React.Component { } } -ClaimAccount.defaultProps = { +Claim.defaultProps = { }; -ClaimAccount.propTypes = { +Claim.propTypes = { params: React.PropTypes.object.isRequired, - location: React.PropTypes.object.isRequired + location: React.PropTypes.object.isRequired, + children: React.PropTypes.node }; diff --git a/webapp/components/claim/components/email_to_ldap.jsx b/webapp/components/claim/components/email_to_ldap.jsx new file mode 100644 index 000000000..f3046fa74 --- /dev/null +++ b/webapp/components/claim/components/email_to_ldap.jsx @@ -0,0 +1,169 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as Utils from 'utils/utils.jsx'; +import * as Client from 'utils/client.jsx'; + +import React from 'react'; +import ReactDOM from 'react-dom'; +import {FormattedMessage} from 'react-intl'; + +export default class EmailToLDAP extends React.Component { + constructor(props) { + super(props); + + this.submit = this.submit.bind(this); + + this.state = {}; + } + submit(e) { + e.preventDefault(); + var state = {}; + + const password = ReactDOM.findDOMNode(this.refs.password).value.trim(); + if (!password) { + state.error = Utils.localizeMessage('claim.email_to_ldap.pwdError', 'Please enter your password.'); + this.setState(state); + return; + } + + const ldapId = ReactDOM.findDOMNode(this.refs.ldapid).value.trim(); + if (!ldapId) { + state.error = Utils.localizeMessage('claim.email_to_ldap.ldapIdError', 'Please enter your LDAP ID.'); + this.setState(state); + return; + } + + const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value.trim(); + if (!ldapPassword) { + state.error = Utils.localizeMessage('claim.email_to_ldap.ldapPasswordError', 'Please enter your LDAP password.'); + this.setState(state); + return; + } + + state.error = null; + this.setState(state); + + var postData = {}; + postData.email_password = password; + postData.ldap_id = ldapId; + postData.ldap_password = ldapPassword; + postData.email = this.props.email; + postData.team_name = this.props.teamName; + + Client.emailToLDAP(postData, + (data) => { + if (data.follow_link) { + window.location.href = data.follow_link; + } + }, + (error) => { + this.setState({error}); + } + ); + } + render() { + var error = null; + if (this.state.error) { + error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; + } + + var formClass = 'form-group'; + if (error) { + formClass += ' has-error'; + } + + return ( + <div> + <h3> + <FormattedMessage + id='claim.email_to_ldap.title' + defaultMessage='Switch Email/Password Account to LDAP' + /> + </h3> + <form onSubmit={this.submit}> + <p> + <FormattedMessage + id='claim.email_to_ldap.ssoType' + defaultMessage='Upon claiming your account, you will only be able to login with LDAP' + /> + </p> + <p> + <FormattedMessage + id='claim.email_to_ldap.ssoNote' + defaultMessage='You must already have a valid LDAP account' + /> + </p> + <p> + <FormattedMessage + id='claim.email_to_ldap.enterPwd' + defaultMessage='Enter the password for your {team} {site} email 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={Utils.localizeMessage('claim.email_to_ldap.pwd', 'Password')} + spellCheck='false' + /> + </div> + <p> + <FormattedMessage + id='claim.email_to_ldap.enterLdapPwd' + defaultMessage='Enter the ID and password for your LDAP account' + values={{ + team: this.props.teamDisplayName, + site: global.window.mm_config.SiteName + }} + /> + </p> + <div className={formClass}> + <input + type='text' + className='form-control' + name='ldapId' + ref='ldapid' + placeholder={Utils.localizeMessage('claim.email_to_ldap.ldapId', 'LDAP ID')} + spellCheck='false' + /> + </div> + <div className={formClass}> + <input + type='password' + className='form-control' + name='ldapPassword' + ref='ldappassword' + placeholder={Utils.localizeMessage('claim.email_to_ldap.ldapPwd', 'LDAP Password')} + spellCheck='false' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + <FormattedMessage + id='claim.email_to_ldap.switchTo' + defaultMessage='Switch account to LDAP' + /> + </button> + </form> + </div> + ); + } +} + +EmailToLDAP.defaultProps = { +}; +EmailToLDAP.propTypes = { + email: React.PropTypes.string, + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string +}; diff --git a/webapp/components/claim/email_to_sso.jsx b/webapp/components/claim/components/email_to_oauth.jsx index d09449247..f3e370a4a 100644 --- a/webapp/components/claim/email_to_sso.jsx +++ b/webapp/components/claim/components/email_to_oauth.jsx @@ -1,26 +1,14 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ReactDOM from 'react-dom'; import * as Utils from 'utils/utils.jsx'; import * as Client from 'utils/client.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-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' - } -}); - import React from 'react'; +import ReactDOM from 'react-dom'; +import {FormattedMessage} from 'react-intl'; -class EmailToSSO extends React.Component { +export default class EmailToOAuth extends React.Component { constructor(props) { super(props); @@ -34,7 +22,7 @@ class EmailToSSO extends React.Component { var password = ReactDOM.findDOMNode(this.refs.password).value.trim(); if (!password) { - state.error = this.props.intl.formatMessage(holders.pwdError); + state.error = Utils.localizeMessage('claim.email_to_oauth.pwdError', 'Please enter your password.'); this.setState(state); return; } @@ -46,9 +34,9 @@ class EmailToSSO extends React.Component { postData.password = password; postData.email = this.props.email; postData.team_name = this.props.teamName; - postData.service = this.props.type; + postData.service = this.props.newType; - Client.switchToSSO(postData, + Client.emailToOAuth(postData, (data) => { if (data.follow_link) { window.location.href = data.follow_link; @@ -70,41 +58,41 @@ class EmailToSSO extends React.Component { formClass += ' has-error'; } - const uiType = Utils.toTitleCase(this.props.type) + ' SSO'; + const uiType = Utils.toTitleCase(this.props.newType) + ' SSO'; return ( <div> <h3> <FormattedMessage - id='claim.email_to_sso.title' + id='claim.email_to_oauth.title' defaultMessage='Switch Email/Password Account to {uiType}' values={{ - uiType: uiType + uiType }} /> </h3> <form onSubmit={this.submit}> <p> <FormattedMessage - id='claim.email_to_sso.ssoType' + id='claim.email_to_oauth.ssoType' defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO' values={{ - type: Utils.toTitleCase(this.props.type) + type: Utils.toTitleCase(this.props.newType) }} /> </p> <p> <FormattedMessage - id='claim.email_to_sso.ssoNote' + id='claim.email_to_oauth.ssoNote' defaultMessage='You must already have a valid {type} account' values={{ - type: Utils.toTitleCase(this.props.type) + type: Utils.toTitleCase(this.props.newType) }} /> </p> <p> <FormattedMessage - id='claim.email_to_sso.enterPwd' + id='claim.email_to_oauth.enterPwd' defaultMessage='Enter the password for your {team} {site} account' values={{ team: this.props.teamDisplayName, @@ -118,7 +106,7 @@ class EmailToSSO extends React.Component { className='form-control' name='password' ref='password' - placeholder={this.props.intl.formatMessage(holders.pwd)} + placeholder={Utils.localizeMessage('claim.email_to_oauth.pwd', 'Password')} spellCheck='false' /> </div> @@ -128,10 +116,10 @@ class EmailToSSO extends React.Component { className='btn btn-primary' > <FormattedMessage - id='claim.email_to_sso.switchTo' + id='claim.email_to_oauth.switchTo' defaultMessage='Switch account to {uiType}' values={{ - uiType: uiType + uiType }} /> </button> @@ -141,14 +129,11 @@ class EmailToSSO extends React.Component { } } -EmailToSSO.defaultProps = { +EmailToOAuth.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 +EmailToOAuth.propTypes = { + newType: React.PropTypes.string, + email: React.PropTypes.string, + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string }; - -export default injectIntl(EmailToSSO); diff --git a/webapp/components/claim/components/ldap_to_email.jsx b/webapp/components/claim/components/ldap_to_email.jsx new file mode 100644 index 000000000..b4ffd4944 --- /dev/null +++ b/webapp/components/claim/components/ldap_to_email.jsx @@ -0,0 +1,167 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as Utils from 'utils/utils.jsx'; +import * as Client from 'utils/client.jsx'; + +import React from 'react'; +import ReactDOM from 'react-dom'; +import {FormattedMessage} from 'react-intl'; + +export default class LDAPToEmail extends React.Component { + constructor(props) { + super(props); + + this.submit = this.submit.bind(this); + + this.state = {}; + } + submit(e) { + e.preventDefault(); + var state = {}; + + const password = ReactDOM.findDOMNode(this.refs.password).value.trim(); + if (!password) { + state.error = Utils.localizeMessage('claim.ldap_to_email.pwdError', 'Please enter your password.'); + this.setState(state); + return; + } + + const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim(); + if (!confirmPassword || password !== confirmPassword) { + state.error = Utils.localizeMessage('claim.ldap_to_email.pwdNotMatch', 'Passwords do not match.'); + this.setState(state); + return; + } + + const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value.trim(); + if (!ldapPassword) { + state.error = Utils.localizeMessage('claim.ldap_to_email.ldapPasswordError', 'Please enter your LDAP password.'); + this.setState(state); + return; + } + + state.error = null; + this.setState(state); + + var postData = {}; + postData.email_password = password; + postData.ldap_password = ldapPassword; + postData.email = this.props.email; + postData.team_name = this.props.teamName; + + Client.ldapToEmail(postData, + (data) => { + if (data.follow_link) { + window.location.href = data.follow_link; + } + }, + (error) => { + this.setState({error}); + } + ); + } + render() { + var error = null; + if (this.state.error) { + error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>; + } + + var formClass = 'form-group'; + if (error) { + formClass += ' has-error'; + } + + return ( + <div> + <h3> + <FormattedMessage + id='claim.ldap_to_email.title' + defaultMessage='Switch LDAP Account to Email/Password' + /> + </h3> + <form onSubmit={this.submit}> + <p> + <FormattedMessage + id='claim.ldap_to_email.ssoType' + defaultMessage='Upon claiming your account, you will only be able to login with your email and password' + /> + </p> + <p> + <FormattedMessage + id='claim.ldap_to_email.email' + defaultMessage='You will use the email {email} to login' + values={{ + email: this.props.email + }} + /> + </p> + <p> + <FormattedMessage + id='claim.ldap_to_email.enterLdapPwd' + defaultMessage='Enter your LDAP password for your {team} {site} email account' + values={{ + team: this.props.teamDisplayName, + site: global.window.mm_config.SiteName + }} + /> + </p> + <div className={formClass}> + <input + type='password' + className='form-control' + name='ldapPassword' + ref='ldappassword' + placeholder={Utils.localizeMessage('claim.ldap_to_email.ldapPwd', 'LDAP Password')} + spellCheck='false' + /> + </div> + <p> + <FormattedMessage + id='claim.ldap_to_email.enterPwd' + defaultMessage='Enter a new password for your email account' + /> + </p> + <div className={formClass}> + <input + type='password' + className='form-control' + name='password' + ref='password' + placeholder={Utils.localizeMessage('claim.ldap_to_email.pwd', 'Password')} + spellCheck='false' + /> + </div> + <div className={formClass}> + <input + type='password' + className='form-control' + name='passwordconfirm' + ref='passwordconfirm' + placeholder={Utils.localizeMessage('claim.ldap_to_email.confirm', 'Confirm Password')} + spellCheck='false' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + <FormattedMessage + id='claim.ldap_to_email.switchTo' + defaultMessage='Switch account to email/password' + /> + </button> + </form> + </div> + ); + } +} + +LDAPToEmail.defaultProps = { +}; +LDAPToEmail.propTypes = { + email: React.PropTypes.string, + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string +}; diff --git a/webapp/components/claim/sso_to_email.jsx b/webapp/components/claim/components/oauth_to_email.jsx index a41e09969..476677aeb 100644 --- a/webapp/components/claim/sso_to_email.jsx +++ b/webapp/components/claim/components/oauth_to_email.jsx @@ -1,34 +1,14 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ReactDOM from 'react-dom'; import * as Utils from 'utils/utils.jsx'; import * as Client from 'utils/client.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-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' - } -}); - import React from 'react'; +import ReactDOM from 'react-dom'; +import {FormattedMessage} from 'react-intl'; -class SSOToEmail extends React.Component { +export default class OAuthToEmail extends React.Component { constructor(props) { super(props); @@ -37,20 +17,19 @@ 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 = formatMessage(holders.enterPwd); + state.error = Utils.localizeMessage('claim.oauth_to_email.enterPwd', 'Please enter a password.'); this.setState(state); return; } const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim(); if (!confirmPassword || password !== confirmPassword) { - state.error = formatMessage(holders.pwdNotMatch); + state.error = Utils.localizeMessage('claim.oauth_to_email.pwdNotMatch', 'Password do not match.'); this.setState(state); return; } @@ -63,7 +42,7 @@ class SSOToEmail extends React.Component { postData.email = this.props.email; postData.team_name = this.props.teamName; - Client.switchToEmail(postData, + Client.oauthToEmail(postData, (data) => { if (data.follow_link) { window.location.href = data.follow_link; @@ -75,7 +54,6 @@ 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>; @@ -92,7 +70,7 @@ class SSOToEmail extends React.Component { <div> <h3> <FormattedMessage - id='claim.sso_to_email.title' + id='claim.oauth_to_email.title' defaultMessage='Switch {type} Account to Email' values={{ type: uiType @@ -102,13 +80,13 @@ class SSOToEmail extends React.Component { <form onSubmit={this.submit}> <p> <FormattedMessage - id='claim.sso_to_email.description' + id='claim.oauth_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' + id='claim.oauth_to_email_newPwd' defaultMessage='Enter a new password for your {team} {site} account' values={{ team: this.props.teamDisplayName, @@ -122,7 +100,7 @@ class SSOToEmail extends React.Component { className='form-control' name='password' ref='password' - placeholder={formatMessage(holders.newPwd)} + placeholder={Utils.localizeMessage('claim.oauth_to_email.newPwd', 'New Password')} spellCheck='false' /> </div> @@ -132,7 +110,7 @@ class SSOToEmail extends React.Component { className='form-control' name='passwordconfirm' ref='passwordconfirm' - placeholder={formatMessage(holders.confirm)} + placeholder={Utils.localizeMessage('claim.oauth_to_email.confirm', 'Confirm Password')} spellCheck='false' /> </div> @@ -142,7 +120,7 @@ class SSOToEmail extends React.Component { className='btn btn-primary' > <FormattedMessage - id='claim.sso_to_email.switchTo' + id='claim.oauth_to_email.switchTo' defaultMessage='Switch {type} to email and password' values={{ type: uiType @@ -155,14 +133,11 @@ class SSOToEmail extends React.Component { } } -SSOToEmail.defaultProps = { +OAuthToEmail.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 +OAuthToEmail.propTypes = { + teamName: React.PropTypes.string, + teamDisplayName: React.PropTypes.string, + currentType: React.PropTypes.string, + email: React.PropTypes.string }; - -export default injectIntl(SSOToEmail); |