77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client";
|
|
import { Box, Typography } from "@mui/material";
|
|
import { useSetAtom } from "jotai";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Button from "@atoms/Button";
|
|
import Input from "@atoms/Input";
|
|
import Label from "@atoms/Label";
|
|
import UserAtom from "@atoms/states/UserAtom";
|
|
import { LoginResponse } from "@interfaces/ResponseInterfaces/Auth/UserResponseInterface";
|
|
import { Login } from "@package/config/api/Admin/auth/Login/page";
|
|
|
|
const LoginForm: React.FC = () => {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
const setUser = useSetAtom(UserAtom); // Hook para actualizar el estado global del usuario
|
|
|
|
const handleLogin = async () => {
|
|
try {
|
|
const response: LoginResponse = await Login(email, password);
|
|
if (response.correct) {
|
|
// Almacenamos los datos del usuario logueado en el átomo global
|
|
setUser(response.object);
|
|
|
|
// Redireccionamos a la página deseada
|
|
router.push("/selfcheckout/precheckout");
|
|
} else {
|
|
setError(response.message || t("msj_Incorrect_credentials_try_again"));
|
|
}
|
|
} catch (err) {
|
|
setError(t("msj_Incorrect_credentials_try_again"));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
component="form"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
handleLogin();
|
|
}}
|
|
sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}
|
|
>
|
|
<Box>
|
|
<Label htmlFor={t("lbl_email")} text={t("lbl_email")} />
|
|
<Input
|
|
type="email"
|
|
placeholder={t("msj_enter_your_email")}
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
autocomplete="email"
|
|
/>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Label htmlFor={t("lbl_password")} text={t("lbl_password")} />
|
|
<Input
|
|
type="password"
|
|
placeholder={t("msj_enter_your_password")}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
autocomplete="current-password"
|
|
/>
|
|
</Box>
|
|
|
|
{error && <Typography color="error">{error}</Typography>}
|
|
|
|
<Button label={t("lbl_login")} onClick={handleLogin} variant="primary" />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LoginForm;
|