diff --git a/src/components/register.js b/src/components/register.js index db197042..73818730 100644 --- a/src/components/register.js +++ b/src/components/register.js @@ -24,7 +24,6 @@ import { API_HOST } from '../config'; import Message from './message'; class SuccessContent extends Component { - clickHandler = (event) => { event.preventDefault(); this.props.onShowRegisterForm(); @@ -81,34 +80,37 @@ class Register extends React.Component { this.first = ''; this.last = ''; + this.usernameFocused = false; this.usernameManuallyChanged = false; } componentDidMount() { + this.username.addEventListener('focus', this.usernameFocusHandler); + this.username.addEventListener('blur', this.usernameBlurHandler); this.username.addEventListener('input', this.inputUsername); } componentWillUnmount() { + this.username.removeEventListener('focus', this.usernameFocusHandler); + this.username.removeEventListener('blur', this.usernameBlurHandler); this.username.removeEventListener('input', this.inputUsername); } submitHandler = (event) => { event.preventDefault(); - const { form } = this.props; + const { form, fields } = this.props; form.forceValidate(); - if (!form.isValid()) { return; } const theForm = event.target; - this.props.onRegisterUser( - form.username.value, - form.password.value, - form.email.value, + fields.username.value, + fields.password.value, + fields.email.value, theForm.firstName.value, theForm.lastName.value ); @@ -135,16 +137,19 @@ class Register extends React.Component { } const result = this.first + this.last; + const simulatedInput = new Event('input', { bubbles: true }); // to notify react-inform about changes + if (!result) { this.username.value = result; + this.username.dispatchEvent(simulatedInput); return; } try { this.username.value = await this.getAvailableUsername(result); - this.error = ''; + this.username.dispatchEvent(simulatedInput); } catch (e) { - this.error = e.message; + // do nothing } }; @@ -153,7 +158,17 @@ class Register extends React.Component { const result = field.value.replace(/\s|\W/g, ''); field.value = result; - this.usernameManuallyChanged = true; + if (this.usernameFocused) { + this.usernameManuallyChanged = true; + } + }; + + usernameFocusHandler = () => { + this.usernameFocused = true; + }; + + usernameBlurHandler = () => { + this.usernameFocused = false; }; render() { @@ -161,7 +176,7 @@ class Register extends React.Component { if (this.props.registration_success) { ga('send', 'event', 'Reg', 'Done'); - return ( ); + return ; } const reset = ((e) => e.target.setCustomValidity(''));