85 lines
2.4 KiB
TypeScript
Executable File
85 lines
2.4 KiB
TypeScript
Executable File
import React, { useEffect } from "react";
|
|
import { Formik, Form, Field } from "formik";
|
|
import Translate from "../../Components/Utils/Translate";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { AppKeyEnum } from "../../enums/AppKey";
|
|
import { CiMail } from "react-icons/ci";
|
|
import { FaKey } from "react-icons/fa";
|
|
import { Input, Spin } from "antd";
|
|
import { Button } from "react-bootstrap";
|
|
import { useLogin } from "../../api/auth";
|
|
import { toast } from "react-toastify";
|
|
import useAuthState from "../../state/AuthState";
|
|
import { FCM_TOKEN_KEY } from "../../utils/firebase/firebase";
|
|
|
|
const LoginForm = ({ setOpen }: any) => {
|
|
const [t] = useTranslation();
|
|
const { mutate, isLoading, isSuccess, data } = useLogin();
|
|
const { login } = useAuthState();
|
|
const FCM = localStorage.getItem(FCM_TOKEN_KEY)
|
|
|
|
const handelSubmit = (values: any) => {
|
|
if (!values.email || !values.password) {
|
|
toast.error(t("pleas_fill_all_label"));
|
|
|
|
return;
|
|
}
|
|
mutate({ ...values, fcm_token: FCM });
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
login(data?.data as any);
|
|
toast.success("login successfully");
|
|
setOpen(false);
|
|
}
|
|
}, [isSuccess]);
|
|
return (
|
|
<div className="LoginForm">
|
|
<h5> {t("Log in to DM")} </h5>
|
|
<Formik
|
|
initialValues={{ email: null, password: null }}
|
|
onSubmit={handelSubmit}
|
|
>
|
|
<Form className="login_form_container">
|
|
<div className=" form-outline mb-4">
|
|
<Field
|
|
placeholder={t("E-mail")}
|
|
as={Input}
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
prefix={<CiMail />}
|
|
className="form-control form-control-lg login_input"
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-outline mb-4">
|
|
<Field
|
|
placeholder={t("Password")}
|
|
as={Input}
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
prefix={<FaKey />}
|
|
className="form-control form-control-lg login_input"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
disabled={isLoading}
|
|
className="w-100 login_button"
|
|
type="submit"
|
|
>
|
|
{t("Login")}
|
|
{isLoading && <Spin />}
|
|
</Button>
|
|
</Form>
|
|
</Formik>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginForm;
|