Skip to content

Commit

Permalink
Merge pull request #215 from alexookah/fix-input-for-ids
Browse files Browse the repository at this point in the history 
Fix forms with ids
  • Loading branch information
@scottyzen
scottyzen authored Aug 18, 2024
2 parents e2a0be5 + 33cbc93 commit 0b80e8d
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 24 deletions.
18 changes: 9 additions & 9 deletions woonuxt_base/app/components/forms/BillingDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,47 +16,47 @@ const { allowedCountries, countryStates } = await GqlGetStates({ country: billin
<div class="grid w-full gap-4 lg:grid-cols-2">
<div class="w-full">
<label for="first-name">{{ $t('messages.billing.firstName') }}</label>
<input v-model="billing.firstName" placeholder="John" autocomplete="given-name" type="text" required />
<input id="first-name" v-model="billing.firstName" placeholder="John" autocomplete="given-name" type="text" required />
</div>

<div class="w-full">
<label for="last-name">{{ $t('messages.billing.lastName') }}</label>
<input v-model="billing.lastName" placeholder="Doe" autocomplete="family-name" type="text" required />
<input id="last-name" v-model="billing.lastName" placeholder="Doe" autocomplete="family-name" type="text" required />
</div>

<div v-if="isBillingAddressEnabled" class="w-full col-span-full">
<label for="address1">{{ $t('messages.billing.address1') }}</label>
<input v-model="billing.address1" placeholder="O'Connell Street 47" autocomplete="street-address" type="text" required />
<input id="address1" v-model="billing.address1" placeholder="O'Connell Street 47" autocomplete="street-address" type="text" required />
</div>

<div v-if="isBillingAddressEnabled" class="w-full col-span-full">
<label for="address2">{{ $t('messages.billing.address2') }} ({{ $t('messages.general.optional') }})</label>
<input v-model="billing.address2" placeholder="Apartment, studio, or floor" autocomplete="address-line2" type="text" />
<input id="address2" v-model="billing.address2" placeholder="Apartment, studio, or floor" autocomplete="address-line2" type="text" />
</div>

<div v-if="isBillingAddressEnabled" class="w-full">
<label for="city">{{ $t('messages.billing.city') }}</label>
<input v-model="billing.city" placeholder="New York" autocomplete="locality" type="text" required />
<input id="city" v-model="billing.city" placeholder="New York" autocomplete="locality" type="text" required />
</div>

<div v-if="isBillingAddressEnabled" class="w-full">
<label for="state">{{ $t('messages.billing.state') }} ({{ $t('messages.general.optional') }})</label>
<StateSelect v-model="billing.state" :default-value="billing.state" :country-code="billing.country" @change="updateShippingLocation" :countryStates />
<StateSelect id="state" v-model="billing.state" :default-value="billing.state" :country-code="billing.country" @change="updateShippingLocation" :countryStates />
</div>

<div v-if="isBillingAddressEnabled" class="w-full">
<label for="country">{{ $t('messages.billing.country') }}</label>
<CountrySelect v-model="billing.country" :default-value="billing.country" @change="updateShippingLocation" :allowedCountries />
<CountrySelect id="country" v-model="billing.country" :default-value="billing.country" @change="updateShippingLocation" :allowedCountries />
</div>

<div v-if="isBillingAddressEnabled" class="w-full">
<label for="zip">{{ $t('messages.billing.zip') }}</label>
<input v-model="billing.postcode" placeholder="10001" autocomplete="postal-code" type="text" required />
<input id="zip" v-model="billing.postcode" placeholder="10001" autocomplete="postal-code" type="text" required />
</div>

<div v-if="isBillingAddressEnabled" class="w-full col-span-full">
<label for="phone">{{ $t('messages.billing.phone') }} ({{ $t('messages.general.optional') }})</label>
<input v-model="billing.phone" placeholder="+1 234 567 8901" autocomplete="tel" type="tel" />
<input id="phone" v-model="billing.phone" placeholder="+1 234 567 8901" autocomplete="tel" type="tel" />
</div>
</div>
</template>
4 changes: 2 additions & 2 deletions woonuxt_base/app/components/forms/ChangePassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@

<div class="w-full">
<label for="new-password">{{ $t('messages.account.newPassword') }}</label>
<PasswordInput v-model="password.new" placeholder="••••••••••" type="text" required />
<PasswordInput id="new-password" v-model="password.new" placeholder="••••••••••" type="text" required />
</div>

<div class="w-full">
<label for="new-password-confirm">{{ $t('messages.account.confirmNewPassword') }}</label>
<PasswordInput v-model="password.confirm" placeholder="••••••••••" type="text" required />
<PasswordInput id="new-password-confirm" v-model="password.confirm" placeholder="••••••••••" type="text" required />
</div>

<Transition name="scale-y" mode="out-in">
Expand Down
8 changes: 4 additions & 4 deletions woonuxt_base/app/components/forms/PersonalInformation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@

<div class="w-full">
<label for="first-name">{{ $t('messages.billing.firstName') }}</label>
<input v-model="customer.firstName" placeholder="John" autocomplete="given-name" type="text" />
<input id="first-name" v-model="customer.firstName" placeholder="John" autocomplete="given-name" type="text" />
</div>

<div class="w-full">
<label for="last-name">{{ $t('messages.billing.lastName') }}</label>
<input v-model="customer.lastName" placeholder="Doe" autocomplete="family-name" type="text" />
<input id="last-name" v-model="customer.lastName" placeholder="Doe" autocomplete="family-name" type="text" />
</div>

<div class="w-full">
<label for="username">{{ $t('messages.account.username') }} ({{ $t('messages.general.readOnly') }})</label>
<input v-model="customer.username" placeholder="johndoe" autocomplete="username" type="text" readonly />
<input id="username" v-model="customer.username" placeholder="johndoe" autocomplete="username" type="text" readonly />
</div>

<div class="w-full">
<label for="email">{{ $t('messages.billing.email') }}</label>
<input v-model="customer.email" placeholder="[email protected]" autocomplete="email" type="email" />
<input id="email" v-model="customer.email" placeholder="[email protected]" autocomplete="email" type="email" />
</div>
</div>
<div class="bg-white backdrop-blur-sm bg-opacity-75 border-t col-span-full p-4 sticky bottom-0 rounded-b-lg">
Expand Down
18 changes: 9 additions & 9 deletions woonuxt_base/app/components/forms/ShippingDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,47 +12,47 @@ const shipping = toRef(props, 'modelValue');
<div class="grid w-full gap-4 lg:grid-cols-2">
<div class="w-full">
<label for="first-name">{{ $t('messages.billing.firstName') }}</label>
<input v-model="shipping.firstName" placeholder="John" autocomplete="given-name" type="text" required />
<input id="first-name" v-model="shipping.firstName" placeholder="John" autocomplete="given-name" type="text" required />
</div>

<div class="w-full">
<label for="last-name">{{ $t('messages.billing.lastName') }}</label>
<input v-model="shipping.lastName" placeholder="Doe" autocomplete="family-name" type="text" required />
<input id="last-name" v-model="shipping.lastName" placeholder="Doe" autocomplete="family-name" type="text" required />
</div>

<div class="w-full col-span-full">
<label for="address1">{{ $t('messages.billing.address1') }}</label>
<input v-model="shipping.address1" placeholder="O'Connell Street 47" autocomplete="street-address" type="text" required />
<input id="address1" v-model="shipping.address1" placeholder="O'Connell Street 47" autocomplete="street-address" type="text" required />
</div>

<div class="w-full col-span-full">
<label for="address2">{{ $t('messages.billing.address2') }} ({{ $t('messages.general.optional') }})</label>
<input v-model="shipping.address2" placeholder="Apartment, studio, or floor" autocomplete="address-line2" type="text" />
<input id="address2" v-model="shipping.address2" placeholder="Apartment, studio, or floor" autocomplete="address-line2" type="text" />
</div>

<div class="w-full">
<label for="city">{{ $t('messages.billing.city') }}</label>
<input v-model="shipping.city" placeholder="New York" autocomplete="locality" type="text" required />
<input id="city" v-model="shipping.city" placeholder="New York" autocomplete="locality" type="text" required />
</div>

<div class="w-full">
<label for="state">{{ $t('messages.billing.state') }} ({{ $t('messages.general.optional') }})</label>
<StateSelect v-model="shipping.state" :default-value="shipping.state" :country-code="shipping.country" @change="updateShippingLocation" />
<StateSelect id="state" v-model="shipping.state" :default-value="shipping.state" :country-code="shipping.country" @change="updateShippingLocation" />
</div>

<div class="w-full">
<label for="country">{{ $t('messages.billing.country') }}</label>
<CountrySelect v-model="shipping.country" :default-value="shipping.country" @change="updateShippingLocation" />
<CountrySelect id="country" v-model="shipping.country" :default-value="shipping.country" @change="updateShippingLocation" />
</div>

<div class="w-full">
<label for="zip">{{ $t('messages.billing.zip') }}</label>
<input v-model="shipping.postcode" placeholder="10001" autocomplete="postal-code" type="text" required />
<input id="zip" v-model="shipping.postcode" placeholder="10001" autocomplete="postal-code" type="text" required />
</div>

<div class="w-full col-span-full">
<label for="phone">{{ $t('messages.billing.phone') }} ({{ $t('messages.general.optional') }})</label>
<input v-model="shipping.phone" placeholder="+1 234 567 8901" autocomplete="tel" type="tel" />
<input id="phone" v-model="shipping.phone" placeholder="+1 234 567 8901" autocomplete="tel" type="tel" />
</div>
</div>
</template>

0 comments on commit 0b80e8d

Please sign in to comment.