From bccc43dfe0e8ec1cc772203e1ad1e877c2eab366 Mon Sep 17 00:00:00 2001
From: Ivan Grivtsov <ivangrivtsov0@gmail.com>
Date: Wed, 12 Jun 2024 20:27:37 +0300
Subject: [PATCH] Update LoginForm.jsx

---
 src/components/LoginForm/LoginForm.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
index edff9e5..638d8be 100644
--- a/src/components/LoginForm/LoginForm.jsx
+++ b/src/components/LoginForm/LoginForm.jsx
@@ -1,10 +1,20 @@
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, ErrorMessage } from "formik";
 import { logIn } from "../../redux/auth/operations";
 import { useDispatch, useSelector } from "react-redux";
 import css from "./LoginForm.module.css";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { selectError } from "../../redux/auth/selectror";
+import * as Yup from "yup";
+
+
+const ValidationSchema = Yup.object().shape({
+  email: Yup.string().email("Must be a valid email!").required("Required"),
+  password: Yup.string()
+    .min(8, "Too short")
+    .max(64, "Too long")
+    .required("Required"),
+});
 
 export default function LoginForm() {
   const dispatch = useDispatch();
@@ -45,6 +55,7 @@ export default function LoginForm() {
           password: "",
         }}
         onSubmit={handleSubmit}
+        validationSchema={ValidationSchema}
       >
         <Form className={css.form}>
           <label htmlFor="email"/>
@@ -55,6 +66,7 @@ export default function LoginForm() {
             className={css.input}
             required
           />
+          <ErrorMessage name="email" component="span" className={css.error} />
           <label htmlFor="password"/>
           <div>
             <Field
@@ -64,6 +76,7 @@ export default function LoginForm() {
               placeholder="Enter your password"
               required
             />
+            <ErrorMessage name="password" component="span" className={css.error} />
             <button
               type="button"
               className={css.eye}