1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
// 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');
var BrowserStore = require('../stores/browser_store.jsx');
module.exports = React.createClass({
handleSubmit: function(e) {
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: ""});
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: ""});
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: ""});
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: ""});
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: ""});
return;
}
this.setState({name_error: "", email_error: "", password_error: "", server_error: ""});
this.state.user.allow_marketing = this.refs.email_service.getDOMNode().checked;
client.createUser(this.state.user, this.state.data, this.state.hash,
function(data) {
client.track('signup', 'signup_user_02_complete');
client.loginByEmail(this.props.domain, this.state.user.email, this.state.user.password,
function(data) {
UserStore.setLastDomain(this.props.domain);
UserStore.setLastEmail(this.state.user.email);
UserStore.setCurrentUser(data);
if (this.props.hash > 0)
BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: "finished"}));
window.location.href = '/channels/town-square';
}.bind(this),
function(err) {
if (err.message == "Login failed because email address has not been verified") {
window.location.href = "/verify?email="+ encodeURIComponent(this.state.user.email) + "&domain=" + encodeURIComponent(this.props.domain);
} else {
this.state.server_error = err.message;
this.setState(this.state);
}
}.bind(this)
);
}.bind(this),
function(err) {
this.state.server_error = err.message;
this.setState(this.state);
}.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.team_id;
props.user.email = this.props.email;
props.hash = this.props.hash;
props.data = this.props.data;
props.original_email = this.props.email;
}
return props;
},
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>);
}
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;
var yourEmailIs = this.state.user.email == "" ? "" : <span>Your email address is { this.state.user.email }. </span>
var email =
<div className={ this.state.original_email == "" ? "" : "hidden"} >
<label className="control-label">Email</label>
<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" />
{ email_error }
</div>
</div>
return (
<div>
<img className="signup-team-logo" src="/static/images/logo.png" />
<h4>Welcome to { config.SiteName }</h4>
<p>{"Choose your username and password for the " + this.props.team_name + " " + strings.Team +"."}</p>
<p>Your username can be made of lowercase letters and numbers.</p>
<label className="control-label">Username</label>
<div className={ name_error ? "form-group has-error" : "form-group" }>
<input type="text" ref="name" className="form-control" placeholder="" maxLength="128" />
{ name_error }
</div>
{ email }
<label className="control-label">Password</label>
<div className={ password_error ? "form-group has-error" : "form-group" }>
<input type="password" ref="password" className="form-control" placeholder="" maxLength="128" />
{ password_error }
</div>
<p>{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others"}</p>
<p className={ this.state.original_email == "" ? "hidden" : ""}>{ yourEmailIs } You’ll use this address to sign in to {config.SiteName}.</p>
<div className="checkbox"><label><input type="checkbox" ref="email_service" /> It's ok to send me occassional email with updates about the {config.SiteName} service. </label></div>
<p><button onClick={this.handleSubmit} className="btn-primary btn">Create Account</button></p>
{ server_error }
<p>By proceeding to create your account and use { config.SiteName }, you agree to our <a href={ config.TermsLink }>Terms of Service</a> and <a href={ config.PrivacyLink }>Privacy Policy</a>. If you do not agree, you cannot use {config.SiteName}.</p>
</div>
);
}
});
|
