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

added translation to LoginDialog

Browse Source
This commit is contained in:
slsa275
2025-06-16 15:27:41 +02:00
parent d6e7498c1d
commit 96483a8c4d
3 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -112,5 +112,11 @@
"loggedInAs": "Angemeldet als", "loggedInAs": "Angemeldet als",
"confirmDeleteAccount": "Bist du sicher, dass du dein Konto löschen möchtest? Dies kann nicht rückgängig gemacht werden.", "confirmDeleteAccount": "Bist du sicher, dass du dein Konto löschen möchtest? Dies kann nicht rückgängig gemacht werden.",
"enterPasswordToConfirmDeletion": "Bitte gib dein Passwort ein, um die Löschung zu bestätigen.", "enterPasswordToConfirmDeletion": "Bitte gib dein Passwort ein, um die Löschung zu bestätigen.",
"deleteAccountFailed": "Konto konnte nicht gelöscht werden. Bitte versuche es später erneut." "deleteAccountFailed": "Konto konnte nicht gelöscht werden. Bitte versuche es später erneut.",
"loginFailed": "Login fehlgeschlagen",
"registerFailed": "Registrierung fehlgeschlagen",
"loading": "Lädt…",
"register": "Registrieren",
"backToLogin": "Zurück zum Login",
"noAccountRegister": "Noch kein Konto? Registrieren"
} }

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

@@ -112,5 +112,11 @@
"loggedInAs": "Logged in as", "loggedInAs": "Logged in as",
"confirmDeleteAccount": "Are you sure you want to delete your account? This action cannot be undone.", "confirmDeleteAccount": "Are you sure you want to delete your account? This action cannot be undone.",
"enterPasswordToConfirmDeletion": "Please enter your password to confirm the deletion of your account.", "enterPasswordToConfirmDeletion": "Please enter your password to confirm the deletion of your account.",
"deleteAccountFailed": "Failed to delete account. Please try again later." "deleteAccountFailed": "Failed to delete account. Please try again later.",
"loginFailed": "Login failed",
"registerFailed": "Registration failed",
"loading": "Loading…",
"register": "Register",
"backToLogin": "Back to login",
"noAccountRegister": "Don’t have an account? Register"
} }

59
01-frontend/src/helper/navbar/LoginDialog.tsx
View File

@@ -5,6 +5,7 @@ import React, { useEffect, useState } from "react";
import AccountType, { User } from "../../components/Account"; import AccountType, { User } from "../../components/Account";
import { useAccount } from "../AccountProvider"; import { useAccount } from "../AccountProvider";
import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung
import { useTranslation } from "react-i18next";
type LoginDialogProps = { type LoginDialogProps = {
open: boolean; open: boolean;
@@ -15,6 +16,8 @@ type LoginDialogProps = {
}; };
const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, setLoginData, onSubmit }) => { const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, setLoginData, onSubmit }) => {
const { t } = useTranslation();
const { login } = useAccount(); const { login } = useAccount();
const [showRegister, setShowRegister] = useState(false); const [showRegister, setShowRegister] = useState(false);
const [registerData, setRegisterData] = useState<AccountType>({ email: "", password: "", id: 0, customer: { id: 0, name: "", surname: "", address: "", country: "", zip: "" }, langI18n: i18next.language, admin: false }); const [registerData, setRegisterData] = useState<AccountType>({ email: "", password: "", id: 0, customer: { id: 0, name: "", surname: "", address: "", country: "", zip: "" }, langI18n: i18next.language, admin: false });
@@ -23,14 +26,14 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
useEffect(() => { useEffect(() => {
if (open) { if (open) {
const active = document.activeElement as HTMLElement | null; const active = document.activeElement as HTMLElement | null;
if (active && typeof active.blur === "function") { if (active && typeof active.blur === "function") {
active.blur(); active.blur();
} }
} }
}, [open]); }, [open]);
// useQuery für Login // useQuery für Login
const { refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin } = useQuery({ const { refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin } = useQuery({
@@ -64,7 +67,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
const response = await refetchLogin(); // Anfrage auslösen const response = await refetchLogin(); // Anfrage auslösen
if (response.status === "success") { if (response.status === "success") {
const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
const customerData = (await refetchAccount()).data; const customerData = (await refetchAccount()).data;
const user: User = { const user: User = {
email: customerData.email, email: customerData.email,
password: customerData.password, password: customerData.password,
@@ -78,7 +81,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
} else { } else {
setShowErrorLogin(true); // Fehlermeldung anzeigen setShowErrorLogin(true); // Fehlermeldung anzeigen
} }
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) { } catch (error) {
setShowErrorLogin(true); // Fehlermeldung anzeigen setShowErrorLogin(true); // Fehlermeldung anzeigen
} }
@@ -89,7 +92,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
setShowErrorRegister(false); // Fehlermeldung zurücksetzen setShowErrorRegister(false); // Fehlermeldung zurücksetzen
await refetchRegister(); // Beispiel für den Refetch-Aufruf await refetchRegister(); // Beispiel für den Refetch-Aufruf
// Erfolgslogik hier // Erfolgslogik hier
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) { } catch (error) {
setShowErrorRegister(true); // Fehlermeldung anzeigen setShowErrorRegister(true); // Fehlermeldung anzeigen
} }
@@ -97,13 +100,13 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
return ( return (
<Dialog open={open} onClose={onClose} disableEnforceFocus> <Dialog open={open} onClose={onClose} disableEnforceFocus>
<DialogTitle>{showRegister ? "Registrieren" : "Login"}</DialogTitle> <DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
<DialogContent> <DialogContent>
{showRegister ? ( {showRegister ? (
<> <>
<TextField <TextField
margin="dense" margin="dense"
label="E-Mail" label={t("email")}
type="email" type="email"
fullWidth fullWidth
value={registerData.email} value={registerData.email}
@@ -111,7 +114,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="Passwort" label={t("password")}
type="password" type="password"
fullWidth fullWidth
value={registerData.password} value={registerData.password}
@@ -119,7 +122,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="Vorname" label={t("firstName")}
type="text" type="text"
fullWidth fullWidth
value={registerData.customer.name} value={registerData.customer.name}
@@ -130,7 +133,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="Nachname" label={t("lastName")}
type="text" type="text"
fullWidth fullWidth
value={registerData.customer.surname} value={registerData.customer.surname}
@@ -141,7 +144,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="Adresse" label={t("address")}
type="text" type="text"
fullWidth fullWidth
value={registerData.customer.address} value={registerData.customer.address}
@@ -152,7 +155,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="Land" label={t("country")}
type="text" type="text"
fullWidth fullWidth
value={registerData.customer.country} value={registerData.customer.country}
@@ -163,7 +166,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="PLZ" label={t("zip")}
type="text" type="text"
fullWidth fullWidth
value={registerData.customer.zip} value={registerData.customer.zip}
@@ -177,7 +180,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
<> <>
<TextField <TextField
margin="dense" margin="dense"
label="E-Mail" label={t("email")}
type="email" type="email"
fullWidth fullWidth
value={loginData.email} value={loginData.email}
@@ -185,7 +188,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
/> />
<TextField <TextField
margin="dense" margin="dense"
label="Passwort" label={t("password")}
type="password" type="password"
fullWidth fullWidth
value={loginData.password} value={loginData.password}
@@ -195,22 +198,22 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
)} )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={onClose}>Abbrechen</Button> <Button onClick={onClose}>{t("cancel")}</Button>
{showRegister ? ( {showRegister ? (
<Button onClick={handleRegister} disabled={isLoadingRegister}> <Button onClick={handleRegister} disabled={isLoadingRegister}>
{isLoadingRegister ? "Lädt..." : "Registrieren"} {isLoadingRegister ? t("loading") : t("register")}
</Button> </Button>
) : ( ) : (
<Button onClick={handleLogin} disabled={isLoadingLogin}> <Button onClick={handleLogin} disabled={isLoadingLogin}>
{isLoadingLogin ? "Lädt..." : "Login"} {isLoadingLogin ? t("loading") : t("login")}
</Button> </Button>
)} )}
</DialogActions> </DialogActions>
{showErrorLogin && errorLogin && ( {showErrorLogin && errorLogin && (
<Box color="error.main">Login fehlgeschlagen</Box> <Box color="error.main">{t("loginFailed")}</Box>
)} )}
{showErrorRegister && errorRegister !== null && ( {showErrorRegister && errorRegister !== null && (
<Box color="error.main">Registrierung fehlgeschlagen</Box> <Box color="error.main">{t("registerFailed")}</Box>
)} )}
{showRegister ? ( {showRegister ? (
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}> <Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
@@ -221,7 +224,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
color="primary" color="primary"
underline="hover" underline="hover"
> >
Zurück zum Login {t("backToLogin")}
</Link> </Link>
</Box> </Box>
) : ( ) : (
@@ -233,7 +236,7 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
color="primary" color="primary"
underline="hover" underline="hover"
> >
Noch kein Konto? Registrieren {t("noAccountRegister")}
</Link> </Link>
</Box> </Box>
)} )}
@@ -241,4 +244,4 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
); );
}; };
export default LoginDialog; export default LoginDialog;