diff options
Diffstat (limited to 'webapp/components/claim')
-rw-r--r-- | webapp/components/claim/claim_account.jsx | 116 | ||||
-rw-r--r-- | webapp/components/claim/email_to_sso.jsx | 154 | ||||
-rw-r--r-- | webapp/components/claim/sso_to_email.jsx | 168 |
3 files changed, 438 insertions, 0 deletions
diff --git a/webapp/components/claim/claim_account.jsx b/webapp/components/claim/claim_account.jsx new file mode 100644 index 000000000..b6495e283 --- /dev/null +++ b/webapp/components/claim/claim_account.jsx @@ -0,0 +1,116 @@ +// 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 {FormattedMessage} from 'react-intl'; + +import React from 'react'; +import logoImage from 'images/logo.png'; + +export default class ClaimAccount extends React.Component { + constructor(props) { + super(props); + + this.onTeamChange = this.onTeamChange.bind(this); + this.updateStateFromStores = this.updateStateFromStores.bind(this); + + this.state = {}; + } + componentWillMount() { + this.setState({ + email: this.props.location.query.email, + newType: this.props.location.query.new_type, + oldType: this.props.location.query.old_type, + teamName: this.props.params.team, + teamDisplayName: '' + }); + this.updateStateFromStores(); + } + componentDidMount() { + TeamStore.addChangeListener(this.onTeamChange); + } + componentWillUnmount() { + TeamStore.removeChangeListener(this.onTeamChange); + } + updateStateFromStores() { + const team = TeamStore.getByName(this.state.teamName); + let displayName = ''; + if (team) { + displayName = team.displayName; + } + this.setState({ + teamDisplayName: displayName + }); + } + onTeamChange() { + 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'> + <a href='/'> + <span className='fa fa-chevron-left'/> + <FormattedMessage + id='web.header.back' + /> + </a> + </div> + <div className='col-sm-12'> + <div className='signup-team__container'> + <img + className='signup-team-logo' + src={logoImage} + /> + <div id='claim'> + {content} + </div> + </div> + </div> + </div> + ); + } +} + +ClaimAccount.defaultProps = { +}; +ClaimAccount.propTypes = { + params: React.PropTypes.object.isRequired, + location: React.PropTypes.object.isRequired +}; diff --git a/webapp/components/claim/email_to_sso.jsx b/webapp/components/claim/email_to_sso.jsx new file mode 100644 index 000000000..d09449247 --- /dev/null +++ b/webapp/components/claim/email_to_sso.jsx @@ -0,0 +1,154 @@ +// 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'; + +class EmailToSSO extends React.Component { + constructor(props) { + super(props); + + this.submit = this.submit.bind(this); + + this.state = {}; + } + submit(e) { + e.preventDefault(); + var state = {}; + + var password = ReactDOM.findDOMNode(this.refs.password).value.trim(); + if (!password) { + state.error = this.props.intl.formatMessage(holders.pwdError); + this.setState(state); + return; + } + + state.error = null; + this.setState(state); + + var postData = {}; + postData.password = password; + postData.email = this.props.email; + postData.team_name = this.props.teamName; + postData.service = this.props.type; + + Client.switchToSSO(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'; + } + + const uiType = Utils.toTitleCase(this.props.type) + ' SSO'; + + return ( + <div> + <h3> + <FormattedMessage + id='claim.email_to_sso.title' + defaultMessage='Switch Email/Password Account to {uiType}' + values={{ + uiType: uiType + }} + /> + </h3> + <form onSubmit={this.submit}> + <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.ssoNote' + defaultMessage='You must already have a valid {type} account' + 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={this.props.intl.formatMessage(holders.pwd)} + spellCheck='false' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + <FormattedMessage + id='claim.email_to_sso.switchTo' + defaultMessage='Switch account to {uiType}' + values={{ + uiType: uiType + }} + /> + </button> + </form> + </div> + ); + } +} + +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); diff --git a/webapp/components/claim/sso_to_email.jsx b/webapp/components/claim/sso_to_email.jsx new file mode 100644 index 000000000..a41e09969 --- /dev/null +++ b/webapp/components/claim/sso_to_email.jsx @@ -0,0 +1,168 @@ +// 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'; + +class SSOToEmail extends React.Component { + constructor(props) { + super(props); + + this.submit = this.submit.bind(this); + + 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); + this.setState(state); + return; + } + + const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim(); + if (!confirmPassword || password !== confirmPassword) { + state.error = formatMessage(holders.pwdNotMatch); + this.setState(state); + return; + } + + state.error = null; + this.setState(state); + + var postData = {}; + postData.password = password; + postData.email = this.props.email; + postData.team_name = this.props.teamName; + + Client.switchToEmail(postData, + (data) => { + if (data.follow_link) { + window.location.href = data.follow_link; + } + }, + (error) => { + this.setState({error}); + } + ); + } + 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>; + } + + var formClass = 'form-group'; + if (error) { + formClass += ' has-error'; + } + + const uiType = Utils.toTitleCase(this.props.currentType) + ' SSO'; + + return ( + <div> + <h3> + <FormattedMessage + id='claim.sso_to_email.title' + defaultMessage='Switch {type} Account to Email' + values={{ + type: uiType + }} + /> + </h3> + <form onSubmit={this.submit}> + <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={formatMessage(holders.newPwd)} + spellCheck='false' + /> + </div> + <div className={formClass}> + <input + type='password' + className='form-control' + name='passwordconfirm' + ref='passwordconfirm' + placeholder={formatMessage(holders.confirm)} + spellCheck='false' + /> + </div> + {error} + <button + type='submit' + className='btn btn-primary' + > + <FormattedMessage + id='claim.sso_to_email.switchTo' + defaultMessage='Switch {type} to email and password' + values={{ + type: uiType + }} + /> + </button> + </form> + </div> + ); + } +} + +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 +}; + +export default injectIntl(SSOToEmail); |