diff options
Diffstat (limited to 'web/react')
| -rw-r--r-- | web/react/components/login.jsx | 12 | ||||
| -rw-r--r-- | web/react/components/setting_item_max.jsx | 2 | ||||
| -rw-r--r-- | web/react/components/signup_user_complete.jsx | 23 | ||||
| -rw-r--r-- | web/react/components/signup_user_oauth.jsx | 84 | ||||
| -rw-r--r-- | web/react/components/user_settings.jsx | 74 | ||||
| -rw-r--r-- | web/react/pages/login.jsx | 4 | ||||
| -rw-r--r-- | web/react/pages/signup_user_complete.jsx | 6 | ||||
| -rw-r--r-- | web/react/pages/signup_user_oauth.jsx | 11 |
8 files changed, 176 insertions, 40 deletions
diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 71fefff5b..05918650b 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -90,6 +90,17 @@ module.exports = React.createClass({ focusEmail = true; } + var auth_services = JSON.parse(this.props.authServices); + + var login_message; + if (auth_services.indexOf("gitlab") >= 0) { + login_message = ( + <div className="form-group form-group--small"> + <span><a href={"/"+teamName+"/login/gitlab"}>{"Log in with GitLab"}</a></span> + </div> + ); + } + return ( <div className="signup-team__container"> <div> @@ -112,6 +123,7 @@ module.exports = React.createClass({ <div className="form-group"> <button type="submit" className="btn btn-primary">Sign in</button> </div> + { login_message } <div className="form-group form-group--small"> <span><a href="/find_team">{"Find other " + strings.TeamPlural}</a></span> </div> diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx index b8b667e1a..49eb58773 100644 --- a/web/react/components/setting_item_max.jsx +++ b/web/react/components/setting_item_max.jsx @@ -20,7 +20,7 @@ module.exports = React.createClass({ <hr /> { server_error } { client_error } - <a className="btn btn-sm btn-primary" onClick={this.props.submit}>Submit</a> + { this.props.submit ? <a className="btn btn-sm btn-primary" onClick={this.props.submit}>Submit</a> : "" } <a className="btn btn-sm theme" href="#" onClick={this.props.updateSection}>Cancel</a> </li> </ul> diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index eed323d1f..dc5ba64aa 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -46,7 +46,7 @@ module.exports = React.createClass({ function(data) { client.track('signup', 'signup_user_02_complete'); - client.loginByEmail(this.props.domain, this.state.user.email, this.state.user.password, + client.loginByEmail(this.props.teamName, this.state.user.email, this.state.user.password, function(data) { UserStore.setLastEmail(this.state.user.email); UserStore.setCurrentUser(data); @@ -58,7 +58,7 @@ module.exports = React.createClass({ }.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) + "&domain=" + encodeURIComponent(this.props.domain); + window.location.href = "/verify_email?email="+ encodeURIComponent(this.state.user.email) + "&domain=" + encodeURIComponent(this.props.teamName); } else { this.state.server_error = err.message; this.setState(this.state); @@ -79,7 +79,7 @@ module.exports = React.createClass({ props = {}; props.wizard = "welcome"; props.user = {}; - props.user.team_id = this.props.team_id; + props.user.team_id = this.props.teamId; props.user.email = this.props.email; props.hash = this.props.hash; props.data = this.props.data; @@ -103,7 +103,7 @@ module.exports = React.createClass({ var yourEmailIs = this.state.user.email == "" ? "" : <span>Your email address is { this.state.user.email }. </span> - var email = + 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" }> @@ -111,12 +111,25 @@ module.exports = React.createClass({ { email_error } </div> </div> + ); + + var auth_services = JSON.parse(this.props.authServices); + + var signup_message; + if (auth_services.indexOf("gitlab") >= 0) { + signup_message = <p>{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team} <a href={"/"+this.props.teamName+"/signup/gitlab"+window.location.search}>{"or sign up with GitLab."}</a></p>; + } else { + signup_message = <p>{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team + "."}</p>; + } 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> + <div className="form-group form-group--small"> + <span></span> + </div> + { signup_message } <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" }> diff --git a/web/react/components/signup_user_oauth.jsx b/web/react/components/signup_user_oauth.jsx new file mode 100644 index 000000000..6322aedee --- /dev/null +++ b/web/react/components/signup_user_oauth.jsx @@ -0,0 +1,84 @@ +// 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(); + + 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.setState({name_error: "", server_error: ""}); + + this.state.user.allow_marketing = this.refs.email_service.getDOMNode().checked; + + var user = this.state.user; + client.createUser(user, "", "", + function(data) { + client.track('signup', 'signup_user_oauth_02'); + window.location.href = '/' + this.props.teamName + '/login/'+user.auth_service; + }.bind(this), + function(err) { + this.state.server_error = err.message; + this.setState(this.state); + }.bind(this) + ); + }, + handleChange: function() { + var user = this.state.user; + user.username = this.refs.name.getDOMNode().value; + this.setState({ user: user }); + }, + getInitialState: function() { + var user = JSON.parse(this.props.user); + return { user: user }; + }, + render: function() { + + client.track('signup', 'signup_user_oauth_01'); + + var name_error = this.state.name_error ? <label className='control-label'>{ this.state.name_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 <b>{ this.state.user.email }.</b></span>; + + return ( + <div> + <img className="signup-team-logo" src="/static/images/logo.png" /> + <h4>Welcome to { config.SiteName }</h4> + <p>{"To continue signing up with " + this.state.user.auth_service + ", please register a username."}</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" value={this.state.user.username} onChange={this.handleChange} /> + { name_error } + </div> + <p>{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others."}</p> + <p>{ 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> + ); + } +}); + + diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 1fbbf16ed..298f5ee70 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -449,7 +449,7 @@ var SecurityTab = React.createClass({ submitPassword: function(e) { e.preventDefault(); - var user = UserStore.getCurrentUser(); + var user = this.props.user; var currentPassword = this.state.current_password; var newPassword = this.state.new_password; var confirmPassword = this.state.confirm_password; @@ -513,53 +513,69 @@ var SecurityTab = React.createClass({ var self = this; if (this.props.activeSection === 'password') { var inputs = []; + var submit = null; - inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">Current Password</label> - <div className="col-sm-7"> - <input className="form-control" type="password" onChange={this.updateCurrentPassword} value={this.state.current_password}/> + if (this.props.user.auth_service === "") { + inputs.push( + <div className="form-group"> + <label className="col-sm-5 control-label">Current Password</label> + <div className="col-sm-7"> + <input className="form-control" type="password" onChange={this.updateCurrentPassword} value={this.state.current_password}/> + </div> </div> - </div> - ); - inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">New Password</label> - <div className="col-sm-7"> - <input className="form-control" type="password" onChange={this.updateNewPassword} value={this.state.new_password}/> + ); + inputs.push( + <div className="form-group"> + <label className="col-sm-5 control-label">New Password</label> + <div className="col-sm-7"> + <input className="form-control" type="password" onChange={this.updateNewPassword} value={this.state.new_password}/> + </div> </div> - </div> - ); - inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">Retype New Password</label> - <div className="col-sm-7"> - <input className="form-control" type="password" onChange={this.updateConfirmPassword} value={this.state.confirm_password}/> + ); + inputs.push( + <div className="form-group"> + <label className="col-sm-5 control-label">Retype New Password</label> + <div className="col-sm-7"> + <input className="form-control" type="password" onChange={this.updateConfirmPassword} value={this.state.confirm_password}/> + </div> </div> - </div> - ); + ); + + submit = this.submitPassword; + } else { + inputs.push( + <div className="form-group"> + <label className="col-sm-12">Log in occurs through GitLab. Please see your GitLab account settings page to update your password.</label> + </div> + ); + } passwordSection = ( <SettingItemMax title="Password" inputs={inputs} - submit={this.submitPassword} + submit={submit} server_error={server_error} client_error={password_error} updateSection={function(e){self.props.updateSection("");e.preventDefault();}} /> ); } else { - var d = new Date(this.props.user.last_password_update); - var hour = d.getHours() % 12 ? String(d.getHours() % 12) : "12"; - var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); - var timeOfDay = d.getHours() >= 12 ? " pm" : " am"; - var dateStr = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min + timeOfDay; + var describe; + if (this.props.user.auth_service === "") { + var d = new Date(this.props.user.last_password_update); + var hour = d.getHours() % 12 ? String(d.getHours() % 12) : "12"; + var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); + var timeOfDay = d.getHours() >= 12 ? " pm" : " am"; + describe = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min + timeOfDay; + } else { + describe = "Log in done through GitLab" + } passwordSection = ( <SettingItemMin title="Password" - describe={dateStr} + describe={describe} updateSection={function(){self.props.updateSection("password");}} /> ); diff --git a/web/react/pages/login.jsx b/web/react/pages/login.jsx index 8348f0b5d..6e7528373 100644 --- a/web/react/pages/login.jsx +++ b/web/react/pages/login.jsx @@ -3,9 +3,9 @@ var Login = require('../components/login.jsx'); -global.window.setup_login_page = function(teamDisplayName, teamName) { +global.window.setup_login_page = function(team_display_name, team_name, auth_services) { React.render( - <Login teamDisplayName={teamDisplayName} teamName={teamName}/>, + <Login teamDisplayName={team_display_name} teamName={team_name} authServices={auth_services} />, document.getElementById('login') ); }; diff --git a/web/react/pages/signup_user_complete.jsx b/web/react/pages/signup_user_complete.jsx index a24c8d4c8..60c3a609a 100644 --- a/web/react/pages/signup_user_complete.jsx +++ b/web/react/pages/signup_user_complete.jsx @@ -3,9 +3,9 @@ var SignupUserComplete =require('../components/signup_user_complete.jsx'); -global.window.setup_signup_user_complete_page = function(email, domain, name, id, data, hash) { +global.window.setup_signup_user_complete_page = function(email, name, ui_name, id, data, hash, auth_services) { React.render( - <SignupUserComplete team_id={id} domain={domain} team_name={name} email={email} hash={hash} data={data} />, + <SignupUserComplete teamId={id} teamName={name} teamDisplayName={ui_name} email={email} hash={hash} data={data} authServices={auth_services} />, document.getElementById('signup-user-complete') ); -};
\ No newline at end of file +}; diff --git a/web/react/pages/signup_user_oauth.jsx b/web/react/pages/signup_user_oauth.jsx new file mode 100644 index 000000000..6a0707702 --- /dev/null +++ b/web/react/pages/signup_user_oauth.jsx @@ -0,0 +1,11 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SignupUserOAuth = require('../components/signup_user_oauth.jsx'); + +global.window.setup_signup_user_oauth_page = function(user, team_name, team_display_name) { + React.render( + <SignupUserOAuth user={user} teamName={team_name} teamDisplayName={team_display_name} />, + document.getElementById('signup-user-complete') + ); +}; |