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

backend/routes/default/frontend.data.js

@@ -12,14 +12,14 @@ const pool = mysql
   .promise();
 
 export const getUser = async () => {
-  const [rows] = await pool.query("SELECT unique_key FROM users");
+  const [rows] = await pool.query("SELECT username FROM usersNEW");
+
   if (rows.length > 0) {
-    return {rows};
+    const users = rows.map((r) => r.username);
+    return { users };
   } else {
-    return { message: "No data found" };
+    return { users: [], message: "No data found" };
   }
 };
 
-export const confirmData = async (data) => {
-
-}
+export const confirmData = async (data) => {};

backend/routes/default/frontend.route.js

@@ -16,4 +16,9 @@ router.post("/frontend", async (req, res) => {
   res.sendStatus(204);
 });
 
+router.get("/users", async (req, res) => {
+  const users = await getUser();
+  res.json(users);
+});
+
 export default router;

backend/scheme.sql

@@ -8,6 +8,14 @@ CREATE TABLE users (
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 );
 
+CREATE TABLE usersNEW (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(100) NOT NULL UNIQUE,
+    first_name VARCHAR(100) NOT NULL,
+    last_name VARCHAR(100) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
 -- Trigger zur automatischen Generierung eines 25‑stelligen Keys
 DELIMITER $
 

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) => {