Copy and layout improvements.

app/components/EventTicketPurchase.vue

@@ -120,23 +120,29 @@
 
         <form @submit.prevent="handleSubmit">
           <div class="field">
-            <label>Full Name</label>
+            <label for="ticket-name">Full Name</label>
             <input
+              id="ticket-name"
               v-model="form.name"
+              name="name"
               type="text"
+              autocomplete="name"
               required
               :disabled="processing"
-            />
+            >
           </div>
 
           <div class="field">
-            <label>Email Address</label>
+            <label for="ticket-email">Email Address</label>
             <input
+              id="ticket-email"
               v-model="form.email"
+              name="email"
               type="email"
+              autocomplete="email"
               required
               :disabled="processing"
-            />
+            >
           </div>
 
           <p
@@ -244,11 +250,13 @@ onMounted(async () => {
   await fetchTicketInfo();
 });
 
-const fetchTicketInfo = async () => {
+const fetchTicketInfo = async (emailOverride = null) => {
   loading.value = true;
   error.value = null;
 
   try {
+    const effectiveEmail = emailOverride || props.userEmail;
+
     // First check if this event requires a series pass
     if (props.userEmail) {
       try {
@@ -284,7 +292,7 @@ const fetchTicketInfo = async () => {
     }
 
     // Regular ticket availability check
-    const params = props.userEmail ? `?email=${props.userEmail}` : "";
+    const params = effectiveEmail ? `?email=${encodeURIComponent(effectiveEmail)}` : "";
     const response = await $fetch(
       `/api/events/${props.eventId}/tickets/available${params}`,
     );
@@ -326,15 +334,17 @@ const handleSubmit = async () => {
       }
     }
 
+    const body = {
+      name: form.value.name,
+      email: form.value.email,
+    };
+    if (transactionId) body.transactionId = transactionId;
+
     const response = await $fetch(
       `/api/events/${props.eventId}/tickets/purchase`,
       {
         method: "POST",
-        body: {
-          name: form.value.name,
-          email: form.value.email,
-          transactionId,
-        },
+        body,
       },
     );
 
@@ -347,7 +357,7 @@ const handleSubmit = async () => {
     });
 
     emit("success", response);
-    await fetchTicketInfo();
+    await fetchTicketInfo(form.value.email);
   } catch (err) {
     console.error("Error purchasing ticket:", err);