115 lines
4.5 KiB
JavaScript
115 lines
4.5 KiB
JavaScript
import {LockOutlined, UserOutlined} from "@ant-design/icons";
|
|
import {Button, Form, Input, Typography} from "antd";
|
|
import queryString from "query-string";
|
|
import React, {useEffect} from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
import {connect} from "react-redux";
|
|
import {Link, useLocation, useNavigate} from "react-router-dom";
|
|
import {createStructuredSelector} from "reselect";
|
|
import RomeLogo from "../../assets/RomeOnlineBlue.png";
|
|
import ImEXOnlineLogo from "../../assets/logo192.png";
|
|
import ProManagerLogo from '../../assets/promanager/ProManagerLogo.gif';
|
|
import InstanceRenderManager from '../../utils/instanceRenderMgr';
|
|
import {emailSignInStart, sendPasswordReset,} from "../../redux/user/user.actions";
|
|
import {selectCurrentUser, selectLoginLoading, selectSignInError,} from "../../redux/user/user.selectors";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import "./sign-in-form.styles.scss";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
signInError: selectSignInError,
|
|
loginLoading: selectLoginLoading,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
emailSignInStart: (email, password) =>
|
|
dispatch(emailSignInStart({email, password})),
|
|
sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
|
|
});
|
|
|
|
export function SignInComponent({
|
|
emailSignInStart,
|
|
currentUser,
|
|
signInError,
|
|
sendPasswordReset,
|
|
loginLoading,
|
|
}) {
|
|
const {redirect} = queryString.parse(useLocation().search);
|
|
const navigate = useNavigate();
|
|
|
|
const {t} = useTranslation();
|
|
const handleFinish = (values) => {
|
|
const {email, password} = values;
|
|
emailSignInStart(email, password);
|
|
};
|
|
const [form] = Form.useForm();
|
|
|
|
useEffect(() => {
|
|
if (currentUser.authorized === true) {
|
|
navigate(redirect || "/manage/");
|
|
}
|
|
}, [currentUser, redirect, navigate]);
|
|
|
|
|
|
return (
|
|
<div className="login-container">
|
|
<div className="login-logo-container">
|
|
<img src={InstanceRenderManager({imex:ImEXOnlineLogo, rome:RomeLogo, promanager:ProManagerLogo})} width={InstanceRenderManager({imex:200, rome:200,promanager:450})} alt={InstanceRenderManager({imex:t("titles.imexonline"), rome: t("titles.romeonline"), promanager:t("titles.promanager")})}/>
|
|
<Typography.Title>{
|
|
InstanceRenderManager({imex: t("titles.imexonline"), rome: t("titles.romeonline"), promanager:null})
|
|
}</Typography.Title>
|
|
</div>
|
|
<Form onFinish={handleFinish} form={form} size="large">
|
|
<Form.Item
|
|
name="email"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: t("general.validation.required", {label: "Email"}),
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
prefix={<UserOutlined/>}
|
|
placeholder={t("general.labels.username")}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: t("general.validation.required", {label: "Password"}),
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
prefix={<LockOutlined/>}
|
|
type="password"
|
|
placeholder={t("general.labels.password")}
|
|
/>
|
|
</Form.Item>
|
|
{signInError ? (
|
|
<AlertComponent
|
|
type="error"
|
|
message={t(`users.errors.signinerror.${signInError.code}`)}
|
|
/>
|
|
) : null}
|
|
<Button
|
|
className="login-btn"
|
|
type="primary"
|
|
htmlType="submit"
|
|
loading={loginLoading}
|
|
>
|
|
{t("general.actions.login")}
|
|
</Button>
|
|
</Form>
|
|
<Link to={"/resetpassword"}>
|
|
<Button>{t("general.actions.resetpassword")}</Button>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(SignInComponent);
|