Added login functionality for tech BOD-95

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 export default function ShopEmployeesFormComponent({
   form,
   selectedEmployee,
-  handleFinish
+  handleFinish,
 }) {
   const { t } = useTranslation();
   useEffect(() => {
@@ -27,79 +27,82 @@ export default function ShopEmployeesFormComponent({
           : null,
         termination_date: selectedEmployee.termination_date
           ? moment(selectedEmployee.termination_date)
-          : null
-      }}
-    >
-      <Button type="primary" htmlType="submit">
+          : null,
+      }}>
+      <Button type='primary' htmlType='submit'>
         {t("general.actions.save")}
       </Button>
 
       <Form.Item
-        name="first_name"
+        name='first_name'
         label={t("employees.fields.first_name")}
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.last_name")}
-        name="last_name"
+        name='last_name'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
-        name="employee_number"
+        name='employee_number'
         label={t("employees.fields.employee_number")}
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("employees.fields.pin")}
+        name='pin'
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.active")}
-        valuePropName="checked"
-        name="active"
-      >
+        valuePropName='checked'
+        name='active'>
         <Switch />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.flat_rate")}
-        name="flat_rate"
-        valuePropName="checked"
-      >
+        name='flat_rate'
+        valuePropName='checked'>
         <Switch />
       </Form.Item>
       <Form.Item
-        name="hire_date"
+        name='hire_date'
         label={t("employees.fields.hire_date")}
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.termination_date")}
-        name="termination_date"
-      >
+        name='termination_date'>
         <DatePicker />
       </Form.Item>
       {
@@ -107,26 +110,24 @@ export default function ShopEmployeesFormComponent({
       }
       <Form.Item
         label={t("employees.fields.cost_center")}
-        name="cost_center"
+        name='cost_center'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.base_rate")}
-        name="base_rate"
+        name='base_rate'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <InputNumber />
       </Form.Item>
     </Form>

client/src/components/tech-header/tech-header.component.jsx

@@ -19,7 +19,9 @@ export function TechHeader({ technician }) {
     <Header style={{ textAlign: "center" }}>
       <Typography.Title style={{ color: "#fff" }}>
         {!!technician
-          ? t("tech.labels.loggedin", { name: technician.name })
+          ? t("tech.labels.loggedin", {
+              name: `${technician.first_name} ${technician.last_name}`,
+            })
           : t("tech.labels.notloggedin")}
       </Typography.Title>
     </Header>

client/src/components/tech-login/tech-login.component.jsx

@@ -3,56 +3,72 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { loginStart } from "../../redux/tech/tech.actions";
+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";
+import { Redirect } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician,
   loginError: selectLoginError,
+  loginLoading: selectLoginLoading,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  loginStart: (user) => dispatch(loginStart(user)),
+  techLoginStart: (user) => dispatch(techLoginStart(user)),
 });
 
-export function TechLogin({ technician, loginError, loginStart }) {
+export function TechLogin({
+  technician,
+  loginError,
+  loginLoading,
+  techLoginStart,
+}) {
   const { t } = useTranslation();
+
   const handleFinish = (values) => {
-    loginStart(values);
+    techLoginStart(values);
   };
+
   return (
     <div className='tech-login-container'>
-      <Form onFinish={handleFinish}>
+      {technician ? <Redirect to={`/tech/joblookup`} /> : null}
+      <Form
+        layout='vertical'
+        onFinish={handleFinish}
+        autoComplete='new-password'>
         <Form.Item
-          label={t("tech.fields.username")}
-          name='date'
+          label={t("tech.fields.employeeid")}
+          name='employeeid'
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
           ]}>
-          <Input size='large' />
+          <Input size='large' autoComplete='off' />
         </Form.Item>
         <Form.Item
-          label={t("tech.fields.password")}
-          name='date'
+          label={t("tech.fields.pin")}
+          name='pin'
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
           ]}>
-          <Input.Password size='large' />
-          <Button htmlType='submit' className='login-btn'>
-            {t("general.actions.login")}
-          </Button>
+          <Input.Password size='large' autoComplete='off' />
         </Form.Item>
+        <Button htmlType='submit' loading={loginLoading} className='login-btn'>
+          {t("general.actions.login")}
+        </Button>
       </Form>
+      {loginError ? <AlertComponent type='error' message={loginError} /> : null}
     </div>
   );
 }

client/src/components/tech-sider/tech-sider.component.jsx

@@ -8,16 +8,17 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { techLogout } from "../../redux/tech/tech.actions";
 const { Sider } = Layout;
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  techLogout: () => dispatch(techLogout()),
 });
 
-export function TechSider({ technician }) {
+export function TechSider({ technician, techLogout }) {
   const [collapsed, setCollapsed] = useState(true);
   const { t } = useTranslation();
   const onCollapse = (collapsed) => {
@@ -57,8 +58,9 @@ export function TechSider({ technician }) {
         <Menu.Item
           key='7'
           disabled={!!!technician}
+          onClick={() => techLogout()}
           icon={<Icon component={FiLogOut} />}>
-          <Link to={`/tech/logout`}>{t("menus.tech.logout")}</Link>
+          {t("menus.tech.logout")}
         </Menu.Item>
       </Menu>
     </Sider>