Merge branch 'dev' into debian12

Docs/backend_API_docs/README.md

@@ -1,7 +1,7 @@
 # Borrow System API Documentation
 
 **Frontend:** https://insta.the1s.de  
-**Backend base URL:** `https://insta.the1s.de/backend/api`
+**Backend base URL:** `https://backend.insta.the1s.de/api`
 
 ---
 

FrontendV2/nginx.conf

@@ -9,14 +9,6 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
-  location = /backend {
-    return 301 /backend/;
-  }
-
-  location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
-  }
-
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
     expires 1y;
     access_log off;

FrontendV2/src/App.tsx

@@ -16,6 +16,7 @@ import { Box, Flex } from "@chakra-ui/react";
 import { Footer } from "./components/footer/Footer";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { API_BASE } from "@/config/api.config";
+import { NotFoundPage } from "./pages/NotFoundPage";
 
 const queryClient = new QueryClient();
 
@@ -83,6 +84,7 @@ function App() {
                 </Route>
 
                 <Route path="/login" element={<LoginPage />} />
+                <Route path="/not-found" element={<NotFoundPage />} />
               </Routes>
             </BrowserRouter>
           </UserContext.Provider>

FrontendV2/src/components/Header.tsx

@@ -4,18 +4,25 @@ import {
   Heading,
   Stack,
   Text,
+  CloseButton,
+  Dialog,
+  Portal,
   HStack,
   IconButton,
   Menu,
   Box,
   Avatar,
+  Card,
+  Grid,
 } from "@chakra-ui/react";
+import { PasswordInput } from "@/components/ui/password-input";
 import Cookies from "js-cookie";
 import { useAtom } from "jotai";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useNavigate } from "react-router-dom";
 import {
   CircleUserRound,
+  RotateCcwKey,
   Code,
   LifeBuoy,
   LogOut,
@@ -26,19 +33,69 @@ import {
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
+import MyAlert from "./myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
-import { UserDialogue } from "./UserDialogue";
+import { API_BASE } from "@/config/api.config";
 
 export const Header = () => {
   const navigate = useNavigate();
   const userData = useUserContext();
+  console.log(userData);
   const { t } = useTranslation();
 
+  // Error handling states
+  const [isMsg, setIsMsg] = useState(false);
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
   const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
 
+  // Dialog control
+  const [isPwOpen, setPwOpen] = useState(false);
   const [userDialog, setUserDialog] = useState(false);
 
+  const changePassword = async () => {
+    if (newPassword !== confirmPassword) {
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    const response = await fetch(`${API_BASE}/api/users/change-password`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+      body: JSON.stringify({ oldPassword, newPassword }),
+    });
+
+    if (!response.ok) {
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    setMsgTitle(t("pw_success"));
+    setMsgDescription(t("pw_success_desc"));
+    setMsgStatus("success");
+    setIsMsg(true);
+
+    setOldPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+  };
+
   const username = userData.first_name ? userData.first_name : "N/A";
   const fullname = userData.first_name + " " + userData.last_name;
   const randomColor = [
@@ -318,7 +375,146 @@ export const Header = () => {
       </Flex>
 
       {/* User Info Dialoge */}
-      {userDialog && <UserDialogue setUserDialog={setUserDialog} fullname={fullname} randomColor={randomColor} />}
+      {userDialog && (
+        <Flex
+          position="fixed"
+          inset={0}
+          zIndex={1000}
+          align="center"
+          justify="center"
+          bg="blackAlpha.400"
+          backdropFilter="blur(6px)"
+        >
+          <Card.Root maxW="sm" w="full" mx={4}>
+            <Card.Header>
+              <Card.Title>
+                <Flex justify="center" align="center" w="100%">
+                  <Avatar.Root
+                    size={"2xl"}
+                    colorPalette={randomColor[Math.floor(Math.random() * 10)]}
+                  >
+                    <Avatar.Fallback name={fullname} />
+                  </Avatar.Root>
+                </Flex>
+              </Card.Title>
+              <Card.Description>{t("user-info-desc")}</Card.Description>
+            </Card.Header>
+            <Card.Body>
+              <Stack gap="4" w="full">
+                <Box as="dl">
+                  <Grid
+                    templateColumns="auto 1fr"
+                    rowGap={2}
+                    columnGap={4}
+                    alignItems="start"
+                  >
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("first-name")}:
+                    </Text>
+                    <Text as="dd">{userData.first_name}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("last-name")}:
+                    </Text>
+                    <Text as="dd">{userData.last_name}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("username")}:
+                    </Text>
+                    <Text as="dd">{userData.username}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("role")}:
+                    </Text>
+                    <Text as="dd">{userData.role}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("admin-status")}:
+                    </Text>
+                    <Text as="dd">
+                      {userData.is_admin ? t("yes") : t("no")}
+                    </Text>
+                  </Grid>
+                </Box>
+
+                <Button variant="solid" onClick={() => setPwOpen(true)}>
+                  <HStack gap={2}>
+                    <RotateCcwKey size={18} />
+                    <Text as="span">{t("change-password")}</Text>
+                  </HStack>
+                </Button>
+              </Stack>
+            </Card.Body>
+            <Card.Footer justifyContent="flex-end">
+              <Button variant="outline" onClick={() => setUserDialog(false)}>
+                {t("cancel")}
+              </Button>
+            </Card.Footer>
+          </Card.Root>
+        </Flex>
+      )}
+
+      {/* Passwort-Dialog (kontrolliert) */}
+      <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content maxW="md">
+              <Dialog.Header>
+                <Dialog.Title>{t("change-password")}</Dialog.Title>
+              </Dialog.Header>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  changePassword();
+                }}
+              >
+                <Dialog.Body>
+                  <Stack gap={3}>
+                    <PasswordInput
+                      value={oldPassword}
+                      onChange={(e) => setOldPassword(e.target.value)}
+                      placeholder={t("old-password")}
+                    />
+                    <PasswordInput
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder={t("new-password")}
+                    />
+                    <PasswordInput
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      placeholder={t("confirm-password")}
+                    />
+                  </Stack>
+                </Dialog.Body>
+                <Dialog.Footer>
+                  <Stack w="100%" gap={3}>
+                    {isMsg && (
+                      <MyAlert
+                        status={msgStatus}
+                        title={msgTitle}
+                        description={msgDescription}
+                      />
+                    )}
+                    <HStack justify="flex-end" gap={2}>
+                      <Dialog.ActionTrigger asChild>
+                        <Button variant="outline">{t("cancel")}</Button>
+                      </Dialog.ActionTrigger>
+                      <Button type="submit" colorScheme="teal">
+                        {t("save")}
+                      </Button>
+                    </HStack>
+                  </Stack>
+                </Dialog.Footer>
+              </form>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
     </Stack>
   );
 };

FrontendV2/src/components/UserDialogue.tsx

@@ -1,220 +0,0 @@
-import {
-  Button,
-  Flex,
-  Stack,
-  Text,
-  CloseButton,
-  Dialog,
-  Portal,
-  HStack,
-  Box,
-  Avatar,
-  Card,
-  Grid,
-} from "@chakra-ui/react";
-import { PasswordInput } from "@/components/ui/password-input";
-import { RotateCcwKey } from "lucide-react";
-import MyAlert from "./myChakra/MyAlert";
-import { API_BASE } from "@/config/api.config";
-import { useUserContext } from "@/states/Context";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import Cookies from "js-cookie";
-
-type UserDialogueProps = {
-  setUserDialog: (value: boolean) => void;
-  fullname: string;
-  randomColor: string[];
-};
-
-export const UserDialogue = (props: UserDialogueProps) => {
-  const userData = useUserContext();
-  const { t } = useTranslation();
-  // Error handling states
-  const [isMsg, setIsMsg] = useState(false);
-  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
-  const [msgTitle, setMsgTitle] = useState("");
-  const [msgDescription, setMsgDescription] = useState("");
-
-  const [oldPassword, setOldPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
-  // Dialog control
-  const [isPwOpen, setPwOpen] = useState(false);
-
-  const changePassword = async () => {
-    if (newPassword !== confirmPassword) {
-      setMsgTitle(t("err_pw_change"));
-      setMsgDescription(t("pw_mismatch"));
-      setMsgStatus("error");
-      setIsMsg(true);
-      return;
-    }
-
-    const response = await fetch(`${API_BASE}/api/users/change-password`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ oldPassword, newPassword }),
-    });
-
-    if (!response.ok) {
-      setMsgTitle(t("err_pw_change"));
-      setMsgDescription(t("pw_mismatch"));
-      setMsgStatus("error");
-      setIsMsg(true);
-      return;
-    }
-
-    setMsgTitle(t("pw_success"));
-    setMsgDescription(t("pw_success_desc"));
-    setMsgStatus("success");
-    setIsMsg(true);
-
-    setOldPassword("");
-    setNewPassword("");
-    setConfirmPassword("");
-  };
-
-  return (
-    <Flex
-      position="fixed"
-      inset={0}
-      zIndex={1000}
-      align="center"
-      justify="center"
-      bg="blackAlpha.400"
-      backdropFilter="blur(6px)"
-    >
-      <Card.Root maxW="sm" w="full" mx={4}>
-        <Card.Header>
-          <Card.Title>
-            <Flex justify="center" align="center" w="100%">
-              <Avatar.Root
-                size={"2xl"}
-                colorPalette={props.randomColor[Math.floor(Math.random() * 10)]}
-              >
-                <Avatar.Fallback name={props.fullname} />
-              </Avatar.Root>
-            </Flex>
-          </Card.Title>
-          <Card.Description>{t("user-info-desc")}</Card.Description>
-        </Card.Header>
-        <Card.Body>
-          <Stack gap="4" w="full">
-            <Box as="dl">
-              <Grid
-                templateColumns="auto 1fr"
-                rowGap={2}
-                columnGap={4}
-                alignItems="start"
-              >
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("first-name")}:
-                </Text>
-                <Text as="dd">{userData.first_name}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("last-name")}:
-                </Text>
-                <Text as="dd">{userData.last_name}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("username")}:
-                </Text>
-                <Text as="dd">{userData.username}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("role")}:
-                </Text>
-                <Text as="dd">{userData.role}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("admin-status")}:
-                </Text>
-                <Text as="dd">{userData.is_admin ? t("yes") : t("no")}</Text>
-              </Grid>
-            </Box>
-
-            <Button variant="solid" onClick={() => setPwOpen(true)}>
-              <HStack gap={2}>
-                <RotateCcwKey size={18} />
-                <Text as="span">{t("change-password")}</Text>
-              </HStack>
-            </Button>
-          </Stack>
-        </Card.Body>
-        <Card.Footer justifyContent="flex-end">
-          <Button variant="outline" onClick={() => props.setUserDialog(false)}>
-            {t("cancel")}
-          </Button>
-        </Card.Footer>
-      </Card.Root>
-
-      {/* Passwort-Dialog (kontrolliert) */}
-      <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
-        <Portal>
-          <Dialog.Backdrop />
-          <Dialog.Positioner>
-            <Dialog.Content maxW="md">
-              <Dialog.Header>
-                <Dialog.Title>{t("change-password")}</Dialog.Title>
-              </Dialog.Header>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  changePassword();
-                }}
-              >
-                <Dialog.Body>
-                  <Stack gap={3}>
-                    <PasswordInput
-                      value={oldPassword}
-                      onChange={(e) => setOldPassword(e.target.value)}
-                      placeholder={t("old-password")}
-                    />
-                    <PasswordInput
-                      value={newPassword}
-                      onChange={(e) => setNewPassword(e.target.value)}
-                      placeholder={t("new-password")}
-                    />
-                    <PasswordInput
-                      value={confirmPassword}
-                      onChange={(e) => setConfirmPassword(e.target.value)}
-                      placeholder={t("confirm-password")}
-                    />
-                  </Stack>
-                </Dialog.Body>
-                <Dialog.Footer>
-                  <Stack w="100%" gap={3}>
-                    {isMsg && (
-                      <MyAlert
-                        status={msgStatus}
-                        title={msgTitle}
-                        description={msgDescription}
-                      />
-                    )}
-                    <HStack justify="flex-end" gap={2}>
-                      <Dialog.ActionTrigger asChild>
-                        <Button variant="outline">{t("cancel")}</Button>
-                      </Dialog.ActionTrigger>
-                      <Button type="submit" colorScheme="teal">
-                        {t("save")}
-                      </Button>
-                    </HStack>
-                  </Stack>
-                </Dialog.Footer>
-              </form>
-              <Dialog.CloseTrigger asChild>
-                <CloseButton size="sm" />
-              </Dialog.CloseTrigger>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </Flex>
-  );
-};

FrontendV2/src/components/ui/provider.tsx

@@ -1,15 +1,23 @@
-"use client"
+"use client";
 
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
-import {
-  ColorModeProvider,
-  type ColorModeProviderProps,
-} from "./color-mode"
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import * as React from "react";
+import type { ReactNode } from "react";
+import { ColorModeProvider as ThemeColorModeProvider } from "./color-mode";
 
-export function Provider(props: ColorModeProviderProps) {
+export interface ColorModeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ColorModeProvider({ children }: ColorModeProviderProps) {
+  // Wrap children with the real color-mode provider
+  return <ThemeColorModeProvider>{children}</ThemeColorModeProvider>;
+}
+
+export function Provider({ children }: { children: ReactNode }) {
   return (
     <ChakraProvider value={defaultSystem}>
-      <ColorModeProvider {...props} />
+      <ColorModeProvider>{children}</ColorModeProvider>
     </ChakraProvider>
-  )
+  );
 }

FrontendV2/src/pages/NotFoundPage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const NotFoundPage = () => {
+  return (
+    <>
+    
+    </>
+  )
+};

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

@@ -63,7 +63,7 @@
     "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden.",
     "optional-note": "Optionale Notiz",
     "note": "Notiz",
-    "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und das Passwort ändern. Falls Sie weitere Änderungen benötigen, wenden Sie sich bitte an einen Administrator.",
+    "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und ändern.",
     "role": "Rolle",
     "admin-status": "Admin-Status",
     "first-name": "Vorname",

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

@@ -63,7 +63,7 @@
     "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such.",
     "optional-note": "Optional note",
     "note": "Note",
-    "user-info-desc": "Here you can view your personal information and change your password. If you need to make further changes, please contact an administrator.",
+    "user-info-desc": "Here you can view and edit your personal information.",
     "role": "Role",
     "admin-status": "Admin status",
     "first-name": "First name",

FrontendV2/vite.config.ts

@@ -1,16 +1,23 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import path from "node:path";
 
 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
+  plugins: [tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
   server: {
     host: "0.0.0.0",
-    port: 8001,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["insta.the1s.de"],
+    port: 8101,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
     },
   },
 });

admin/nginx.conf

@@ -9,14 +9,6 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
-  location = /backend {
-    return 301 /backend/;
-  }
-
-  location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
-  }
-
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
     expires 1y;
     access_log off;

admin/vite.config.ts

@@ -8,9 +8,13 @@ export default defineConfig({
   plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
   server: {
     host: "0.0.0.0",
-    port: 8003,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["admin.insta.the1s.de"],
+    port: 8103,
+    watch: { usePolling: true },
+    hmr: {
+      host: "admin.insta.the1s.de",
+      port: 8103,
+      protocol: "wss",
     },
   },
 });

backendV2/info.json

@@ -1,11 +1,11 @@
 {
     "backend-info": {
-        "version": "v2.0.1 (dev)"
+        "version": "v2.0.1"
     },
     "frontend-info": {
-        "version": "v2.0 (dev)"
+        "version": "v2.0"
     },
     "admin-panel-info": {
-        "version": "v1.3 (dev)"
+        "version": "v1.3"
     }
 }

backendV2/server.js

@@ -20,7 +20,7 @@ import apiRouter from "./routes/api/api.route.js";
 
 env.config();
 const app = express();
-const port = 8004;
+const port = 8102;
 
 app.use(cors());
 // Body-Parser VOR den Routen registrieren

docker-compose.yml

@@ -1,21 +1,29 @@
 services:
-  #  usr-frontend_v2:
-  #    container_name: borrow_system-usr-frontend
-  #    build: ./FrontendV2
-  #    ports:
-  #      - "8001:80"
-  #    restart: unless-stopped
+  usr-frontend_v2:
+    container_name: borrow_system-usr-frontend
+    networks:
+      - proxynet
+    build: ./FrontendV2
+    ports:
+      - "8101:80"
+    restart: unless-stopped
 
-  #  admin-frontend:
-  #    container_name: borrow_system-admin-frontend
-  #    build: ./admin
-  #    ports:
-  #      - "8003:80"
-  #    restart: unless-stopped
+  admin-frontend:
+    container_name: borrow_system-admin-frontend
+    networks:
+      - proxynet
+    build: ./admin
+    ports:
+      - "8103:80"
+    restart: unless-stopped
 
   backend_v2:
     container_name: borrow_system-backend_v2
+    networks:
+      - proxynet
     build: ./backendV2
+    ports:
+      - "8102:8102"
     environment:
       NODE_ENV: production
       DB_HOST: mysql_v2
@@ -28,6 +36,8 @@ services:
 
   mysql_v2:
     container_name: borrow_system-mysql-v2
+    networks:
+      - proxynet
     image: mysql:8.0
     restart: unless-stopped
     environment:
@@ -37,9 +47,11 @@ services:
     volumes:
       - mysql-v2-data:/var/lib/mysql
       - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
-    ports:
-      - "3310:3306"
 
 volumes:
   mysql-data:
   mysql-v2-data:
+
+networks:
+  proxynet:
+    external: true