From 76f000056512d323febeb6c941e43efb438030ba Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 19 Jan 2016 12:39:51 -0800 Subject: Removed extraneous error when providing a short username --- .../admin_console/reset_password_modal.jsx | 5 ++-- web/react/components/password_reset_form.jsx | 13 ++++----- web/react/components/signup_user_complete.jsx | 31 ++++++++++++---------- web/react/components/team_signup_password_page.jsx | 19 ++++++------- web/react/components/team_signup_username_page.jsx | 15 ++++++----- .../user_settings/user_settings_general.jsx | 2 +- .../user_settings/user_settings_security.jsx | 6 ++--- web/react/utils/constants.jsx | 6 ++++- web/react/utils/utils.jsx | 4 +-- 9 files changed, 57 insertions(+), 44 deletions(-) (limited to 'web') diff --git a/web/react/components/admin_console/reset_password_modal.jsx b/web/react/components/admin_console/reset_password_modal.jsx index 5ff7c3413..bf7d5f7e5 100644 --- a/web/react/components/admin_console/reset_password_modal.jsx +++ b/web/react/components/admin_console/reset_password_modal.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. import * as Client from '../../utils/client.jsx'; +import Constants from '../../utils/constants.jsx'; var Modal = ReactBootstrap.Modal; export default class ResetPasswordModal extends React.Component { @@ -20,8 +21,8 @@ export default class ResetPasswordModal extends React.Component { e.preventDefault(); var password = ReactDOM.findDOMNode(this.refs.password).value; - if (!password || password.length < 5) { - this.setState({serverError: 'Please enter at least 5 characters.'}); + if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) { + this.setState({serverError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters.'}); return; } diff --git a/web/react/components/password_reset_form.jsx b/web/react/components/password_reset_form.jsx index 812911569..8063db05a 100644 --- a/web/react/components/password_reset_form.jsx +++ b/web/react/components/password_reset_form.jsx @@ -1,7 +1,8 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import * as client from '../utils/client.jsx'; +import * as Client from '../utils/client.jsx'; +import Constants from '../utils/constants.jsx'; export default class PasswordResetForm extends React.Component { constructor(props) { @@ -16,8 +17,8 @@ export default class PasswordResetForm extends React.Component { var state = {}; var password = ReactDOM.findDOMNode(this.refs.password).value.trim(); - if (!password || password.length < 5) { - state.error = 'Please enter at least 5 characters.'; + if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) { + state.error = 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters.'; this.setState(state); return; } @@ -31,7 +32,7 @@ export default class PasswordResetForm extends React.Component { data.data = this.props.data; data.name = this.props.teamName; - client.resetPassword(data, + Client.resetPassword(data, function resetSuccess() { this.setState({error: null, updateText: 'Your password has been updated successfully.'}); }.bind(this), @@ -59,7 +60,7 @@ export default class PasswordResetForm extends React.Component { return (
-

Password Reset

+

{'Password Reset'}

{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}

@@ -77,7 +78,7 @@ export default class PasswordResetForm extends React.Component { type='submit' className='btn btn-primary' > - Change my password + {'Change my password'} {updateText} diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index df11fe045..ace0d28ae 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -5,6 +5,7 @@ import * as Utils from '../utils/utils.jsx'; import * as client from '../utils/client.jsx'; import UserStore from '../stores/user_store.jsx'; import BrowserStore from '../stores/browser_store.jsx'; +import Constants from '../utils/constants.jsx'; export default class SignupUserComplete extends React.Component { constructor(props) { @@ -51,7 +52,7 @@ export default class SignupUserComplete extends React.Component { return; } 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 \'_\'.', + nameError: 'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + ' lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.', emailError: '', passwordError: '', serverError: '' @@ -60,8 +61,8 @@ export default class SignupUserComplete extends React.Component { } const providedPassword = ReactDOM.findDOMNode(this.refs.password).value.trim(); - if (!providedPassword || providedPassword.length < 5) { - this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''}); + if (!providedPassword || providedPassword.length < Constants.MIN_PASSWORD_LENGTH) { + this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters', serverError: ''}); return; } @@ -111,7 +112,7 @@ export default class SignupUserComplete extends React.Component { client.track('signup', 'signup_user_01_welcome'); if (this.state.wizard === 'finished') { - return
You've already completed the signup process for this invitation or this invitation has expired.
; + return
{"You've already completed the signup process for this invitation or this invitation has expired."}
; } // set up error labels @@ -123,9 +124,11 @@ export default class SignupUserComplete extends React.Component { } var nameError = null; + var nameHelpText = {'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + " lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'"}; var nameDivStyle = 'form-group'; if (this.state.nameError) { nameError = ; + nameHelpText = ''; nameDivStyle += ' has-error'; } @@ -148,7 +151,7 @@ export default class SignupUserComplete extends React.Component { // set up the email entry and hide it if an email was provided var yourEmailIs = ''; if (this.state.user.email) { - yourEmailIs = Your email address is {this.state.user.email}. You'll use this address to sign in to {global.window.mm_config.SiteName}.; + yourEmailIs = {'Your email address is '}{this.state.user.email}{". You'll use this address to sign in to " + global.window.mm_config.SiteName + '.'}; } var emailContainerStyle = 'margin--extra'; @@ -158,7 +161,7 @@ export default class SignupUserComplete extends React.Component { var email = (
-
What's your email address?
+
{"What's your email address?"}
-
Choose your username
+
{'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 '_' + {nameHelpText}
-
Choose your password
+
{'Choose your password'}
- Create Account + {'Create Account'}

@@ -255,7 +258,7 @@ export default class SignupUserComplete extends React.Component {
{signupMessage}
- or + {'or'}
); @@ -268,10 +271,10 @@ export default class SignupUserComplete extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> -
Welcome to:
+
{'Welcome to:'}

{this.props.teamDisplayName}

-

on {global.window.mm_config.SiteName}

-

Let's create your account

+

{'on ' + global.window.mm_config.SiteName}

+

{"Let's create your account"}

{signupMessage} {emailSignup} {serverError} diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx index 378c7fe2c..7e11d38c3 100644 --- a/web/react/components/team_signup_password_page.jsx +++ b/web/react/components/team_signup_password_page.jsx @@ -4,6 +4,7 @@ import * as Client from '../utils/client.jsx'; import BrowserStore from '../stores/browser_store.jsx'; import UserStore from '../stores/user_store.jsx'; +import Constants from '../utils/constants.jsx'; export default class TeamSignupPasswordPage extends React.Component { constructor(props) { @@ -23,8 +24,8 @@ export default class TeamSignupPasswordPage extends React.Component { e.preventDefault(); var password = ReactDOM.findDOMNode(this.refs.password).value.trim(); - if (!password || password.length < 5) { - this.setState({passwordError: 'Please enter at least 5 characters'}); + if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) { + this.setState({passwordError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters'}); return; } @@ -92,15 +93,15 @@ export default class TeamSignupPasswordPage extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> -

Your password

-
Select a password that you'll use to login with your email address:
+

{'Your password'}

+
{"Select a password that you'll use to login with your email address:"}
-
Email
+
{'Email'}
{this.props.state.team.email}
-
Choose your password
+
{'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. + {'Passwords must contain ' + Constants.MIN_PASSWORD_LENGTH + ' to ' + Constants.MAX_PASSWORD_LENGTH + ' characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.'}
{passwordError} @@ -125,7 +126,7 @@ export default class TeamSignupPasswordPage extends React.Component { data-loading-text={' Creating team...'} onClick={this.submitNext} > - Finish + {'Finish'}

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

@@ -134,7 +135,7 @@ export default class TeamSignupPasswordPage extends React.Component { href='#' onClick={this.submitBack} > - Back to previous step + {'Back to previous step'}
diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx index de239f169..6ccab6656 100644 --- a/web/react/components/team_signup_username_page.jsx +++ b/web/react/components/team_signup_username_page.jsx @@ -3,6 +3,7 @@ import * as Utils from '../utils/utils.jsx'; import * as Client from '../utils/client.jsx'; +import Constants from '../utils/constants.jsx'; export default class TeamSignupUsernamePage extends React.Component { constructor(props) { @@ -33,7 +34,7 @@ export default class TeamSignupUsernamePage extends React.Component { this.setState({nameError: 'This username is reserved, please choose a new one.'}); return; } else if (usernameError) { - this.setState({nameError: 'Username must begin with a letter, and contain 3 to 15 characters in total, which may be numbers, lowercase letters, or any of the symbols \'.\', \'-\', or \'_\''}); + this.setState({nameError: 'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + ' characters in total, which may be numbers, lowercase letters, or any of the symbols \'.\', \'-\', or \'_\''}); return; } @@ -45,9 +46,11 @@ export default class TeamSignupUsernamePage extends React.Component { Client.track('signup', 'signup_team_06_username'); var nameError = null; + var nameHelpText = {'Usernames must begin with a letter and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + " characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'"}; var nameDivClass = 'form-group'; if (this.state.nameError) { nameError = ; + nameHelpText = ''; nameDivClass += ' has-error'; } @@ -58,13 +61,13 @@ export default class TeamSignupUsernamePage extends React.Component { className='signup-team-logo' src='/static/images/logo.png' /> -

Your username

+

{'Your username'}

{'Select a memorable username that makes it easy for teammates to identify you:'}
-
Choose your username
+
{'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 '_' + {nameHelpText}
{nameError} @@ -86,7 +89,7 @@ export default class TeamSignupUsernamePage extends React.Component { className='btn btn-primary margin--extra' onClick={this.submitNext} > - Next + {'Next'}
@@ -94,7 +97,7 @@ export default class TeamSignupUsernamePage extends React.Component { href='#' onClick={this.submitBack} > - Back to previous step + {'Back to previous step'}
diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx index 014038dd4..db8cd277d 100644 --- a/web/react/components/user_settings/user_settings_general.jsx +++ b/web/react/components/user_settings/user_settings_general.jsx @@ -47,7 +47,7 @@ export default class UserSettingsGeneralTab extends React.Component { this.setState({clientError: 'This username is reserved, please choose a new one.'}); return; } else if (usernameError) { - this.setState({clientError: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."}); + this.setState({clientError: 'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + " lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."}); return; } diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx index d1266dd3f..5a21abd19 100644 --- a/web/react/components/user_settings/user_settings_security.jsx +++ b/web/react/components/user_settings/user_settings_security.jsx @@ -48,8 +48,8 @@ export default class SecurityTab extends React.Component { return; } - if (newPassword.length < 5) { - this.setState({passwordError: 'New passwords must be at least 5 characters', serverError: ''}); + if (newPassword.length < Constants.MIN_PASSWORD_LENGTH) { + this.setState({passwordError: 'New passwords must be at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters', serverError: ''}); return; } @@ -337,7 +337,7 @@ export default class SecurityTab extends React.Component { className='security-links theme' dialogType={AccessHistoryModal} > - View Access History + {'View Access History'} 15) { - error = 'Must be between 3 and 15 characters'; + } else if (name.length < Constants.MIN_USERNAME_LENGTH || name.length > Constants.MAX_USERNAME_LENGTH) { + error = 'Must be between ' + Constants.MIN_USERNAME_LENGTH + ' and ' + Constants.MAX_USERNAME_LENGTH + ' characters'; } else if (!(/^[a-z0-9\.\-\_]+$/).test(name)) { error = "Must contain only letters, numbers, and the symbols '.', '-', and '_'."; } else if (!(/[a-z]/).test(name.charAt(0))) { //eslint-disable-line no-negated-condition -- cgit v1.2.3-1-g7c22