Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added translations to Account

Browse Source
This commit is contained in:
slsa275
2025-06-16 15:40:53 +02:00
parent 55d3221e6f
commit 78491e9f3c
3 changed files with 198 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
01-frontend/public/locales/de/translation.json
View File

@@ -119,5 +119,7 @@
"loading": "Lädt…", "loading": "Lädt…",
"register": "Registrieren", "register": "Registrieren",
"backToLogin": "Zurück zum Login", "backToLogin": "Zurück zum Login",
"noAccountRegister": "Noch kein Konto? Registrieren" "noAccountRegister": "Noch kein Konto? Registrieren.",
"delete": "Löschen",
"pleaseEnterPassword": "Bitte Passwort eingeben"
} }

4
01-frontend/public/locales/en/translation.json
View File

@@ -119,5 +119,7 @@
"loading": "Loading…", "loading": "Loading…",
"register": "Register", "register": "Register",
"backToLogin": "Back to login", "backToLogin": "Back to login",
"noAccountRegister": "Don’t have an account? Register" "noAccountRegister": "Don’t have an account? Register.",
"delete": "Delete",
"pleaseEnterPassword": "Please enter password"
} }

385
01-frontend/src/pages/Account.tsx
View File

@@ -1,142 +1,142 @@
import { import {
Box, Box,
Button, Button,
Divider, Divider,
Paper, Paper,
Stack, Stack,
TextField, TextField,
Typography, Typography,
Dialog, Dialog,
DialogTitle, DialogTitle,
DialogContent, DialogContent,
DialogActions, DialogActions,
} from "@mui/material"; } from "@mui/material";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { CustomerType, User } from "../components/Account"; import { CustomerType, User } from "../components/Account";
import { useAccount } from "../helper/AccountProvider"; import { useAccount } from "../helper/AccountProvider";
import { deleteAccount, editAccount, fetchCustomer } from "../helper/query/Queries"; import { deleteAccount, editAccount, fetchCustomer } from "../helper/query/Queries";
import "./pages.css"; import "./pages.css";
export default function Account() { export default function Account() {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const { user: userData, logout } = useAccount(); const { user: userData, logout } = useAccount();
const [user, setUser] = useState<CustomerType>({ const [user, setUser] = useState<CustomerType>({
name: "", name: "",
surname: "", surname: "",
address: "", address: "",
country: "", country: "",
zip: "", zip: "",
id: userData?.customerId || 0, id: userData?.customerId || 0,
}); });
const [userDataState, setUserDataState] = useState<User>(userData || { const [userDataState, setUserDataState] = useState<User>(userData || {
password: "", password: "",
email: "", email: "",
customerId: 0, customerId: 0,
session: "", session: "",
isAdmin: false, isAdmin: false,
}); });
useEffect(() => { useEffect(() => {
if (userData?.customerId) { if (userData?.customerId) {
setUser((prev) => ({ setUser((prev) => ({
...prev, ...prev,
id: userData.customerId, id: userData.customerId,
})); }));
} }
}, [userData]); }, [userData]);
const [edit, setEdit] = useState(false); const [edit, setEdit] = useState(false);
const [form, setForm] = useState(user); const [form, setForm] = useState(user);
// Neu: Passwort-Dialog-Status und Passwort-Input // Neu: Passwort-Dialog-Status und Passwort-Input
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false); const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
const [passwordInput, setPasswordInput] = useState(""); const [passwordInput, setPasswordInput] = useState("");
const { data } = useQuery<CustomerType>({ const { data } = useQuery<CustomerType>({
queryKey: ["fetchCustomer", userData?.customerId], queryKey: ["fetchCustomer", userData?.customerId],
queryFn: () => fetchCustomer(userData?.customerId || 0), queryFn: () => fetchCustomer(userData?.customerId || 0),
retry: 1, retry: 1,
retryDelay: 1000, retryDelay: 1000,
}); });
const { refetch: deleteRefetch } = useQuery({ const { refetch: deleteRefetch } = useQuery({
queryKey: ["deleteAccount", userDataState], queryKey: ["deleteAccount", userDataState],
queryFn: () => deleteAccount(userDataState!), queryFn: () => deleteAccount(userDataState!),
enabled: false, enabled: false,
}); });
const { refetch: editRefetch } = useQuery({ const { refetch: editRefetch } = useQuery({
queryKey: ["editAccount", form], queryKey: ["editAccount", form],
queryFn: () => editAccount(form), queryFn: () => editAccount(form),
enabled: false, enabled: false,
}); });
useEffect(() => { useEffect(() => {
if (data) { if (data) {
setUser(data); setUser(data);
setForm(data); setForm(data);
} }
}, [data]); }, [data]);
const handleEdit = () => setEdit(true); const handleEdit = () => setEdit(true);
const handleCancel = () => { const handleCancel = () => {
setForm(user); setForm(user);
setEdit(false); setEdit(false);
}; };
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setForm({ ...form, [e.target.name]: e.target.value }); setForm({ ...form, [e.target.name]: e.target.value });
}; };
const handleSave = async () => { const handleSave = async () => {
setUser(form); setUser(form);
setEdit(false); setEdit(false);
await editRefetch(); await editRefetch();
}; };
// Neu: Passwort-Dialog öffnen // Neu: Passwort-Dialog öffnen
const handleDeleteClick = () => { const handleDeleteClick = () => {
setPasswordInput(""); setPasswordInput("");
setPasswordDialogOpen(true); setPasswordDialogOpen(true);
}; };
// Neu: Passwort-Dialog schließen // Neu: Passwort-Dialog schließen
const handlePasswordDialogClose = () => { 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); setPasswordDialogOpen(false);
}; }
};
// Neu: Passwort-Eingabe bestätigen
const handlePasswordConfirm = async () => { return (
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 (
<Box <Box
className="page-background page-background-center" className="page-background page-background-center"
sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }} sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}
> >
<Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}> <Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}>
<Typography variant="h4" gutterBottom> <Typography variant="h4" gutterBottom>
@@ -145,86 +145,86 @@ import {
<Divider sx={{ mb: 3 }} /> <Divider sx={{ mb: 3 }} />
<Stack spacing={2}> <Stack spacing={2}>
<TextField <TextField
label={t("name")} label={t("name")}
name="name" name="name"
value={edit ? form.name : user.name} value={edit ? form.name : user.name}
onChange={handleChange} onChange={handleChange}
disabled={!edit} disabled={!edit}
fullWidth fullWidth
/> />
<TextField <TextField
label={t("surname")} label={t("surname")}
name="surname" name="surname"
value={edit ? form.surname : user.surname} value={edit ? form.surname : user.surname}
onChange={handleChange} onChange={handleChange}
disabled={!edit} disabled={!edit}
fullWidth fullWidth
/> />
<TextField <TextField
label={t("address")} label={t("address")}
name="address" name="address"
value={edit ? form.address : user.address} value={edit ? form.address : user.address}
onChange={handleChange} onChange={handleChange}
disabled={!edit} disabled={!edit}
fullWidth fullWidth
/> />
<TextField <TextField
label={t("country")} label={t("country")}
name="country" name="country"
value={edit ? form.country : user.country} value={edit ? form.country : user.country}
onChange={handleChange} onChange={handleChange}
disabled={!edit} disabled={!edit}
fullWidth fullWidth
/> />
<TextField <TextField
label={t("zip")} label={t("zip")}
name="zip" name="zip"
value={edit ? form.zip : user.zip} value={edit ? form.zip : user.zip}
onChange={handleChange} onChange={handleChange}
disabled={!edit} disabled={!edit}
fullWidth fullWidth
/> />
</Stack> </Stack>
<Box sx={{ display: "flex", gap: 2, mt: 4 }}> <Box sx={{ display: "flex", gap: 2, mt: 4 }}>
{edit ? ( {edit ? (
<> <>
<Button variant="contained" color="primary" onClick={handleSave}> <Button variant="contained" color="primary" onClick={handleSave}>
{t("save")} {t("save")}
</Button> </Button>
<Button variant="outlined" color="secondary" onClick={handleCancel}> <Button variant="outlined" color="secondary" onClick={handleCancel}>
{t("cancel")} {t("cancel")}
</Button> </Button>
</> </>
) : ( ) : (
<Button variant="contained" color="primary" onClick={handleEdit}> <Button variant="contained" color="primary" onClick={handleEdit}>
{t("edit")} {t("edit")}
</Button> </Button>
)} )}
<Button <Button
variant="outlined" variant="outlined"
color="error" color="error"
onClick={handleDeleteClick} // Neu: Passwort-Dialog öffnen onClick={handleDeleteClick} // Neu: Passwort-Dialog öffnen
sx={{ marginLeft: "auto" }} sx={{ marginLeft: "auto" }}
> >
{t("deleteAccount")} {t("deleteAccount")}
</Button> </Button>
</Box> </Box>
</Paper> </Paper>
{/* Passwort-Dialog */} {/* Passwort-Dialog */}
<Dialog open={passwordDialogOpen} onClose={handlePasswordDialogClose}> <Dialog open={passwordDialogOpen} onClose={handlePasswordDialogClose}>
<DialogTitle>{t("confirmDeleteAccount")}</DialogTitle> <DialogTitle>{t("confirmDeleteAccount")}</DialogTitle>
<DialogContent> <DialogContent>
<Typography>{t("enterPasswordToConfirmDeletion")}</Typography> <Typography>{t("enterPasswordToConfirmDeletion")}</Typography>
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
label={t("password")} label={t("password")}
type="password" type="password"
fullWidth fullWidth
variant="standard" variant="standard"
value={passwordInput} value={passwordInput}
onChange={(e) => setPasswordInput(e.target.value)} onChange={(e) => setPasswordInput(e.target.value)}
/> />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@@ -235,6 +235,5 @@ import {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Box> </Box>
); );
} }