From 120ca016626bcb3e95090280b7a1d02c6588b6a8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 28 Jul 2015 01:08:03 +0500 Subject: Signup Ui changes --- web/react/components/login.jsx | 14 ++-- web/react/components/signup_team.jsx | 4 +- web/react/components/signup_team_complete.jsx | 109 ++++++++++++++++---------- web/react/components/signup_user_complete.jsx | 51 ++++++------ 4 files changed, 104 insertions(+), 74 deletions(-) (limited to 'web/react') diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 05918650b..45b558dca 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -103,13 +103,9 @@ module.exports = React.createClass({ return (
-
- { teamDisplayName } -
- /{ teamName }/ -
-
-
+
Sign in to:
+

{ teamDisplayName }

+

on { teamName }

{ server_error } @@ -124,13 +120,13 @@ module.exports = React.createClass({
{ login_message } -
+
{"Find other " + strings.TeamPlural}
I forgot my password
-
+
{"Want to create your own " + strings.Team + "?"} Sign up now
diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx index 362f79163..6fde7f8b5 100644 --- a/web/react/components/signup_team.jsx +++ b/web/react/components/signup_team.jsx @@ -70,9 +70,9 @@ module.exports = React.createClass({
{ server_error }
- +
-
+ diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 3e8a57308..ee85342ce 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -80,19 +80,25 @@ WelcomePage = React.createClass({

-

Welcome!

-

{"Let's set up your " + strings.Team + " on " + config.SiteName + "."}

+

Welcome to:

+

{config.SiteName}

+

Let's setup your new team

Please confirm your email address:
- { this.props.state.team.email }
+

+
{ this.props.state.team.email }
+
+

+

+ Your account will administer the new team site.
+ You can add other administrators later.

{ storage_error }

-

If this is not correct, you can switch to a different email. We'll send you a new invite right away.

@@ -105,7 +111,7 @@ WelcomePage = React.createClass({ { server_error }
- + Use a different email
); } @@ -158,9 +164,11 @@ TeamDisplayNamePage = React.createClass({
{ name_error }
-

{"Your " + strings.Team + " name shows in menus and headings. It may include the name of your " + strings.Company + ", but it's not required."}

-   - +
{"Name your " + strings.Team + " in any language. Your " + strings.Team + " name shows in menus and headings."}
+ +
); @@ -255,10 +263,16 @@ TeamURLPage = React.createClass({
{ name_error }
-

{"Pick something short and memorable for your " + strings.Team + "'s web address."}

-

{"Your " + strings.Team + " URL can only contain lowercase letters, numbers and dashes. Also, it needs to start with a letter and cannot end in a dash."}

-   - +

{"Choose the web address of your new " + strings.Team + ":"}

+ + +
+ Back to previous step +
); @@ -461,14 +475,16 @@ SendInivtesPage = React.createClass({ return (
- -

Send Invitations

- { emails } -
-
 
-
-

{"If you'd prefer, you can send invitations after you finish setting up the "+ strings.Team + "."}

-
Skip this step
+ +

Invite Team Members

+ { emails } +
Add Invitation
+
+ +

if you prefer, you can invite team members later
and skip this step for now.

+
+ Back to previous step +
); } @@ -512,19 +528,24 @@ UsernamePage = React.createClass({
-

Choose a username

-
-
-
- +

Your username

+
Select a memorable username that makes it easy for teammates to identify you:
+
+
+
+
+
Choose your username
+ +
Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'
+
+
+ { name_error }
- { name_error } + + -

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

-

It can be made of lowercase letters and numbers.

-   -
); @@ -600,24 +621,32 @@ PasswordPage = React.createClass({
-

Choose a password

-

You'll use your email address ({this.props.state.team.email}) and password to log into {config.SiteName}.

-
-
-
- +

Your password

+
Select a password that you'll use to login with your email address:
+
+
Email
+
{this.props.state.team.email}
+
+
+
+
Choose your password
+ +
Passwords must contain 5 to 50 characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.
+
+
+ { name_error }
-
- { name_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/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index bbf1f670c..36fa27ad7 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -104,8 +104,8 @@ module.exports = React.createClass({ var yourEmailIs = this.state.user.email == "" ? "" : Your email address is { this.state.user.email }. var email = ( -
- +
+
What's your email address?
{ email_error } @@ -124,29 +124,34 @@ module.exports = React.createClass({ return (
-

Signup to { config.SiteName }

-
- -
+
Welcome to:
+

"teamDisplayName"

+

on { config.SiteName }

+

Let's create your account

{ signup_message } - -
- - { name_error } -

Your username can be made of lowercase letters and numbers.

-

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

-
- { email } - -
- - { password_error } -
-

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

-
-

+
+ { email } +

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

+
+
Choose your username
+
+ + { 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 '_'"

+
+
+
+
Choose your password
+
+ + { password_error } +
+
+
+
+

{ 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}.

+

By creating an account and using Mattermost you are agreeing to our Terms of Service. If you do not agree, you cannot use this service.

); } -- cgit v1.2.3-1-g7c22 From ff362b77929cbb65f941e14144472f7d6ca9d430 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Tue, 28 Jul 2015 11:36:33 -0400 Subject: updates to sign-up flow, remove company name and marketing checkbox --- web/react/components/signup_team.jsx | 16 +--------------- web/react/components/signup_team_complete.jsx | 23 ++++++++++------------- web/react/pages/signup_team_complete.jsx | 4 ++-- web/react/utils/client.jsx | 4 ++-- 4 files changed, 15 insertions(+), 32 deletions(-) (limited to 'web/react') diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx index 6fde7f8b5..edd48e0b9 100644 --- a/web/react/components/signup_team.jsx +++ b/web/react/components/signup_team.jsx @@ -20,21 +20,12 @@ module.exports = React.createClass({ state.email_error = ""; } - team.display_name = this.refs.name.getDOMNode().value.trim(); - if (!team.display_name) { - state.name_error = "This field is required"; - state.inValid = true; - } - else { - state.name_error = ""; - } - if (state.inValid) { this.setState(state); return; } - client.signupTeam(team.email, team.display_name, + client.signupTeam(team.email, function(data) { if (data["follow_link"]) { window.location.href = data["follow_link"]; @@ -55,7 +46,6 @@ module.exports = React.createClass({ render: function() { var email_error = this.state.email_error ? : null; - var name_error = this.state.name_error ? : null; var server_error = this.state.server_error ?
: null; return ( @@ -64,10 +54,6 @@ module.exports = React.createClass({ { email_error }
-
- - { name_error } -
{ server_error }
diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index ee85342ce..450a95dd0 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -134,6 +134,7 @@ TeamDisplayNamePage = React.createClass({ this.props.state.wizard = "team_url"; this.props.state.team.display_name = display_name; + this.props.state.team.name = utils.cleanUpUrlable(display_name); this.props.updateParent(this.props.state); }, getInitialState: function() { @@ -563,15 +564,15 @@ PasswordPage = React.createClass({ var password = this.refs.password.getDOMNode().value.trim(); if (!password || password.length < 5) { - this.setState({name_error: "Please enter at least 5 characters"}); + this.setState({password_error: "Please enter at least 5 characters"}); return; } - this.setState({name_error: ""}); + this.setState({password_error: null, server_error: null}); $('#finish-button').button('loading'); var teamSignup = JSON.parse(JSON.stringify(this.props.state)); teamSignup.user.password = password; - teamSignup.user.allow_marketing = this.refs.email_service.getDOMNode().checked; + teamSignup.user.allow_marketing = true; delete teamSignup.wizard; var ctl = this; @@ -603,7 +604,7 @@ PasswordPage = React.createClass({ }, 5000); }.bind(this), function(err) { - this.setState({name_error: err.message}); + this.setState({server_error: err.message}); $('#sign-up-button').button('reset'); }.bind(this) ); @@ -615,7 +616,8 @@ PasswordPage = React.createClass({ client.track('signup', 'signup_team_07_password'); - var name_error = this.state.name_error ? : null; + var password_error = this.state.password_error ? : null; + var server_error = this.state.server_error ? : null; return (
@@ -626,7 +628,7 @@ PasswordPage = React.createClass({
Email
{this.props.state.team.email}
-
+
Choose your password
@@ -634,12 +636,10 @@ PasswordPage = React.createClass({
Passwords must contain 5 to 50 characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.
- { name_error } + { password_error } + { server_error }
-
- -
@@ -669,9 +669,6 @@ module.exports = React.createClass({ props.wizard = "welcome"; props.team = {}; props.team.email = this.props.email; - props.team.display_name = this.props.name; - props.team.company_name = this.props.name; - props.team.name = utils.cleanUpUrlable(this.props.name); props.team.allowed_domains = ""; props.invites = []; props.invites.push(""); diff --git a/web/react/pages/signup_team_complete.jsx b/web/react/pages/signup_team_complete.jsx index 346f2ab5a..71806c2ea 100644 --- a/web/react/pages/signup_team_complete.jsx +++ b/web/react/pages/signup_team_complete.jsx @@ -3,9 +3,9 @@ var SignupTeamComplete =require('../components/signup_team_complete.jsx'); -global.window.setup_signup_team_complete_page = function(email, name, data, hash) { +global.window.setup_signup_team_complete_page = function(email, data, hash) { React.render( - , + , document.getElementById('signup-team-complete') ); }; diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 1c31dc5ed..b8eda0075 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -341,13 +341,13 @@ module.exports.updateTeamDisplayName = function(data, success, error) { module.exports.track('api', 'api_teams_update_name'); }; -module.exports.signupTeam = function(email, display_name, success, error) { +module.exports.signupTeam = function(email, success, error) { $.ajax({ url: "/api/v1/teams/signup", dataType: 'json', contentType: 'application/json', type: 'POST', - data: JSON.stringify({email: email, display_name: display_name}), + data: JSON.stringify({email: email}), success: success, error: function(xhr, status, err) { e = handleError("singupTeam", xhr, status, err); -- cgit v1.2.3-1-g7c22 From 0bfc769b4dc03538b5ee1897a33febf7a45226a2 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Tue, 28 Jul 2015 11:41:44 -0400 Subject: updated user sign up page and login page with new UI details --- web/react/components/login.jsx | 2 +- web/react/components/signup_user_complete.jsx | 5 ++--- web/react/pages/signup_user_complete.jsx | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'web/react') diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 45b558dca..fe0a47777 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -105,7 +105,7 @@ module.exports = React.createClass({
Sign in to:

{ teamDisplayName }

-

on { teamName }

+

on { config.SiteName }

{ server_error } diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index 36fa27ad7..670aab943 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -40,7 +40,7 @@ module.exports = React.createClass({ this.setState({name_error: "", email_error: "", password_error: "", server_error: ""}); - this.state.user.allow_marketing = this.refs.email_service.getDOMNode().checked; + this.state.user.allow_marketing = true; client.createUser(this.state.user, this.state.data, this.state.hash, function(data) { @@ -125,7 +125,7 @@ module.exports = React.createClass({
Welcome to:
-

"teamDisplayName"

+

{ this.props.teamDisplayName }

on { config.SiteName }

Let's create your account

{ signup_message } @@ -147,7 +147,6 @@ module.exports = React.createClass({ { password_error }
-

{ server_error } diff --git a/web/react/pages/signup_user_complete.jsx b/web/react/pages/signup_user_complete.jsx index 60c3a609a..8f9be1f94 100644 --- a/web/react/pages/signup_user_complete.jsx +++ b/web/react/pages/signup_user_complete.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var SignupUserComplete =require('../components/signup_user_complete.jsx'); +var SignupUserComplete = require('../components/signup_user_complete.jsx'); global.window.setup_signup_user_complete_page = function(email, name, ui_name, id, data, hash, auth_services) { React.render( -- cgit v1.2.3-1-g7c22 From 95123302419c2ea73e239ef5a62d1a0148d801dc Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Tue, 28 Jul 2015 11:49:45 -0400 Subject: updated changing email in sign up flow to work properly --- web/react/components/signup_team_complete.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'web/react') diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 450a95dd0..559009f44 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -42,11 +42,15 @@ WelcomePage = React.createClass({ state.email_error = ""; } - client.signupTeam(email, this.props.state.team.name, + client.signupTeam(email, function(data) { - this.props.state.wizard = "finished"; - this.props.updateParent(this.props.state); - window.location.href = "/signup_team_confirm/?email=" + encodeURI(email); + if (data["follow_link"]) { + window.location.href = data["follow_link"]; + } else { + this.props.state.wizard = "finished"; + this.props.updateParent(this.props.state); + window.location.href = "/signup_team_confirm/?email=" + encodeURIComponent(team.email); + } }.bind(this), function(err) { this.state.server_error = err.message; -- cgit v1.2.3-1-g7c22 From f084188010ccc0b82f17b99e5cacde74e732c318 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Wed, 29 Jul 2015 07:52:11 -0400 Subject: added use of strings.Team to replace hardcoded mentions of 'team' --- web/react/components/signup_team_complete.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web/react') diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 559009f44..ebb40f17f 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -481,12 +481,12 @@ SendInivtesPage = React.createClass({
-

Invite Team Members

+

{"Invite " + utils.toTitleCase(strings.Team) + " Members"}

{ emails }
-

if you prefer, you can invite team members later
and skip this step for now.

+

{"if you prefer, you can invite " + strings.Team + " members later"}
and skip this step for now.

@@ -534,7 +534,7 @@ UsernamePage = React.createClass({

Your username

-
Select a memorable username that makes it easy for teammates to identify you:
+
{"Select a memorable username that makes it easy for " + strings.Team + "mates to identify you:"}
-- cgit v1.2.3-1-g7c22