summaryrefslogtreecommitdiffstats
path: root/web/react/components/signup_user_complete.jsx
diff options
context:
space:
mode:
authorCorey Hulen <corey@hulen.com>2015-09-02 12:41:16 -0700
committerCorey Hulen <corey@hulen.com>2015-09-02 12:41:16 -0700
commit833f6b7df123f25d5aa6bee6aee0c90c82b74c38 (patch)
tree191b16707373caa2aeecb77d40af64ffe05815db /web/react/components/signup_user_complete.jsx
parenteaeab0d645ca69efb4a0b47b802db750a6f54136 (diff)
parentaac83dcedc644dfc23fc46366e54c65e0c86c5b9 (diff)
downloadchat-833f6b7df123f25d5aa6bee6aee0c90c82b74c38.tar.gz
chat-833f6b7df123f25d5aa6bee6aee0c90c82b74c38.tar.bz2
chat-833f6b7df123f25d5aa6bee6aee0c90c82b74c38.zip
Merge pull request #539 from rgarmsen2295/reformat_part_one
MM-2063 Cosmetic Refactoring
Diffstat (limited to 'web/react/components/signup_user_complete.jsx')
-rw-r--r--web/react/components/signup_user_complete.jsx131
1 files changed, 93 insertions, 38 deletions
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index 2080cc191..67e85d4de 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -7,11 +7,31 @@ var UserStore = require('../stores/user_store.jsx');
var BrowserStore = require('../stores/browser_store.jsx');
var Constants = require('../utils/constants.jsx');
-module.exports = React.createClass({
- handleSubmit: function(e) {
+export default class SignupUserComplete extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleSubmit = this.handleSubmit.bind(this);
+
+ var initialState = BrowserStore.getGlobalItem(this.props.hash);
+
+ if (!initialState) {
+ initialState = {};
+ initialState.wizard = 'welcome';
+ initialState.user = {};
+ initialState.user.team_id = this.props.teamId;
+ initialState.user.email = this.props.email;
+ initialState.hash = this.props.hash;
+ initialState.data = this.props.data;
+ initialState.original_email = this.props.email;
+ }
+
+ this.state = initialState;
+ }
+ handleSubmit(e) {
e.preventDefault();
- this.state.user.username = this.refs.name.getDOMNode().value.trim();
+ this.state.user.username = React.findDOMNode(this.refs.name).value.trim();
if (!this.state.user.username) {
this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''});
return;
@@ -31,14 +51,14 @@ module.exports = React.createClass({
return;
}
- this.state.user.email = this.refs.email.getDOMNode().value.trim();
+ this.state.user.email = React.findDOMNode(this.refs.email).value.trim();
if (!this.state.user.email) {
this.setState({nameError: '', emailError: 'This field is required', passwordError: ''});
return;
}
- this.state.user.password = this.refs.password.getDOMNode().value.trim();
- if (!this.state.user.password || this.state.user.password .length < 5) {
+ this.state.user.password = React.findDOMNode(this.refs.password).value.trim();
+ if (!this.state.user.password || this.state.user.password .length < 5) {
this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''});
return;
}
@@ -48,11 +68,11 @@ module.exports = React.createClass({
this.state.user.allow_marketing = true;
client.createUser(this.state.user, this.state.data, this.state.hash,
- function(data) {
+ function createUserSuccess() {
client.track('signup', 'signup_user_02_complete');
client.loginByEmail(this.props.teamName, this.state.user.email, this.state.user.password,
- function(data) {
+ function emailLoginSuccess(data) {
UserStore.setLastEmail(this.state.user.email);
UserStore.setCurrentUser(data);
if (this.props.hash > 0) {
@@ -60,7 +80,7 @@ module.exports = React.createClass({
}
window.location.href = '/';
}.bind(this),
- function(err) {
+ function emailLoginFailure(err) {
if (err.message === 'Login failed because email address has not been verified') {
window.location.href = '/verify_email?email=' + encodeURIComponent(this.state.user.email) + '&teamname=' + encodeURIComponent(this.props.teamName);
} else {
@@ -69,28 +89,12 @@ module.exports = React.createClass({
}.bind(this)
);
}.bind(this),
- function(err) {
+ function createUserFailure(err) {
this.setState({serverError: err.message});
}.bind(this)
);
- },
- getInitialState: function() {
- var state = BrowserStore.getGlobalItem(this.props.hash);
-
- if (!state) {
- state = {};
- state.wizard = 'welcome';
- state.user = {};
- state.user.team_id = this.props.teamId;
- state.user.email = this.props.email;
- state.hash = this.props.hash;
- state.data = this.props.data;
- state.original_email = this.props.email;
- }
-
- return state;
- },
- render: function() {
+ }
+ render() {
client.track('signup', 'signup_user_01_welcome');
if (this.state.wizard === 'finished') {
@@ -134,16 +138,24 @@ module.exports = React.createClass({
yourEmailIs = <span>Your email address is {this.state.user.email}. You'll use this address to sign in to {config.SiteName}.</span>;
}
- var emailContainerStyle = "margin--extra";
+ var emailContainerStyle = 'margin--extra';
if (this.state.original_email) {
- emailContainerStyle = "hidden";
+ emailContainerStyle = 'hidden';
}
var email = (
<div className={emailContainerStyle}>
<h5><strong>What's your email address?</strong></h5>
<div className={emailDivStyle}>
- <input type='email' ref='email' className='form-control' defaultValue={this.state.user.email} placeholder='' maxLength='128' autoFocus={true} />
+ <input
+ type='email'
+ ref='email'
+ className='form-control'
+ defaultValue={this.state.user.email}
+ placeholder=''
+ maxLength='128'
+ autoFocus={true}
+ />
{emailError}
</div>
</div>
@@ -155,7 +167,10 @@ module.exports = React.createClass({
var signupMessage = [];
if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) {
signupMessage.push(
- <a className='btn btn-custom-login gitlab' href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}>
+ <a
+ className='btn btn-custom-login gitlab'
+ href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}
+ >
<span className='icon' />
<span>with GitLab</span>
</a>
@@ -172,7 +187,13 @@ module.exports = React.createClass({
<div className='margin--extra'>
<h5><strong>Choose your username</strong></h5>
<div className={nameDivStyle}>
- <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' />
+ <input
+ type='text'
+ ref='name'
+ className='form-control'
+ placeholder=''
+ maxLength='128'
+ />
{nameError}
<p className='form__hint'>Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'</p>
</div>
@@ -180,12 +201,26 @@ module.exports = React.createClass({
<div className='margin--extra'>
<h5><strong>Choose your password</strong></h5>
<div className={passwordDivStyle}>
- <input type='password' ref='password' className='form-control' placeholder='' maxLength='128' />
+ <input
+ type='password'
+ ref='password'
+ className='form-control'
+ placeholder=''
+ maxLength='128'
+ />
{passwordError}
</div>
</div>
</div>
- <p className='margin--extra'><button type='submit' onClick={this.handleSubmit} className='btn-primary btn'>Create Account</button></p>
+ <p className='margin--extra'>
+ <button
+ type='submit'
+ onClick={this.handleSubmit}
+ className='btn-primary btn'
+ >
+ Create Account
+ </button>
+ </p>
</div>
);
}
@@ -209,7 +244,10 @@ module.exports = React.createClass({
return (
<div>
<form>
- <img className='signup-team-logo' src='/static/images/logo.png' />
+ <img
+ className='signup-team-logo'
+ src='/static/images/logo.png'
+ />
<h5 className='margin--less'>Welcome to:</h5>
<h2 className='signup-team__name'>{this.props.teamDisplayName}</h2>
<h2 className='signup-team__subdomain'>on {config.SiteName}</h2>
@@ -222,6 +260,23 @@ module.exports = React.createClass({
</div>
);
}
-});
-
+}
+SignupUserComplete.defaultProps = {
+ teamName: '',
+ hash: '',
+ teamId: '',
+ email: '',
+ data: null,
+ authServices: '',
+ teamDisplayName: ''
+};
+SignupUserComplete.propTypes = {
+ teamName: React.PropTypes.string,
+ hash: React.PropTypes.string,
+ teamId: React.PropTypes.string,
+ email: React.PropTypes.string,
+ data: React.PropTypes.string,
+ authServices: React.PropTypes.string,
+ teamDisplayName: React.PropTypes.string
+};