Add login with enter button

This commit is contained in:
FlorianSpeicher
2025-06-18 14:34:37 +02:00
parent eaee07ebc0
commit fe956513f2
2 changed files with 146 additions and 138 deletions

View File

@@ -100,146 +100,154 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, set
return (
<Dialog open={open} onClose={onClose} disableEnforceFocus>
<DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
<DialogContent>
{showRegister ? (
<>
<TextField
margin="dense"
label={t("email")}
type="email"
fullWidth
value={registerData.email}
onChange={e => setRegisterData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
margin="dense"
label={t("password")}
type="password"
fullWidth
value={registerData.password}
onChange={e => setRegisterData(prev => ({ ...prev, password: e.target.value }))}
/>
<TextField
margin="dense"
label={t("firstName")}
type="text"
fullWidth
value={registerData.customer.name}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, name: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("lastName")}
type="text"
fullWidth
value={registerData.customer.surname}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, surname: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={registerData.customer.address}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, address: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={registerData.customer.country}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, country: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={registerData.customer.zip}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, zip: e.target.value },
}))}
/>
</>
) : (
<>
<TextField
margin="dense"
label={t("email")}
type="email"
fullWidth
value={loginData.email}
onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
margin="dense"
label={t("password")}
type="password"
fullWidth
value={loginData.password}
onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
/>
</>
<form onSubmit={e => {
e.preventDefault();
if (showRegister){
handleLogin();
}else {
handleRegister();
}}} noValidate>
<DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
<DialogContent>
{showRegister ? (
<>
<TextField
margin="dense"
label={t("email")}
type="mail"
fullWidth
value={registerData.email}
onChange={e => setRegisterData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
margin="dense"
label={t("password")}
type="password"
fullWidth
value={registerData.password}
onChange={e => setRegisterData(prev => ({ ...prev, password: e.target.value }))}
/>
<TextField
margin="dense"
label={t("firstName")}
type="text"
fullWidth
value={registerData.customer.name}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, name: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("lastName")}
type="text"
fullWidth
value={registerData.customer.surname}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, surname: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={registerData.customer.address}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, address: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={registerData.customer.country}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, country: e.target.value },
}))}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={registerData.customer.zip}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, zip: e.target.value },
}))}
/>
</>
) : (
<>
<TextField
margin="dense"
label={t("email")}
type="email"
fullWidth
value={loginData.email}
onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
margin="dense"
label={t("password")}
type="password"
fullWidth
value={loginData.password}
onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
/>
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>{t("cancel")}</Button>
{showRegister ? (
<Button onClick={handleRegister} disabled={isLoadingRegister}>
{isLoadingRegister ? t("loading") : t("register")}
</Button>
) : (
<Button onClick={handleLogin} disabled={isLoadingLogin}>
{isLoadingLogin ? t("loading") : t("login")}
</Button>
)}
</DialogActions>
{showErrorLogin && errorLogin && (
<Box color="error.main">{t("loginFailed")}</Box>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>{t("cancel")}</Button>
{showRegister ? (
<Button onClick={handleRegister} disabled={isLoadingRegister}>
{isLoadingRegister ? t("loading") : t("register")}
</Button>
) : (
<Button onClick={handleLogin} disabled={isLoadingLogin}>
{isLoadingLogin ? t("loading") : t("login")}
</Button>
{showErrorRegister && errorRegister !== null && (
<Box color="error.main">{t("registerFailed")}</Box>
)}
</DialogActions>
{showErrorLogin && errorLogin && (
<Box color="error.main">{t("loginFailed")}</Box>
)}
{showErrorRegister && errorRegister !== null && (
<Box color="error.main">{t("registerFailed")}</Box>
)}
{showRegister ? (
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(false)}
color="primary"
underline="hover"
>
{t("backToLogin")}
</Link>
</Box>
) : (
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(true)}
color="primary"
underline="hover"
>
{t("noAccountRegister")}
</Link>
</Box>
)}
{showRegister ? (
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(false)}
color="primary"
underline="hover"
>
{t("backToLogin")}
</Link>
</Box>
) : (
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(true)}
color="primary"
underline="hover"
>
{t("noAccountRegister")}
</Link>
</Box>
)}
</form>
</Dialog>
);
};