Ref: modification components in selfcheckout

package/components/organisms/Auth/ForgotPasswordForm.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { Box, Typography } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Button from "@atoms/Button";
+import Input from "@atoms/Input";
+import Label from "@atoms/Label";
+import { ResetPassword } from "@package/config/api/Admin/auth/ResetPassword/page";
+
+const ForgotPasswordForm: React.FC = () => {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { t } = useTranslation();
+
+  const handleResetPassword = async () => {
+    try {
+      const response = await ResetPassword({ id: email });
+
+      if (response.correct) {
+        setMessage(t("msj_Password_reset_email_sent"));
+        setError(null);
+      } else {
+        setError(response.message || t("msj_Error_sending_password_reset"));
+        setMessage(null);
+      }
+    } catch (err) {
+      setError(t("msj_Error_sending_password_reset"));
+      setMessage(null);
+    }
+  };
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}>
+      <Typography variant="h6">{t("lbl_reset_password")}</Typography>
+
+      <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>
+
+      {message && <Typography color="primary">{message}</Typography>}
+      {error && <Typography color="error">{error}</Typography>}
+
+      <Button label={t("lbl_reset_password")} onClick={handleResetPassword} variant="primary" />
+    </Box>
+  );
+};
+
+export default ForgotPasswordForm;

package/components/organisms/Auth/LoginForm.tsx

@@ -0,0 +1,77 @@
+"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;