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 */ />
@@ -157,6 +173,8 @@ class UsernameStep extends React.Component { id="password" name="password" placeholder={this.props.intl.formatMessage({id: 'general.password'})} + toolTip={this.state.focused === 'password' && !touched.password && + this.props.intl.formatMessage({id: 'registration.passwordAdviceShort'})} type={values.showPassword ? 'text' : 'password'} /* eslint-disable react/jsx-no-bind */ validate={password => this.validatePasswordIfPresent(password, values.username)} @@ -164,8 +182,10 @@ class UsernameStep extends React.Component { onBlur={() => validateField('password')} onChange={e => { setFieldValue('password', e.target.value); + setFieldTouched('password'); setFieldError('password', null); }} + onFocus={() => this.handleFocused('password')} /* eslint-enable react/jsx-no-bind */ /> @@ -187,13 +213,13 @@ class UsernameStep extends React.Component { values.passwordConfirm) } validationClassName="validation-full-width-input" - onBlur={() => - validateField('passwordConfirm') - } + onBlur={() => validateField('passwordConfirm')} onChange={e => { setFieldValue('passwordConfirm', e.target.value); + setFieldTouched('passwordConfirm'); setFieldError('passwordConfirm', null); }} + onFocus={() => this.handleFocused('passwordConfirm')} /* eslint-enable react/jsx-no-bind */ />