From f7a0bf64f299ea27ba9b940d5d8e2563c170ab3a Mon Sep 17 00:00:00 2001 From: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com> Date: Thu, 20 Jan 2022 10:08:50 +0530 Subject: [PATCH] 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 Jira ticket ref: WMS-27 --- src/pages/authentication/index.js | 94 +++++++--- src/pages/dashboard/index.js | 9 +- src/redux/AuthRedux.js | 5 +- src/sagas/Auth.js | 1 + src/services/ValidationServices.js | 283 ++--------------------------- 5 files changed, 97 insertions(+), 295 deletions(-) diff --git a/src/pages/authentication/index.js b/src/pages/authentication/index.js index 7de3b21..463bb63 100644 --- a/src/pages/authentication/index.js +++ b/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 ( - + - + - + - +   Remember me - - + + {errorMessage ? errorMessage : ''} + + + sign in diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index dcbc3c2..4c0ddbd 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -1,15 +1,20 @@ -import MDBox from 'components/MDBox'; +import { useDispatch } from 'react-redux'; -import DashboardLayout from 'layouts/DashboardLayout'; +import MDBox from 'components/MDBox'; import DashboardNavbar from 'components/DashboardNavbar'; import Footer from 'components/Footer'; +import DashboardLayout from 'layouts/DashboardLayout'; +import AuthActions from 'redux/AuthRedux'; function DashboardScreen() { + const dispatch = useDispatch(); + const handleLogout = () => dispatch(AuthActions.logout()); return (

Hello Dashboard

+