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