scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

display username tooltip messages

Browse source
This commit is contained in:
Ben Wheeler 2019-08-12 17:53:27 -04:00
parent 095493a313
commit 0998171a67
1 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/join-flow/username-step.jsx
View file

@ -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 */
/>
<div className="join-flow-password-section">
@ -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 */
/>
<FormikInput
@ -180,6 +200,12 @@ class UsernameStep extends React.Component {
placeholder={this.props.intl.formatMessage({
id: 'registration.confirmPasswordInstruction'
})}
toolTip={
this.state.focused === 'passwordConfirm' && !touched.passwordConfirm &&
this.props.intl.formatMessage({
id: 'registration.passwordConfirmAdviceShort'
})
}
type={values.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */
validate={() =>
@ -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 */
/>
<div className="join-flow-input-title">