changed form layout

frontend/src/pages/MainForm.tsx

@@ -4,9 +4,11 @@ import {
   Checkbox,
   Button,
   Alert,
+  CircularProgress,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
+import { submitFormData } from "../utils/sender";
 
 interface Message {
   type: "error" | "info" | "success" | "warning";
@@ -18,38 +20,105 @@ export const MainForm = () => {
   const { t } = useTranslation();
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phoneNumber: "",
+    tickets: 1,
+    companyName: "",
+    cmpFirstName: "",
+    cpmLastName: "",
+    cpmEmail: "",
+    cpmPhoneNumber: "",
+    street: "",
+    postalCode: "",
+    paymentMethod: "",
+    code: "",
+  });
 
-  const handleSubmit = () => {
-    // Form submission logic goes here
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+    try {
+      const result = await submitFormData(formData);
+      if (result.success) {
+        setMsg({
+          type: "success",
+          headline: t("success"),
+          text: t("form-submitted-successfully"),
+        });
+      } else {
+        setMsg({
+          type: "error",
+          headline: t("error"),
+          text: result.error || t("form-submission-failed"),
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
     <>
-      <form action="" method="post">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit();
+        }}
+      >
         <TextField
           required
           id="first-name"
           label={t("first-name")}
           variant="filled"
+          value={formData.firstName}
+          onChange={handleChange}
+          name="firstName"
         />
         <TextField
           required
           id="last-name"
           label={t("last-name")}
           variant="filled"
+          value={formData.lastName}
+          onChange={handleChange}
+          name="lastName"
+        />
+        <TextField
+          required
+          id="email"
+          label={t("email")}
+          variant="filled"
+          type="email"
+          value={formData.email}
+          onChange={handleChange}
+          name="email"
         />
-        <TextField required id="email" label={t("email")} variant="filled" />
         <TextField
           required
           id="phone-number"
           label={t("phone-number")}
           variant="filled"
+          type="tel"
+          value={formData.phoneNumber}
+          onChange={handleChange}
+          name="phoneNumber"
         />
         <TextField
           required
           id="tickets"
+          type="number"
           label={t("tickets")}
           variant="filled"
+          value={formData.tickets}
+          onChange={handleChange}
+          name="tickets"
         />
         <FormControlLabel
           control={
@@ -67,42 +136,65 @@ export const MainForm = () => {
               id="company-name"
               label={t("company-name")}
               variant="filled"
+              value={formData.companyName}
+              onChange={handleChange}
+              name="companyName"
             />
             <TextField
               required
               id="first-name_invoice"
               label={t("first-name")}
               variant="filled"
+              value={formData.cmpFirstName}
+              onChange={handleChange}
+              name="cmpFirstName"
             />
             <TextField
               required
               id="last-name_invoice"
               label={t("last-name")}
               variant="filled"
+              value={formData.cpmLastName}
+              onChange={handleChange}
+              name="cpmLastName"
             />
             <TextField
               required
               id="street"
               label={t("street")}
               variant="filled"
+              value={formData.street}
+              onChange={handleChange}
+              name="street"
             />
             <TextField
               required
               id="postal-code"
               label={t("postal-code")}
               variant="filled"
+              value={formData.postalCode}
+              onChange={handleChange}
+              name="postalCode"
             />
             <TextField
               required
               id="phone-number_invoice"
               label={t("phone-number")}
               variant="filled"
+              type="tel"
+              value={formData.cpmPhoneNumber}
+              onChange={handleChange}
+              name="cpmPhoneNumber"
             />
             <TextField
               required
               id="email_invoice"
               label={t("email")}
               variant="filled"
+              type="email"
+              value={formData.cpmEmail}
+              onChange={handleChange}
+              name="cpmEmail"
             />
           </>
         )}
@@ -111,6 +203,8 @@ export const MainForm = () => {
         <FormControlLabel control={<Checkbox />} label={t("paypal")} />
         <FormControlLabel control={<Checkbox />} label={t("transfer")} />
         <TextField required id="code" label={t("code")} variant="filled" />
+        {isLoading && <CircularProgress />}
+        <button type="submit">
           <Button
             onClick={() => {
               handleSubmit();
@@ -119,6 +213,8 @@ export const MainForm = () => {
           >
             {t("submit")}
           </Button>
+        </button>
+
         {msg && (
           <Alert severity={msg.type}>
             {msg.headline}: {msg.text}

frontend/src/utils/sender.ts

@@ -0,0 +1,37 @@
+interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  tickets: number;
+  companyName: string;
+  cmpFirstName: string;
+  cpmLastName: string;
+  cpmEmail: string;
+  cpmPhoneNumber: string;
+  street: string;
+  postalCode: string;
+  paymentMethod: string;
+  code: string;
+}
+
+export const submitFormData = async (data: FormData) => {
+  try {
+    const response = await fetch("http://localhost:8004/default/frontend", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return { success: false, error: `Server error: ${errorText}` };
+    } 
+
+    return { success: true };
+  } catch (error) {
+    return { success: false, error: (error as Error).message };
+  }
+};