{
let inputField = (
({
formData: {
@@ -90,21 +87,46 @@ class DefaultSignupForm extends Component {
}
}
+ handleInputFocus() {
+ ReactGA.event({
+ category: `signup`,
+ action: `form focus`,
+ label: `Signup form input focused`,
+ });
+ }
+
+ handleFirstNameChange(event) {
+ this.updateFormFieldValue(event.target.name, event.target.value);
+ }
+
+ handleLastNameChange(event) {
+ this.updateFormFieldValue(event.target.name, event.target.value);
+ }
+
+ handleEmailFocusAndInput() {
+ this.handleInputFocus();
+
+ this.setState({ showCountryField: true, showLanguageField: true });
+ }
+
handleEmailChange(event) {
- this.updateFormFieldValue("email", event.target.value);
+ this.updateFormFieldValue(event.target.name, event.target.value);
this.toggleSubmitButton(event.target.value === "");
}
handleCountryChange(event) {
- this.updateFormFieldValue("country", event.target.value);
+ this.updateFormFieldValue(event.target.name, event.target.value);
}
handleLanguageChange(event) {
- this.updateFormFieldValue("language", event.target.value);
+ this.updateFormFieldValue(event.target.name, event.target.value);
}
handlePrivacyChange(event) {
- this.updateFormFieldValue("privacy", event.target.checked.toString());
+ this.updateFormFieldValue(
+ event.target.name,
+ event.target.checked.toString()
+ );
}
renderHeader() {
@@ -131,18 +153,59 @@ class DefaultSignupForm extends Component {
);
}
+ renderFirstNameField() {
+ const name = "firstName";
+
+ return (
+
this.handleInputFocus()}
+ onChange={(event) => this.handleFirstNameChange(event)}
+ required={false}
+ outerMarginClasses={FIELD_MARGIN_CLASSES}
+ errorMessage={this.props.errors[name]}
+ fieldStyle={this.style.fieldStyle}
+ />
+ );
+ }
+
+ renderLastNameField() {
+ const name = "lastName";
+
+ return (
+ this.handleInputFocus()}
+ onChange={(event) => this.handleLastNameChange(event)}
+ required={false}
+ outerMarginClasses={FIELD_MARGIN_CLASSES}
+ errorMessage={this.props.errors[name]}
+ fieldStyle={this.style.fieldStyle}
+ />
+ );
+ }
+
renderEmailField() {
const name = "email";
return (
- this.showAllFields()}
- onInput={() => this.showAllFields()}
+ onFocus={() => this.handleEmailFocusAndInput()}
+ onInput={() => this.handleEmailFocusAndInput()}
onChange={(event) => this.handleEmailChange(event)}
required={true}
outerMarginClasses={FIELD_MARGIN_CLASSES}
@@ -152,33 +215,37 @@ class DefaultSignupForm extends Component {
);
}
- renderAdditionalFields() {
- const nameCountry = "country";
- const nameLanguage = "language";
+ renderCountryField() {
+ const name = "country";
return (
- <>
-