Sign in to:

- - ); } -}); - - +} + +TeamSignUp.defaultProps = { + services: [] +}; +TeamSignUp.propTypes = { + services: React.PropTypes.array +}; diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index 0393e0413..e5c602c16 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -171,7 +171,35 @@ module.exports = React.createClass({ ); } - if (signupMessage.length > 0) { + var emailSignup; + if (authServices.indexOf(Constants.EMAIL_SERVICE) !== -1) { + emailSignup = ( +

+ {email} + {yourEmailIs} +

Choose your username

+ + {nameError} +

Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'

Choose your password

+ + {passwordError} +

+ ); + } + + if (signupMessage.length > 0 && emailSignup) { signupMessage = (

{signupMessage} @@ -196,26 +224,7 @@ module.exports = React.createClass({

on {config.SiteName}

Let's create your account

{signupMessage} -

- {email} - {yourEmailIs} -

Choose your username

- - {nameError} -

Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'

Choose your password

- - {passwordError} -

+ {emailSignup} {serverError} {termsDisclaimer} diff --git a/web/react/components/signup_user_oauth.jsx b/web/react/components/signup_user_oauth.jsx deleted file mode 100644 index 8b2800bde..000000000 --- a/web/react/components/signup_user_oauth.jsx +++ /dev/null @@ -1,87 +0,0 @@ -// 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'); - UserStore.setCurrentUser(data); - UserStore.setLastEmail(data.email); - - window.location.href = '/' + this.props.teamName + '/login/' + user.auth_service + '?login_hint=' + user.email; - }.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 ? { this.state.name_error } : null; - var server_error = this.state.server_error ?

{ this.state.server_error }

: null; - - var yourEmailIs = this.state.user.email == "" ? "" : Your email address is { this.state.user.email }.; - - return ( -

Welcome to { config.SiteName }

{"To continue signing up with " + this.state.user.auth_service + ", please register a username."}

Your username can be made of lowercase letters and numbers.

- Username -

- - { name_error } -

{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others."}

{ yourEmailIs } You’ll use this address to sign in to {config.SiteName}.

It's ok to send me occassional email with updates about the {config.SiteName} service.

- { server_error } -

By proceeding to create your account and use { config.SiteName }, you agree to our Terms of Service and Privacy Policy. If you do not agree, you cannot use {config.SiteName}.

- ); - } -}); - - diff --git a/web/react/components/team_signup_choose_auth.jsx b/web/react/components/team_signup_choose_auth.jsx new file mode 100644 index 000000000..2d35785c2 --- /dev/null +++ b/web/react/components/team_signup_choose_auth.jsx @@ -0,0 +1,88 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Constants = require('../utils/constants.jsx'); + +export default class ChooseAuthPage extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + var buttons = []; + if (this.props.services.indexOf(Constants.GITLAB_SERVICE) !== -1) { + buttons.push( + + + Create new {strings.Team} with GitLab Account + + ); + } + + if (this.props.services.indexOf(Constants.GOOGLE_SERVICE) !== -1) { + buttons.push( + + + Create new {strings.Team} with Google Apps Account + + ); + } + + if (this.props.services.indexOf(Constants.EMAIL_SERVICE) !== -1) { + buttons.push( + + + Create new {strings.Team} with email address + + ); + } + + if (buttons.length === 0) { + buttons = No sign-up methods configured, please contact your system administrator.; + } + + return ( +

+ {buttons} +

+ {'Find my ' + strings.Team} +

+ ); + } +} + +ChooseAuthPage.defaultProps = { + services: [] +}; +ChooseAuthPage.propTypes = { + services: React.PropTypes.array, + updatePage: React.PropTypes.func +}; diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx new file mode 100644 index 000000000..c7204880f --- /dev/null +++ b/web/react/components/team_signup_with_email.jsx @@ -0,0 +1,82 @@ +// 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'); + +export default class EmailSignUpPage extends React.Component { + constructor() { + super(); + + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = {}; + } + handleSubmit(e) { + e.preventDefault(); + var team = {}; + var state = {serverError: ''}; + + team.email = this.refs.email.getDOMNode().value.trim().toLowerCase(); + if (!team.email || !utils.isEmail(team.email)) { + state.emailError = 'Please enter a valid email address'; + state.inValid = true; + } else { + state.emailError = ''; + } + + if (state.inValid) { + this.setState(state); + return; + } + + client.signupTeam(team.email, + function success(data) { + if (data.follow_link) { + window.location.href = data.follow_link; + } else { + window.location.href = '/signup_team_confirm/?email=' + encodeURIComponent(team.email); + } + }, + function fail(err) { + state.serverError = err.message; + this.setState(state); + }.bind(this) + ); + } + render() { + return ( + + ); + } +} + +EmailSignUpPage.defaultProps = { +}; +EmailSignUpPage.propTypes = { +}; diff --git a/web/react/components/team_signup_with_sso.jsx b/web/react/components/team_signup_with_sso.jsx new file mode 100644 index 000000000..57996d7cc --- /dev/null +++ b/web/react/components/team_signup_with_sso.jsx @@ -0,0 +1,137 @@ +// 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 Constants = require('../utils/constants.jsx'); + +export default class SSOSignUpPage extends React.Component { + constructor(props) { + super(props); + + this.handleSubmit = this.handleSubmit.bind(this); + this.nameChange = this.nameChange.bind(this); + + this.state = {name: ''}; + } + handleSubmit(e) { + e.preventDefault(); + var team = {}; + var state = this.state; + state.nameError = null; + state.serverError = null; + + team.display_name = this.state.name; + + if (team.display_name.length <= 3) { + return; + } + + if (!team.display_name) { + state.nameError = 'Please enter a team name'; + this.setState(state); + return; + } + + team.name = utils.cleanUpUrlable(team.display_name); + team.type = 'O'; + + client.createTeamWithSSO(team, + this.props.service, + function success(data) { + if (data.follow_link) { + window.location.href = data.follow_link; + } else { + window.location.href = '/'; + } + }, + function fail(err) { + state.serverError = err.message; + this.setState(state); + }.bind(this) + ); + } + nameChange() { + this.setState({name: this.refs.teamname.getDOMNode().value.trim()}); + } + render() { + var nameError = null; + var nameDivClass = 'form-group'; + if (this.state.nameError) { + nameError = {this.state.nameError}; + nameDivClass += ' has-error'; + } + + var serverError = null; + if (this.state.serverError) { + serverError =

{this.state.serverError}

; + } + + var disabled = false; + if (this.state.name.length <= 3) { + disabled = true; + } + + var button = null; + + if (this.props.service === Constants.GITLAB_SERVICE) { + button = ( + + + Create {strings.Team} with GitLab Account + + ); + } else if (this.props.service === Constants.GOOGLE_SERVICE) { + button = ( + + + Create {strings.Team} with Google Apps Account + + ); + } + + return ( + + ); + } +} + +SSOSignUpPage.defaultProps = { + service: '' +}; +SSOSignUpPage.propTypes = { + service: React.PropTypes.string +}; diff --git a/web/react/pages/signup_team.jsx b/web/react/pages/signup_team.jsx index 37c441d4f..4b58025ac 100644 --- a/web/react/pages/signup_team.jsx +++ b/web/react/pages/signup_team.jsx @@ -5,11 +5,13 @@ var SignupTeam = require('../components/signup_team.jsx'); var AsyncClient = require('../utils/async_client.jsx'); -global.window.setup_signup_team_page = function() { +global.window.setup_signup_team_page = function(authServices) { AsyncClient.getConfig(); + var services = JSON.parse(authServices); + React.render( - , + , document.getElementById('signup-team') ); }; diff --git a/web/react/pages/signup_user_oauth.jsx b/web/react/pages/signup_user_oauth.jsx deleted file mode 100644 index 6a0707702..000000000 --- a/web/react/pages/signup_user_oauth.jsx +++ /dev/null @@ -1,11 +0,0 @@ -// 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( - , - document.getElementById('signup-user-complete') - ); -}; diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 70220c71e..082f82a08 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -70,6 +70,21 @@ module.exports.createTeamFromSignup = function(teamSignup, success, error) { }); }; +module.exports.createTeamWithSSO = function(team, service, success, error) { + $.ajax({ + url: '/api/v1/teams/create_with_sso/' + service, + dataType: 'json', + contentType: 'application/json', + type: 'POST', + data: JSON.stringify(team), + success: success, + error: function onError(xhr, status, err) { + var e = handleError('createTeamWithSSO', xhr, status, err); + error(e); + } + }); +}; + module.exports.createUser = function(user, data, emailHash, success, error) { $.ajax({ url: '/api/v1/users/create?d=' + encodeURIComponent(data) + '&h=' + encodeURIComponent(emailHash), diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 82fc3da22..6678790e2 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -61,6 +61,7 @@ module.exports = { OFFTOPIC_CHANNEL: 'off-topic', GITLAB_SERVICE: 'gitlab', GOOGLE_SERVICE: 'google', + EMAIL_SERVICE: 'email', POST_CHUNK_SIZE: 60, MAX_POST_CHUNKS: 3, POST_LOADING: 'loading', diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 733d81c2b..682809f02 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -290,6 +290,14 @@ .signup-team__name { font-size: 2em; } + .btn.btn-full { + padding-left: 10px; + } + .btn { + .icon, .fa { + margin-right: 6px; + } + } } .modal { .info__label { diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index ddf2aab88..2fb56e537 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -156,9 +156,21 @@ } .btn { + font-size: 1em; padding: em(7px) em(15px); font-weight: 600; margin-right: 5px; + .fa { + font-size: 17px; + margin-right: 8px; + } + .icon { + width: 18px; + height: 18px; + margin-right: 8px; + @include background-size(100% 100%); + display: inline-block; + } &.btn-custom-login { display: block; min-width: 200px; @@ -166,7 +178,7 @@ padding: 0 1em; margin: 1em auto; height: 40px; - line-height: 35px; + line-height: 34px; color: #fff; @include border-radius(2px); &.gitlab { @@ -178,12 +190,7 @@ vertical-align: middle; } .icon { - background: url("../images/gitlabLogo.png"); - width: 18px; - height: 18px; - margin-right: 8px; - @include background-size(100% 100%); - display: inline-block; + background-image: url("../images/gitlabLogo.png"); } } &.google { @@ -195,13 +202,22 @@ vertical-align: middle; } .icon { - background: url("../images/googleLogo.png"); - width: 18px; - height: 18px; - margin-right: 8px; - @include background-size(100% 100%); - display: inline-block; + background-image: url("../images/googleLogo.png"); + } + } + &.email { + background: #2389D7; + &:hover { + background: darken(#2389D7, 10%); } + span { + vertical-align: middle; + } + } + &.btn-full { + width: 100%; + text-align: left; + padding-left: 35px; } } &.btn-default { diff --git a/web/templates/signup_team.html b/web/templates/signup_team.html index b896dedf5..8d9d6e0b8 100644 --- a/web/templates/signup_team.html +++ b/web/templates/signup_team.html @@ -22,7 +22,7 @@

diff --git a/web/templates/signup_user_oauth.html b/web/templates/signup_user_oauth.html deleted file mode 100644 index 2eddb50d2..000000000 --- a/web/templates/signup_user_oauth.html +++ /dev/null @@ -1,26 +0,0 @@ -{{define "signup_user_oauth"}} - - -{{template "head" . }} - -

- -

- - - -{{end}} diff --git a/web/web.go b/web/web.go index dc2b5dced..03dbdde6a 100644 --- a/web/web.go +++ b/web/web.go @@ -145,6 +145,7 @@ func root(c *api.Context, w http.ResponseWriter, r *http.Request) { if len(c.Session.UserId) == 0 { page := NewHtmlTemplatePage("signup_team", "Signup") + page.Props["AuthServices"] = model.ArrayToJson(utils.GetAllowedAuthServices()) page.Render(c, w) } else { page := NewHtmlTemplatePage("home", "Home") @@ -160,6 +161,7 @@ func signup(c *api.Context, w http.ResponseWriter, r *http.Request) { } page := NewHtmlTemplatePage("signup_team", "Signup") + page.Props["AuthServices"] = model.ArrayToJson(utils.GetAllowedAuthServices()) page.Render(c, w) } @@ -529,23 +531,52 @@ func signupCompleteOAuth(c *api.Context, w http.ResponseWriter, r *http.Request) return } - if result := <-api.Srv.Store.User().GetByAuth(team.Id, user.AuthData, service); result.Err == nil { + suchan := api.Srv.Store.User().GetByAuth(team.Id, user.AuthData, service) + euchan := api.Srv.Store.User().GetByEmail(team.Id, user.Email) + + if team.Email == "" { + team.Email = user.Email + if result := <-api.Srv.Store.Team().Update(team); result.Err != nil { + c.Err = result.Err + return + } + } else { + found := true + count := 0 + for found { + if found = api.IsUsernameTaken(user.Username, team.Id); c.Err != nil { + return + } else if found { + user.Username = user.Username + strconv.Itoa(count) + count += 1 + } + } + } + + if result := <-suchan; result.Err == nil { c.Err = model.NewAppError("signupCompleteOAuth", "This "+service+" account has already been used to sign up for team "+team.DisplayName, "email="+user.Email) return } - if result := <-api.Srv.Store.User().GetByEmail(team.Id, user.Email); result.Err == nil { + if result := <-euchan; result.Err == nil { c.Err = model.NewAppError("signupCompleteOAuth", "Team "+team.DisplayName+" already has a user with the email address attached to your "+service+" account", "email="+user.Email) return } user.TeamId = team.Id - page := NewHtmlTemplatePage("signup_user_oauth", "Complete User Sign Up") - page.Props["User"] = user.ToJson() - page.Props["TeamName"] = team.Name - page.Props["TeamDisplayName"] = team.DisplayName - page.Render(c, w) + ruser := api.CreateUser(c, team, user) + if c.Err != nil { + return + } + + api.Login(c, w, r, ruser, "") + + if c.Err != nil { + return + } + + root(c, w, r) } } -- cgit v1.2.3-1-g7c22