From 4fb7f228795e265d63d5376dbf8adfd3faaf85b4 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Mon, 18 Sep 2023 13:23:00 +0200
Subject: [PATCH] Add name field to TextInput

This fixes a bug where standard HTML posts were
missing fields as they did not have a name.

Ticket: https://phabricator.wikimedia.org/T345231
---
 src/components/pages/membership_form/DateOfBirth.vue           | 1 +
 src/components/shared/EmailAddress.vue                         | 1 +
 src/components/shared/Name.vue                                 | 3 +++
 src/components/shared/Postal.vue                               | 2 ++
 src/components/shared/form_inputs/TextInput.vue                | 3 +++
 .../membership_form/__snapshots__/DateOfBirth.spec.ts.snap     | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/src/components/pages/membership_form/DateOfBirth.vue b/src/components/pages/membership_form/DateOfBirth.vue
index 11cc25a83..9382857c2 100644
--- a/src/components/pages/membership_form/DateOfBirth.vue
+++ b/src/components/pages/membership_form/DateOfBirth.vue
@@ -4,6 +4,7 @@
 		<div class="field">
 			<TextInput
 				input-id="birthDate"
+				name="birthDate"
 				:placeholder="$t( 'membership_form_birth_date_placeholder' )"
 				v-model="formData.date.value"
 				@blur="$emit('field-changed', 'date')"
diff --git a/src/components/shared/EmailAddress.vue b/src/components/shared/EmailAddress.vue
index a109fe7c4..d9853f643 100644
--- a/src/components/shared/EmailAddress.vue
+++ b/src/components/shared/EmailAddress.vue
@@ -5,6 +5,7 @@
 			<TextInput
 				type="text"
 				input-id="email"
+				name="email"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_email_placeholder_vuei18n_v3' ) } )"
 				autocomplete="email"
 				v-model="formData.email.value"
diff --git a/src/components/shared/Name.vue b/src/components/shared/Name.vue
index 6e43fc331..950b3b0bc 100644
--- a/src/components/shared/Name.vue
+++ b/src/components/shared/Name.vue
@@ -41,6 +41,7 @@
 			<div class="field">
 				<TextInput
 					class="is-medium"
+					name="firstName"
 					input-id="first-name"
 					v-model="formData.firstName.value"
 					:has-error="showError.firstName"
@@ -56,6 +57,7 @@
 			<div class="field">
 				<TextInput
 					input-id="last-name"
+					name="lastName"
 					v-model="formData.lastName.value"
 					:has-error="showError.lastName"
 					:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_lastname_placeholder' ) } )"
@@ -76,6 +78,7 @@
 		<div class="field">
 			<TextInput
 				input-id="company-name"
+				name="companyName"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_companyname_placeholder' ) } )"
 				autocomplete="organization"
 				v-model="formData.companyName.value"
diff --git a/src/components/shared/Postal.vue b/src/components/shared/Postal.vue
index 22ec2fc77..c22905cd4 100644
--- a/src/components/shared/Postal.vue
+++ b/src/components/shared/Postal.vue
@@ -5,6 +5,7 @@
 		<div class="field">
 			<TextInput
 				input-id="street"
+				name="street"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_street_placeholder' ) } )"
 				autocomplete="street-address"
 				v-model="formData.street.value"
@@ -26,6 +27,7 @@
 		<div class="field">
 			<TextInput
 				input-id="post-code"
+				name="zip"
 				v-model="formData.postcode.value"
 				:placeholder="$t( 'form_for_example', { example: $t( 'donation_form_zip_placeholder' ) } )"
 				:has-error="showError.postcode"
diff --git a/src/components/shared/form_inputs/TextInput.vue b/src/components/shared/form_inputs/TextInput.vue
index d5aabd35a..9938b0b4d 100644
--- a/src/components/shared/form_inputs/TextInput.vue
+++ b/src/components/shared/form_inputs/TextInput.vue
@@ -4,6 +4,7 @@
 			v-if="inputType === 'text'"
 			class="input"
 			:id="inputId"
+			:name="name"
 			:class="{ 'is-danger': hasError }"
 			type="text"
 			:autocomplete="newAutocomplete"
@@ -19,6 +20,7 @@
 			v-if="inputType === 'textarea'"
 			class="textarea"
 			:id="inputId"
+			:name="name"
 			:class="{ 'is-danger': hasError }"
 			:maxlength="maxlength"
 			:value="computedValue"
@@ -44,6 +46,7 @@ export default defineComponent( {
 	name: 'TextInput',
 	props: {
 		modelValue: [ String, Number ],
+		name: String,
 		autocomplete: String,
 		maxlength: [ Number, String ],
 		hasError: Boolean,
diff --git a/tests/unit/components/pages/membership_form/__snapshots__/DateOfBirth.spec.ts.snap b/tests/unit/components/pages/membership_form/__snapshots__/DateOfBirth.spec.ts.snap
index ef91c091a..a6a8595ae 100644
--- a/tests/unit/components/pages/membership_form/__snapshots__/DateOfBirth.spec.ts.snap
+++ b/tests/unit/components/pages/membership_form/__snapshots__/DateOfBirth.spec.ts.snap
@@ -18,6 +18,7 @@ exports[`DateOfBirth.vue renders error message 1`] = `
         autocomplete="on"
         class="input is-danger"
         id="birthDate"
+        name="birthDate"
         placeholder="membership_form_birth_date_placeholder"
         type="text"
       />
@@ -59,6 +60,7 @@ exports[`DateOfBirth.vue renders field 1`] = `
         autocomplete="on"
         class="input"
         id="birthDate"
+        name="birthDate"
         placeholder="membership_form_birth_date_placeholder"
         type="text"
       />