diff --git a/01-frontend/public/locales/de/translation.json b/01-frontend/public/locales/de/translation.json index 1e0d107..4f29299 100644 --- a/01-frontend/public/locales/de/translation.json +++ b/01-frontend/public/locales/de/translation.json @@ -119,5 +119,7 @@ "loading": "Lädt…", "register": "Registrieren", "backToLogin": "Zurück zum Login", - "noAccountRegister": "Noch kein Konto? Registrieren" + "noAccountRegister": "Noch kein Konto? Registrieren.", + "delete": "Löschen", + "pleaseEnterPassword": "Bitte Passwort eingeben" } diff --git a/01-frontend/public/locales/en/translation.json b/01-frontend/public/locales/en/translation.json index c1a821e..e148cec 100644 --- a/01-frontend/public/locales/en/translation.json +++ b/01-frontend/public/locales/en/translation.json @@ -119,5 +119,7 @@ "loading": "Loading…", "register": "Register", "backToLogin": "Back to login", - "noAccountRegister": "Don’t have an account? Register" + "noAccountRegister": "Don’t have an account? Register.", + "delete": "Delete", + "pleaseEnterPassword": "Please enter password" } \ No newline at end of file diff --git a/01-frontend/src/pages/Account.tsx b/01-frontend/src/pages/Account.tsx index b652fea..999a765 100644 --- a/01-frontend/src/pages/Account.tsx +++ b/01-frontend/src/pages/Account.tsx @@ -1,142 +1,142 @@ import { - Box, - Button, - Divider, - Paper, - Stack, - TextField, - Typography, - Dialog, - DialogTitle, - DialogContent, - DialogActions, - } from "@mui/material"; - import { useQuery } from "@tanstack/react-query"; - import { useEffect, useState } from "react"; - import { useTranslation } from "react-i18next"; - import { useNavigate } from "react-router-dom"; - import { CustomerType, User } from "../components/Account"; - import { useAccount } from "../helper/AccountProvider"; - import { deleteAccount, editAccount, fetchCustomer } from "../helper/query/Queries"; - import "./pages.css"; - - export default function Account() { - const { t } = useTranslation(); - const navigate = useNavigate(); - const { user: userData, logout } = useAccount(); - - const [user, setUser] = useState({ - name: "", - surname: "", - address: "", - country: "", - zip: "", - id: userData?.customerId || 0, - }); - - const [userDataState, setUserDataState] = useState(userData || { - password: "", - email: "", - customerId: 0, - session: "", - isAdmin: false, - }); - - useEffect(() => { - if (userData?.customerId) { - setUser((prev) => ({ - ...prev, - id: userData.customerId, - })); - } - }, [userData]); - - const [edit, setEdit] = useState(false); - const [form, setForm] = useState(user); - - // Neu: Passwort-Dialog-Status und Passwort-Input - const [passwordDialogOpen, setPasswordDialogOpen] = useState(false); - const [passwordInput, setPasswordInput] = useState(""); - - const { data } = useQuery({ - queryKey: ["fetchCustomer", userData?.customerId], - queryFn: () => fetchCustomer(userData?.customerId || 0), - retry: 1, - retryDelay: 1000, - }); - - const { refetch: deleteRefetch } = useQuery({ - queryKey: ["deleteAccount", userDataState], - queryFn: () => deleteAccount(userDataState!), - enabled: false, - }); - - const { refetch: editRefetch } = useQuery({ - queryKey: ["editAccount", form], - queryFn: () => editAccount(form), - enabled: false, - }); - - useEffect(() => { - if (data) { - setUser(data); - setForm(data); - } - }, [data]); - - const handleEdit = () => setEdit(true); - const handleCancel = () => { - setForm(user); - setEdit(false); - }; - const handleChange = (e: React.ChangeEvent) => { - setForm({ ...form, [e.target.name]: e.target.value }); - }; - const handleSave = async () => { - setUser(form); - setEdit(false); - await editRefetch(); - }; - - // Neu: Passwort-Dialog öffnen - const handleDeleteClick = () => { - setPasswordInput(""); - setPasswordDialogOpen(true); - }; - - // Neu: Passwort-Dialog schließen - const handlePasswordDialogClose = () => { + Box, + Button, + Divider, + Paper, + Stack, + TextField, + Typography, + Dialog, + DialogTitle, + DialogContent, + DialogActions, +} from "@mui/material"; +import { useQuery } from "@tanstack/react-query"; +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import { CustomerType, User } from "../components/Account"; +import { useAccount } from "../helper/AccountProvider"; +import { deleteAccount, editAccount, fetchCustomer } from "../helper/query/Queries"; +import "./pages.css"; + +export default function Account() { + const { t } = useTranslation(); + const navigate = useNavigate(); + const { user: userData, logout } = useAccount(); + + const [user, setUser] = useState({ + name: "", + surname: "", + address: "", + country: "", + zip: "", + id: userData?.customerId || 0, + }); + + const [userDataState, setUserDataState] = useState(userData || { + password: "", + email: "", + customerId: 0, + session: "", + isAdmin: false, + }); + + useEffect(() => { + if (userData?.customerId) { + setUser((prev) => ({ + ...prev, + id: userData.customerId, + })); + } + }, [userData]); + + const [edit, setEdit] = useState(false); + const [form, setForm] = useState(user); + + // Neu: Passwort-Dialog-Status und Passwort-Input + const [passwordDialogOpen, setPasswordDialogOpen] = useState(false); + const [passwordInput, setPasswordInput] = useState(""); + + const { data } = useQuery({ + queryKey: ["fetchCustomer", userData?.customerId], + queryFn: () => fetchCustomer(userData?.customerId || 0), + retry: 1, + retryDelay: 1000, + }); + + const { refetch: deleteRefetch } = useQuery({ + queryKey: ["deleteAccount", userDataState], + queryFn: () => deleteAccount(userDataState!), + enabled: false, + }); + + const { refetch: editRefetch } = useQuery({ + queryKey: ["editAccount", form], + queryFn: () => editAccount(form), + enabled: false, + }); + + useEffect(() => { + if (data) { + setUser(data); + setForm(data); + } + }, [data]); + + const handleEdit = () => setEdit(true); + const handleCancel = () => { + setForm(user); + setEdit(false); + }; + const handleChange = (e: React.ChangeEvent) => { + setForm({ ...form, [e.target.name]: e.target.value }); + }; + const handleSave = async () => { + setUser(form); + setEdit(false); + await editRefetch(); + }; + + // Neu: Passwort-Dialog öffnen + const handleDeleteClick = () => { + setPasswordInput(""); + setPasswordDialogOpen(true); + }; + + // Neu: Passwort-Dialog schließen + const handlePasswordDialogClose = () => { + setPasswordDialogOpen(false); + }; + + // Neu: Passwort-Eingabe bestätigen + const handlePasswordConfirm = async () => { + if (!passwordInput) { + alert(t("pleaseEnterPassword")); + return; + } + // Passwort in Form aktualisieren (hier z.B. als field "password", anpassen falls anders) + setUserDataState({ ...userDataState, password: passwordInput }); + + // Erst User-Daten mit Passwort aktualisieren + try { + await editRefetch(); // Achtung: editRefetch verwendet immer noch alten form, daher call direkt mit updatedForm: + // Danach Account löschen + await deleteRefetch(); + logout(); + navigate("/"); + } catch (error) { + console.error("Fehler beim Löschen des Accounts:", error); + alert(t("deleteAccountFailed")); + } finally { setPasswordDialogOpen(false); - }; - - // Neu: Passwort-Eingabe bestätigen - const handlePasswordConfirm = async () => { - if (!passwordInput) { - alert(t("pleaseEnterPassword")); - return; - } - // Passwort in Form aktualisieren (hier z.B. als field "password", anpassen falls anders) - setUserDataState({ ...userDataState, password: passwordInput }); - - // Erst User-Daten mit Passwort aktualisieren - try { - await editRefetch(); // Achtung: editRefetch verwendet immer noch alten form, daher call direkt mit updatedForm: - // Danach Account löschen - await deleteRefetch(); - logout(); - navigate("/"); - } catch (error) { - console.error("Fehler beim Löschen des Accounts:", error); - alert(t("deleteAccountFailed")); - } finally { - setPasswordDialogOpen(false); - } - }; - - return ( + } + }; + + return ( @@ -145,86 +145,86 @@ import { {edit ? ( - <> - - - + <> + + + ) : ( - + )} - + {/* Passwort-Dialog */} {t("confirmDeleteAccount")} {t("enterPasswordToConfirmDeletion")} setPasswordInput(e.target.value)} + autoFocus + margin="dense" + label={t("password")} + type="password" + fullWidth + variant="standard" + value={passwordInput} + onChange={(e) => setPasswordInput(e.target.value)} /> @@ -235,6 +235,5 @@ import { - ); - } - \ No newline at end of file + ); +}