feat: implement dynamic API base URL and add language toggle in MainForm

Co-authored-by: Copilot <copilot@github.com>

backend/routes/default/frontend.data.js

@@ -40,7 +40,7 @@ export const confirmUser = async (username) => {
     console.log(tableName);
 
     const [createTable] = await pool.query(
-      `CREATE TABLE IF NOT EXISTS ${tableName} (
+      `CREATE TABLE IF NOT EXISTS ? (
         id INT AUTO_INCREMENT PRIMARY KEY,
         Vorname VARCHAR(100) NOT NULL,
         Nachname Varchar(100) NOT NULL,
@@ -56,14 +56,16 @@ export const confirmUser = async (username) => {
         Plz_Ort Varchar(100),
         Zahlungsmethode Varchar(100),
         created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-      )`
+      )`,
+      [tableName],
     );
 
     if (createTable) {
       let nextID;
       const getNextID = async () => {
         const [rows] = await pool.query(
-          `SELECT id FROM ${tableName} ORDER BY id DESC LIMIT 1`
+          `SELECT id FROM ? ORDER BY id DESC LIMIT 1`,
+          [tableName],
         );
         nextID = rows.length > 0 ? rows[0].id + 1 : 1;
       };
@@ -87,8 +89,9 @@ export const newEntry = async (formData, username) => {
   const tableName = confirmation.tableName;
 
   const [result] = await pool.query(
-    `INSERT INTO ${tableName} (Vorname, Nachname, EMail, Telefonnummer, Lose, Firmenname, Vorname_Geschaeftlich, Nachname_Geschaeftlich, EMail_Geschaeftlich, Telefonnummer_Geschaeftlich, Strasse_Hausnr, Plz_Ort, Zahlungsmethode) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    `INSERT INTO ? (Vorname, Nachname, EMail, Telefonnummer, Lose, Firmenname, Vorname_Geschaeftlich, Nachname_Geschaeftlich, EMail_Geschaeftlich, Telefonnummer_Geschaeftlich, Strasse_Hausnr, Plz_Ort, Zahlungsmethode) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
     [
+      tableName,
       formData.firstName,
       formData.lastName,
       formData.email,
@@ -102,7 +105,7 @@ export const newEntry = async (formData, username) => {
       formData.street,
       formData.postalCode,
       formData.paymentMethod,
-    ]
+    ],
   );
 
   return { success: true, insertId: result.insertId };

frontend/src/config/api.config.ts

@@ -0,0 +1,4 @@
+export const API_BASE =
+  (import.meta as any).env?.VITE_BACKEND_URL ||
+  import.meta.env.VITE_BACKEND_URL ||
+  "http://localhost:8004";

frontend/src/pages/MainForm.tsx

@@ -10,12 +10,15 @@ import {
   Box,
   Paper,
   Typography,
+  IconButton,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
 import { submitFormData } from "../utils/sender";
 import Cookies from "js-cookie";
 import * as React from "react";
+import TranslateIcon from "@mui/icons-material/Translate";
+import { API_BASE } from "../config/api.config";
 
 interface Message {
   type: "error" | "info" | "success" | "warning";
@@ -24,7 +27,7 @@ interface Message {
 }
 
 export const MainForm = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -47,11 +50,27 @@ export const MainForm = () => {
   const [users, setUsers] = useState<string[]>([]);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
 
+  const changeTranslation = () => {
+    const clientLng = i18n.language;
+
+    if (clientLng === "en") {
+      i18n.changeLanguage("de");
+    } else if (clientLng === "de") {
+      i18n.changeLanguage("en");
+    } else {
+      setMsg({
+        type: "error",
+        headline: "Error",
+        text: "Cannot change langugage.",
+      });
+    }
+  };
+
   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 response = await fetch(`${API_BASE}/default/users`);
         const data = await response.json();
         setUsers(data.users);
       };
@@ -80,7 +99,7 @@ export const MainForm = () => {
   const confirmUser = async (selectedUser: string) => {
     try {
       const response = await fetch(
-        `http://localhost:8004/default/confirm-user?username=${selectedUser}`,
+        `${API_BASE}/default/confirm-user?username=${selectedUser}`,
       );
       const data = await response.json();
       setNextID(data.nextID);
@@ -129,6 +148,7 @@ export const MainForm = () => {
         elevation={6}
         className="w-full rounded-2xl"
         sx={{
+          position: "relative",
           backgroundColor: "#fff",
           boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
           width: "100%",
@@ -143,6 +163,14 @@ export const MainForm = () => {
           },
         }}
       >
+        <Box sx={{ position: "absolute", top: 12, right: 12 }}>
+          <IconButton
+            onClick={() => changeTranslation()}
+            aria-label="translate"
+          >
+            <TranslateIcon />
+          </IconButton>
+        </Box>
         <form
           onSubmit={(e) => {
             e.preventDefault();

frontend/src/utils/sender.ts

@@ -1,3 +1,5 @@
+import { API_BASE } from "../config/api.config";
+
 interface FormData {
   firstName: string;
   lastName: string;
@@ -18,7 +20,7 @@ export const submitFormData = async (data: FormData, username: string) => {
   console.log(data);
   try {
     const response = await fetch(
-      `http://localhost:8004/default/new-entry?username=${username}`,
+      `${API_BASE}/default/new-entry?username=${username}`,
       {
         method: "POST",
         headers: {