106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
import { LockOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { Button, Form, Input, Typography } from "antd";
|
|
import queryString from "query-string";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { Link, Redirect, useLocation } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import ImEXOnlineLogo from "../../assets/logo192.png";
|
|
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 { t } = useTranslation();
|
|
const handleFinish = (values) => {
|
|
const { email, password } = values;
|
|
emailSignInStart(email, password);
|
|
};
|
|
const [form] = Form.useForm();
|
|
|
|
if (currentUser.authorized === true)
|
|
return <Redirect to={redirect || "/manage"} />;
|
|
|
|
return (
|
|
<div className="login-container">
|
|
<div className="login-logo-container">
|
|
<img src={ImEXOnlineLogo} height="100" width="100" alt="ImEX Online" />
|
|
<Typography.Title>{t("titles.app")}</Typography.Title>
|
|
</div>
|
|
<Form onFinish={handleFinish} form={form} size="large">
|
|
<Form.Item
|
|
name="email"
|
|
rules={[
|
|
{ required: true, message: t("general.validation.required") },
|
|
]}
|
|
>
|
|
<Input
|
|
prefix={<UserOutlined />}
|
|
placeholder={t("general.labels.username")}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
rules={[
|
|
{ required: true, message: t("general.validation.required") },
|
|
]}
|
|
>
|
|
<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);
|