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); super(props);
bindAll(this, [ bindAll(this, [
'handleChangeShowPassword', 'handleChangeShowPassword',
'handleFocused',
'handleValidSubmit', 'handleValidSubmit',
'validatePasswordIfPresent', 'validatePasswordIfPresent',
'validatePasswordConfirmIfPresent', 'validatePasswordConfirmIfPresent',
'validateUsernameIfPresent', 'validateUsernameIfPresent',
'validateForm' 'validateForm'
]); ]);
this.state = {
focused: null,
showPassword: false
};
} }
handleChangeShowPassword () { handleChangeShowPassword () {
this.setState({showPassword: !this.state.showPassword}); 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 // we allow username to be empty on blur, since you might not have typed anything yet
validateUsernameIfPresent (username) { validateUsernameIfPresent (username) {
if (!username) return null; // skip validation if username is blank; null indicates valid if (!username) return null; // skip validation if username is blank; null indicates valid
@ -109,7 +119,9 @@ class UsernameStep extends React.Component {
handleSubmit, handleSubmit,
isSubmitting, isSubmitting,
setFieldError, setFieldError,
setFieldTouched,
setFieldValue, setFieldValue,
touched,
validateField, validateField,
values values
} = props; } = props;
@ -135,14 +147,18 @@ class UsernameStep extends React.Component {
id="username" id="username"
name="username" name="username"
placeholder={this.props.intl.formatMessage({id: 'general.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} validate={this.validateUsernameIfPresent}
validationClassName="validation-full-width-input" validationClassName="validation-full-width-input"
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
onBlur={() => validateField('username')} onBlur={() => validateField('username')}
onChange={e => { onChange={e => {
setFieldValue('username', e.target.value); setFieldValue('username', e.target.value);
setFieldTouched('username');
setFieldError('username', null); setFieldError('username', null);
}} }}
onFocus={() => this.handleFocused('username')}
/* eslint-enable react/jsx-no-bind */ /* eslint-enable react/jsx-no-bind */
/> />
<div className="join-flow-password-section"> <div className="join-flow-password-section">
@ -157,6 +173,8 @@ class UsernameStep extends React.Component {
id="password" id="password"
name="password" name="password"
placeholder={this.props.intl.formatMessage({id: 'general.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'} type={values.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
validate={password => this.validatePasswordIfPresent(password, values.username)} validate={password => this.validatePasswordIfPresent(password, values.username)}
@ -164,8 +182,10 @@ class UsernameStep extends React.Component {
onBlur={() => validateField('password')} onBlur={() => validateField('password')}
onChange={e => { onChange={e => {
setFieldValue('password', e.target.value); setFieldValue('password', e.target.value);
setFieldTouched('password');
setFieldError('password', null); setFieldError('password', null);
}} }}
onFocus={() => this.handleFocused('password')}
/* eslint-enable react/jsx-no-bind */ /* eslint-enable react/jsx-no-bind */
/> />
<FormikInput <FormikInput
@ -180,6 +200,12 @@ class UsernameStep extends React.Component {
placeholder={this.props.intl.formatMessage({ placeholder={this.props.intl.formatMessage({
id: 'registration.confirmPasswordInstruction' id: 'registration.confirmPasswordInstruction'
})} })}
toolTip={
this.state.focused === 'passwordConfirm' && !touched.passwordConfirm &&
this.props.intl.formatMessage({
id: 'registration.passwordConfirmAdviceShort'
})
}
type={values.showPassword ? 'text' : 'password'} type={values.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
validate={() => validate={() =>
@ -187,13 +213,13 @@ class UsernameStep extends React.Component {
values.passwordConfirm) values.passwordConfirm)
} }
validationClassName="validation-full-width-input" validationClassName="validation-full-width-input"
onBlur={() => onBlur={() => validateField('passwordConfirm')}
validateField('passwordConfirm')
}
onChange={e => { onChange={e => {
setFieldValue('passwordConfirm', e.target.value); setFieldValue('passwordConfirm', e.target.value);
setFieldTouched('passwordConfirm');
setFieldError('passwordConfirm', null); setFieldError('passwordConfirm', null);
}} }}
onFocus={() => this.handleFocused('passwordConfirm')}
/* eslint-enable react/jsx-no-bind */ /* eslint-enable react/jsx-no-bind */
/> />
<div className="join-flow-input-title"> <div className="join-flow-input-title">