feat: update user retrieval and add new users table; enhance MainForm with user fetching and localization support

frontend/src/pages/MainForm.tsx

@@ -5,9 +5,10 @@ import {
   Button,
   Alert,
   CircularProgress,
+  Autocomplete,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { submitFormData } from "../utils/sender";
 
 interface Message {
@@ -35,8 +36,28 @@ export const MainForm = () => {
     street: "",
     postalCode: "",
     paymentMethod: "",
-    code: "",
   });
+  const [users, setUsers] = useState<string[]>([]);
+
+  useEffect(() => {
+    // Fetch user data or any other data needed for the form
+    try {
+      const fetchUsers = async () => {
+        const response = await fetch("http://localhost:8004/default/users");
+        const data = await response.json();
+        setUsers(data.users);
+      };
+      fetchUsers();
+      console.log(users);
+    } catch (error) {
+      setMsg({
+        type: "error",
+        headline: t("error"),
+        text: t("failed-to-load-users"),
+      });
+      console.error("Error fetching users:", error);
+    }
+  }, []);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -72,6 +93,12 @@ export const MainForm = () => {
           handleSubmit();
         }}
       >
+        <Autocomplete
+          disablePortal
+          options={users}
+          sx={{ width: 300 }}
+          renderInput={(params) => <TextField {...params} label={t("user")} />}
+        />
         <TextField
           required
           id="first-name"
@@ -202,7 +229,6 @@ export const MainForm = () => {
         <FormControlLabel control={<Checkbox />} label={t("cash")} />
         <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" variant="contained" disabled={isLoading}>
           {t("submit")}

frontend/src/utils/i18n/locales/de/de.json

@@ -8,5 +8,7 @@
     "street": "Straße + Haus Nr.",
     "postal-code": "Plz + Stadt",
     "email": "E-Mail",
-    "submit": "Kaufen"
+    "submit": "Kaufen",
+    "failed-to-load-users": "Das Laden der Benutzer ist fehlgeschlagen.",
+    "user": "Benutzer"
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -8,5 +8,7 @@
     "street": "Street + House No.",
     "postal-code": "Postal Code + City",
     "email": "Email",
-    "submit": "Buy"
+    "submit": "Buy",
+    "failed-to-load-users": "Failed to load users.",
+    "user": "User"
 }

frontend/src/utils/sender.ts

@@ -12,7 +12,6 @@ interface FormData {
   street: string;
   postalCode: string;
   paymentMethod: string;
-  code: string;
 }
 
 export const submitFormData = async (data: FormData) => {