Added login functionality for tech BOD-95

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>
   );
 }