diff --git a/FrontendV2/src/components/Header.tsx b/FrontendV2/src/components/Header.tsx
index 2ba22cb..a01199e 100644
--- a/FrontendV2/src/components/Header.tsx
+++ b/FrontendV2/src/components/Header.tsx
@@ -4,25 +4,18 @@ 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,
@@ -33,69 +26,19 @@ import {
} from "lucide-react";
import { useUserContext } from "@/states/Context";
import { useState } from "react";
-import MyAlert from "./myChakra/MyAlert";
import { useTranslation } from "react-i18next";
-import { API_BASE } from "@/config/api.config";
+import { UserDialogue } from "./UserDialogue";
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 = [
@@ -375,146 +318,7 @@ export const Header = () => {
{/* User Info Dialoge */}
- {userDialog && (
-
-
-
-
-
-
-
-
-
-
- {t("user-info-desc")}
-
-
-
-
-
-
- {t("first-name")}:
-
- {userData.first_name}
-
-
- {t("last-name")}:
-
- {userData.last_name}
-
-
- {t("username")}:
-
- {userData.username}
-
-
- {t("role")}:
-
- {userData.role}
-
-
- {t("admin-status")}:
-
-
- {userData.is_admin ? t("yes") : t("no")}
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- {/* Passwort-Dialog (kontrolliert) */}
- setPwOpen(e.open)}>
-
-
-
-
-
- {t("change-password")}
-
-
-
-
-
-
-
-
-
+ {userDialog && }
);
};
diff --git a/FrontendV2/src/components/UserDialogue.tsx b/FrontendV2/src/components/UserDialogue.tsx
new file mode 100644
index 0000000..d4e88b6
--- /dev/null
+++ b/FrontendV2/src/components/UserDialogue.tsx
@@ -0,0 +1,220 @@
+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 (
+
+
+
+
+
+
+
+
+
+
+ {t("user-info-desc")}
+
+
+
+
+
+
+ {t("first-name")}:
+
+ {userData.first_name}
+
+
+ {t("last-name")}:
+
+ {userData.last_name}
+
+
+ {t("username")}:
+
+ {userData.username}
+
+
+ {t("role")}:
+
+ {userData.role}
+
+
+ {t("admin-status")}:
+
+ {userData.is_admin ? t("yes") : t("no")}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Passwort-Dialog (kontrolliert) */}
+ setPwOpen(e.open)}>
+
+
+
+
+
+ {t("change-password")}
+
+
+
+
+
+
+
+
+
+
+ );
+};