diff --git a/src/components/join-flow/username-step.jsx b/src/components/join-flow/username-step.jsx index 5e56440b8..b701ac825 100644 --- a/src/components/join-flow/username-step.jsx +++ b/src/components/join-flow/username-step.jsx @@ -21,16 +21,26 @@ class UsernameStep extends React.Component { super(props); bindAll(this, [ 'handleChangeShowPassword', + 'handleFocused', 'handleValidSubmit', 'validatePasswordIfPresent', 'validatePasswordConfirmIfPresent', 'validateUsernameIfPresent', 'validateForm' ]); + this.state = { + focused: null, + showPassword: false + }; } handleChangeShowPassword () { this.setState({showPassword: !this.state.showPassword}); } + // track the currently focused input field, to determine whether each field should + // display a tooltip. (We only display it if a field is focused and has never been touched.) + handleFocused (fieldName) { + this.setState({focused: fieldName}); + } // we allow username to be empty on blur, since you might not have typed anything yet validateUsernameIfPresent (username) { if (!username) return null; // skip validation if username is blank; null indicates valid @@ -109,7 +119,9 @@ class UsernameStep extends React.Component { handleSubmit, isSubmitting, setFieldError, + setFieldTouched, setFieldValue, + touched, validateField, values } = props; @@ -135,14 +147,18 @@ class UsernameStep extends React.Component { id="username" name="username" placeholder={this.props.intl.formatMessage({id: 'general.username'})} + toolTip={this.state.focused === 'username' && !touched.username && + this.props.intl.formatMessage({id: 'registration.usernameAdviceShort'})} validate={this.validateUsernameIfPresent} validationClassName="validation-full-width-input" /* eslint-disable react/jsx-no-bind */ onBlur={() => validateField('username')} onChange={e => { setFieldValue('username', e.target.value); + setFieldTouched('username'); setFieldError('username', null); }} + onFocus={() => this.handleFocused('username')} /* eslint-enable react/jsx-no-bind */ />