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 (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user