Feature - Login integration (#7)

* Added: formik and validation schema

* Added: Validation schema

* Added: logout test integration

* Added: Enter key to submit

* Added: incorrect password error message

* Removed: logger

* Updated: logout initial state

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>
Jira ticket ref: WMS-27

src/pages/authentication/index.js

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 // react-router-dom components
 import { Link } from 'react-router-dom';
 
@@ -21,23 +19,40 @@ import { API } from 'constant';
 
 // Image
 import bgImage from 'assets/images/illustrations/illustration-reset.jpg';
+import { useFormik } from 'formik';
+
+import schema from 'services/ValidationServices';
+import { useState } from 'react';
 
 function LoginScreen() {
-  const [rememberMe, setRememberMe] = useState(false);
-
-  const handleSetRememberMe = () => setRememberMe(!rememberMe);
-
   const dispatch = useDispatch();
-  const onPressLogin = () => {
-    dispatch(
-      AuthActions.loginRequest({
-        loader: 'login-request',
-        slug: API.LOGIN_USER,
-        method: 'post',
-        data: { email: 'satizkris+1@gmail.com', password: 'mypassword' }
-      })
-    );
-  };
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+      rememberMe: true
+    },
+    validationSchema: schema.login,
+    onSubmit: (values, { resetForm, setSubmitting }) => {
+      const onFailedLogin = (errorMessage) => {
+        resetForm();
+        setSubmitting(false);
+        setErrorMessage(errorMessage);
+      };
+      dispatch(
+        AuthActions.loginRequest({
+          loader: 'login-request',
+          slug: API.LOGIN_USER,
+          method: 'post',
+          data: { email: values.email, password: values.password },
+          onFailedLogin
+          // data: { email: 'satizkris+1@gmail.com', password: 'mypassword' }
+        })
+      );
+    }
+  });
 
   return (
     <AuthLayout
@@ -45,27 +60,60 @@ function LoginScreen() {
       description="Enter your email and password to sign in"
       illustration={bgImage}
     >
-      <MDBox component="form" role="form">
+      <MDBox component="form" role="form" onSubmit={formik.handleSubmit}>
         <MDBox mb={2}>
-          <MDInput fullWidth type="email" label="Email" />
+          <MDInput
+            fullWidth
+            name="email"
+            type="email"
+            label="Email"
+            value={formik.values.email}
+            error={formik.touched.email && Boolean(formik.errors.email)}
+            helperText={formik.touched.email && formik.errors.email}
+            onChange={formik.handleChange}
+          />
         </MDBox>
         <MDBox mb={2}>
-          <MDInput fullWidth type="password" label="Password" />
+          <MDInput
+            fullWidth
+            type="password"
+            name="password"
+            label="Password"
+            value={formik.values.password}
+            error={formik.touched.password && Boolean(formik.errors.password)}
+            helperText={formik.touched.password && formik.errors.password}
+            onChange={formik.handleChange}
+          />
         </MDBox>
         <MDBox display="flex" alignItems="center" ml={-1}>
-          <Switch checked={rememberMe} onChange={handleSetRememberMe} />
+          <Switch
+            name="rememberMe"
+            checked={formik.values.rememberMe}
+            onChange={formik.handleChange}
+          />
           <MDTypography
             variant="button"
             fontWeight="regular"
             color="text"
             sx={{ cursor: 'pointer', userSelect: 'none', ml: -1 }}
-            onClick={handleSetRememberMe}
+            onClick={formik.handleChange}
           >
             &nbsp;&nbsp;Remember me
           </MDTypography>
         </MDBox>
-        <MDBox mt={4} mb={1}>
-          <MDButton fullWidth variant="gradient" color="info" size="large" onClick={onPressLogin}>
+        <MDTypography mb={2} fontSize={14} textAlign="center" color="error">
+          {errorMessage ? errorMessage : ''}
+        </MDTypography>
+        <MDBox mt={1} mb={1}>
+          <MDButton
+            fullWidth
+            variant="gradient"
+            color="info"
+            size="large"
+            type="submit"
+            disabled={formik.isSubmitting}
+            onClick={formik.handleSubmit}
+          >
             sign in
           </MDButton>
         </MDBox>