109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { Box, Typography, Button, TextField, Paper, Divider, Stack } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
import "./pages.css";
|
|
import { useState } from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
|
|
export default function Account() {
|
|
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
// Beispielhafte Userdaten (könnten aus Context/Backend kommen)
|
|
const [user, setUser] = useState({
|
|
name: "Max Mustermann",
|
|
email: "max.mustermann@email.de",
|
|
phone: "+49 123 456789",
|
|
address: "Musterstraße 1, 12345 Musterstadt"
|
|
});
|
|
|
|
const [edit, setEdit] = useState(false);
|
|
const [form, setForm] = useState(user);
|
|
|
|
const handleEdit = () => setEdit(true);
|
|
const handleCancel = () => {
|
|
setForm(user);
|
|
setEdit(false);
|
|
};
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setForm({ ...form, [e.target.name]: e.target.value });
|
|
};
|
|
const handleSave = () => {
|
|
setUser(form);
|
|
setEdit(false);
|
|
};
|
|
const handleDelete = () => {
|
|
// Hier ggf. Dialog oder API-Call zum Löschen
|
|
alert(t('accountDeleted'));
|
|
navigate("/");
|
|
};
|
|
|
|
return (
|
|
<Box className="page-background" sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}>
|
|
<Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
{t('myAccount')}
|
|
</Typography>
|
|
<Divider sx={{ mb: 3 }} />
|
|
<Stack spacing={2}>
|
|
<TextField
|
|
label={t('name')}
|
|
name="name"
|
|
value={edit ? form.name : user.name}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('email')}
|
|
name="email"
|
|
value={edit ? form.email : user.email}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('phone')}
|
|
name="phone"
|
|
value={edit ? form.phone : user.phone}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('address')}
|
|
name="address"
|
|
value={edit ? form.address : user.address}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
</Stack>
|
|
<Box sx={{ display: "flex", gap: 2, mt: 4 }}>
|
|
{edit ? (
|
|
<>
|
|
<Button variant="contained" color="primary" onClick={handleSave}>
|
|
{t('save')}
|
|
</Button>
|
|
<Button variant="outlined" color="secondary" onClick={handleCancel}>
|
|
{t('cancel')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button variant="contained" color="primary" onClick={handleEdit}>
|
|
{t('edit')}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
onClick={handleDelete}
|
|
sx={{ marginLeft: "auto" }}
|
|
>
|
|
{t('deleteAccount')}
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
} |