Add login with enter button
This commit is contained in:
Binary file not shown.
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user