98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
import { LockOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { Button, Form, Input, Typography } from "antd";
|
|
import React from "react";
|
|
import { useApolloClient } from "react-apollo";
|
|
import { connect } from "react-redux";
|
|
import { Redirect } from "react-router-dom";
|
|
import { createStructuredSelector } from "reselect";
|
|
import ImEXOnlineLogo from "../../assets/logo240.png";
|
|
import { UPSERT_USER } from "../../graphql/user.queries";
|
|
import { emailSignInStart } from "../../redux/user/user.actions";
|
|
import {
|
|
selectCurrentUser,
|
|
selectSignInError,
|
|
} from "../../redux/user/user.selectors";
|
|
import { useTranslation } from "react-i18next";
|
|
import "./sign-in-form.styles.scss";
|
|
import AlertComponent from "../alert/alert.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
currentUser: selectCurrentUser,
|
|
signInError: selectSignInError,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
emailSignInStart: (email, password) =>
|
|
dispatch(emailSignInStart({ email, password })),
|
|
});
|
|
|
|
export function SignInComponent({
|
|
emailSignInStart,
|
|
currentUser,
|
|
signInError,
|
|
}) {
|
|
const apolloClient = useApolloClient();
|
|
const { t } = useTranslation();
|
|
const handleFinish = (values) => {
|
|
const { email, password } = values;
|
|
emailSignInStart(email, password);
|
|
};
|
|
const [form] = Form.useForm();
|
|
|
|
if (currentUser.authorized === true) {
|
|
apolloClient
|
|
.mutate({
|
|
mutation: UPSERT_USER,
|
|
variables: {
|
|
authEmail: currentUser.email,
|
|
authToken: currentUser.uid,
|
|
},
|
|
})
|
|
.then()
|
|
.catch((error) => {
|
|
console.log("User login upsert error.", error);
|
|
});
|
|
}
|
|
|
|
if (currentUser.authorized === true) return <Redirect to='/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={signInError.message} />
|
|
) : null}
|
|
<Button className='login-btn' type='primary' htmlType='submit'>
|
|
{t("general.actions.login")}
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(SignInComponent);
|