summaryrefslogtreecommitdiffstats
path: root/web/react/components/signup_user_complete.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/signup_user_complete.jsx')
-rw-r--r--web/react/components/signup_user_complete.jsx200
1 files changed, 125 insertions, 75 deletions
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index 03808e821..b21553d8a 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -1,7 +1,6 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-
var utils = require('../utils/utils.jsx');
var client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
@@ -9,36 +8,41 @@ var BrowserStore = require('../stores/browser_store.jsx');
module.exports = React.createClass({
handleSubmit: function(e) {
- e.preventDefault();
+ e.preventDefault();
this.state.user.username = this.refs.name.getDOMNode().value.trim();
if (!this.state.user.username) {
- this.setState({name_error: "This field is required", email_error: "", password_error: "", server_error: ""});
+ this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''});
return;
}
- var username_error = utils.isValidUsername(this.state.user.username);
- if (username_error === "Cannot use a reserved word as a username.") {
- this.setState({name_error: "This username is reserved, please choose a new one.", email_error: "", password_error: "", server_error: ""});
+ var usernameError = utils.isValidUsername(this.state.user.username);
+ if (usernameError === 'Cannot use a reserved word as a username.') {
+ this.setState({nameError: 'This username is reserved, please choose a new one.', emailError: '', passwordError: '', serverError: ''});
return;
- } else if (username_error) {
- this.setState({name_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'.", email_error: "", password_error: "", server_error: ""});
+ } else if (usernameError) {
+ this.setState({
+ nameError: 'Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.',
+ emailError: '',
+ passwordError: '',
+ serverError: ''
+ });
return;
}
this.state.user.email = this.refs.email.getDOMNode().value.trim();
if (!this.state.user.email) {
- this.setState({name_error: "", email_error: "This field is required", password_error: ""});
+ 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.setState({name_error: "", email_error: "", password_error: "Please enter at least 5 characters", server_error: ""});
+ this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''});
return;
}
- this.setState({name_error: "", email_error: "", password_error: "", server_error: ""});
+ this.setState({nameError: '', emailError: '', passwordError: '', serverError: ''});
this.state.user.allow_marketing = true;
@@ -50,108 +54,154 @@ module.exports = React.createClass({
function(data) {
UserStore.setLastEmail(this.state.user.email);
UserStore.setCurrentUser(data);
- if (this.props.hash > 0)
- {
- BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: "finished"}));
+ if (this.props.hash > 0) {
+ BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'}));
}
window.location.href = '/';
}.bind(this),
function(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);
+ 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 {
- this.state.server_error = err.message;
- this.setState(this.state);
+ this.setState({serverError: err.message});
}
}.bind(this)
);
}.bind(this),
function(err) {
- this.state.server_error = err.message;
- this.setState(this.state);
+ this.setState({serverError: err.message});
}.bind(this)
);
},
getInitialState: function() {
- var props = BrowserStore.getGlobalItem(this.props.hash);
-
- if (!props) {
- props = {};
- props.wizard = "welcome";
- props.user = {};
- props.user.team_id = this.props.teamId;
- props.user.email = this.props.email;
- props.hash = this.props.hash;
- props.data = this.props.data;
- props.original_email = this.props.email;
+ 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 props;
+ return state;
},
render: function() {
-
client.track('signup', 'signup_user_01_welcome');
- if (this.state.wizard == "finished") {
- return (<div>You've already completed the signup process for this invitation or this invitation has expired.</div>);
+ if (this.state.wizard === 'finished') {
+ return <div>You've already completed the signup process for this invitation or this invitation has expired.</div>;
+ }
+
+ // set up error labels
+ var emailError = null;
+ var emailDivStyle = 'form-group';
+ if (this.state.emailError) {
+ emailError = <label className='control-label'>{this.state.emailError}</label>;
+ emailDivStyle += ' has-error';
+ }
+
+ var nameError = null;
+ var nameDivStyle = 'form-group';
+ if (this.state.nameError) {
+ nameError = <label className='control-label'>{this.state.nameError}</label>;
+ nameDivStyle += ' has-error';
+ }
+
+ var passwordError = null;
+ var passwordDivStyle = 'form-group';
+ if (this.state.passwordError) {
+ passwordError = <label className='control-label'>{this.state.passwordError}</label>;
+ passwordDivStyle += ' has-error';
+ }
+
+ var serverError = null;
+ if (this.state.serverError) {
+ serverError = (
+ <div className={'form-group has-error'}>
+ <label className='control-label'>{this.state.serverError}</label>
+ </div>
+ );
}
- var email_error = this.state.email_error ? <label className='control-label'>{ this.state.email_error }</label> : null;
- var name_error = this.state.name_error ? <label className='control-label'>{ this.state.name_error }</label> : null;
- var password_error = this.state.password_error ? <label className='control-label'>{ this.state.password_error }</label> : null;
- var server_error = this.state.server_error ? <div className={ "form-group has-error" }><label className='control-label'>{ this.state.server_error }</label></div> : null;
+ // set up the email entry and hide it if an email was provided
+ var yourEmailIs = '';
+ if (this.state.user.email) {
+ yourEmailIs = <span>Your email address is {this.state.user.email}. You'll use this address to sign in to {config.SiteName}.</span>;
+ }
- var yourEmailIs = this.state.user.email == "" ? "" : <span>Your email address is { this.state.user.email }. </span>
+ var emailContainerStyle = "margin--extra";
+ if (this.state.original_email) {
+ emailContainerStyle = "hidden";
+ }
var email = (
- <div className={ this.state.original_email == "" ? "margin--extra" : "hidden"} >
+ <div className={emailContainerStyle}>
<h5><strong>What's your email address?</strong></h5>
- <div className={ email_error ? "form-group has-error" : "form-group" }>
- <input type="email" ref="email" className="form-control" defaultValue={ this.state.user.email } placeholder="" maxLength="128" autoFocus={true} />
- { email_error }
- </div>
+ <div className={emailDivStyle}>
+ <input type='email' ref='email' className='form-control' defaultValue={this.state.user.email} placeholder='' maxLength='128' autoFocus={true} />
+ {emailError}
</div>
+ </div>
);
- var auth_services = JSON.parse(this.props.authServices);
+ // add options to log in using another service
+ var authServices = JSON.parse(this.props.authServices);
+
+ var signupMessage = null;
+ if (authServices.indexOf('gitlab') >= 0) {
+ signupMessage = (
+ <div>
+ <a className='btn btn-custom-login gitlab' href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}>
+ <span className='icon' />
+ <span>with GitLab</span>
+ </a>
+ <div className='or__container'>
+ <span>or</span>
+ </div>
+ </div>
+ );
+ }
- var signup_message;
- if (auth_services.indexOf("gitlab") >= 0) {
- signup_message = <div><a className="btn btn-custom-login gitlab" href={"/"+this.props.teamName+"/signup/gitlab"+window.location.search}><span className="icon" />{"with GitLab"}</a>
- <div className="or__container"><span>or</span></div></div>;
+ var termsDisclaimer = null;
+ if (config.ShowTermsDuringSignup) {
+ termsDisclaimer = <p>By creating an account and using Mattermost you are agreeing to our <a href={config.TermsLink}>Terms of Service</a>. If you do not agree, you cannot use this service.</p>;
}
return (
<div>
<form>
- <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>
- <h4 className="color--light">Let's create your account</h4>
- { signup_message }
- <div className="inner__content">
- { email }
- <p className={ this.state.original_email == "" ? "hidden" : ""}>{ yourEmailIs } You’ll use this address to sign in to {config.SiteName}.</p>
- <div className="margin--extra">
- <h5><strong>Choose your username</strong></h5>
- <div className={ name_error ? "form-group has-error" : "form-group" }>
- <input type="text" ref="name" className="form-control" placeholder="" maxLength="128" />
- { name_error }
- <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>
+ <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>
+ <h4 className='color--light'>Let's create your account</h4>
+ {signupMessage}
+ <div className='inner__content'>
+ {email}
+ {yourEmailIs}
+ <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' />
+ {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>
+ </div>
+ <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' />
+ {passwordError}
</div>
- </div>
- <div className="margin--extra">
- <h5><strong>Choose your password</strong></h5>
- <div className={ password_error ? "form-group has-error" : "form-group" }>
- <input type="password" ref="password" className="form-control" placeholder="" maxLength="128" />
- { password_error }
</div>
</div>
- </div>
- <p className="margin--extra"><button type='submit' onClick={this.handleSubmit} className="btn-primary btn">Create Account</button></p>
- { server_error }
- <p>By creating an account and using Mattermost you are agreeing to our <a href={ config.TermsLink }>Terms of Service</a>. If you do not agree, you cannot use this service.</p>
+ <p className='margin--extra'><button type='submit' onClick={this.handleSubmit} className='btn-primary btn'>Create Account</button></p>
+ {serverError}
+ {termsDisclaimer}
</form>
</div>
);