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