Files
bodyshop/client/src/components/tech-login/tech-login.component.jsx
2024-01-17 17:52:14 -08:00

83 lines
2.2 KiB
JavaScript

import { Button, Form, Input } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { techLoginStart } from "../../redux/tech/tech.actions";
import {
selectLoginError,
selectLoginLoading,
selectTechnician,
} from "../../redux/tech/tech.selectors";
import AlertComponent from "../alert/alert.component";
import "./tech-login.styles.scss";
const mapStateToProps = createStructuredSelector({
technician: selectTechnician,
loginError: selectLoginError,
loginLoading: selectLoginLoading,
});
const mapDispatchToProps = (dispatch) => ({
techLoginStart: (user) => dispatch(techLoginStart(user)),
});
export function TechLogin({
technician,
loginError,
loginLoading,
techLoginStart,
}) {
const { t } = useTranslation();
const handleFinish = (values) => {
techLoginStart(values);
};
useEffect(() => {
document.title = t("titles.techconsole");
}, [t]);
return (
<div className="tech-login-container">
{technician ? <Redirect to={`/tech/joblookup`} /> : null}
<Form
layout="vertical"
onFinish={handleFinish}
autoComplete="new-password"
>
<Form.Item
label={t("tech.fields.employeeid")}
name="employeeid"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<Input size="large" autoComplete="new-password" />
</Form.Item>
<Form.Item
label={t("tech.fields.pin")}
name="pin"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<Input.Password size="large" autoComplete="new-password" />
</Form.Item>
<Button htmlType="submit" loading={loginLoading} className="login-btn">
{t("general.actions.login")}
</Button>
</Form>
{loginError ? <AlertComponent type="error" message={loginError} /> : null}
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(TechLogin);