104 lines
3.6 KiB
JavaScript
104 lines
3.6 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 { emailSignInStart, sendPasswordReset } from "../../redux/user/user.actions";
|
|
import { selectCurrentUser, selectLoginLoading, selectSignInError } from "../../redux/user/user.selectors";
|
|
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
|
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
|
|
})}
|
|
width={InstanceRenderManager({ imex: 200, rome: 200 })}
|
|
alt={InstanceRenderManager({
|
|
imex: t("titles.imexonline"),
|
|
rome: t("titles.romeonline")
|
|
})}
|
|
/>
|
|
<Typography.Title>
|
|
{InstanceRenderManager({
|
|
imex: t("titles.imexonline"),
|
|
rome: t("titles.romeonline")
|
|
})}
|
|
</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);
|