56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
"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;
|