fix reg and login

Author: AnWhiteM

src/components/CreateBoardModal/CreateBoardModal.jsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Modal from "react-modal";
 import { Formik, Field, Form, ErrorMessage } from "formik";
 import * as Yup from "yup";
-
+import { useDispatch } from "react-redux";
 import { addBoard } from "../../redux/boards/operations";
 
 import css from "../EditBoardModal/EditBoardModal.module.css";

src/components/LoginForm/LoginForm.jsx

@@ -84,7 +84,7 @@
 //   );
 // }
 
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, validateYupSchema, ErrorMessage } from "formik";
 import { logIn } from "../../redux/auth/operations";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
@@ -93,6 +93,17 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 // import { selectError } from "../../redux/auth/selectror";
 import { unwrapResult } from "@reduxjs/toolkit";
+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();
@@ -129,6 +140,7 @@ export default function LoginForm() {
           password: "",
         }}
         onSubmit={handleSubmit}
+        validationSchema={ValidationSchema}
       >
         <Form className={css.form}>
           <label htmlFor="email" />
@@ -138,6 +150,12 @@ export default function LoginForm() {
             placeholder="Enter your email"
             className={css.input}
           />
+          <ErrorMessage
+            name="email"
+            component="span"
+            className={css.error}       
+          />
+          
           <label htmlFor="password" />
           <div>
             <Field
@@ -146,6 +164,12 @@ export default function LoginForm() {
               className={css.input}
               placeholder="Enter your password"
             />
+              <ErrorMessage
+              name="password"
+              component="span"
+              className={css.error}       
+            />
+            
             <button
               type="button"
               className={css.eye}

src/components/LoginForm/LoginForm.module.css

@@ -48,4 +48,11 @@
     background-color: transparent;
   border: none;
   color: var(--white)
+  }
+
+  .error{
+    height: 0px;
+  color: red;
+  font-size: 12px;
+  text-align: left;
   }

src/components/Logout/Logout.jsx

@@ -13,7 +13,7 @@ export default function Logout() {
     try {
       await dispatch(logOut()).unwrap();
       toast.success("Ти вийшов)");
-      navigate("/auth/login");
+      navigate("/welcome");
     } catch (error) {
       toast.error("Помилка при виході");
     }

src/components/RegistrationForm/RegistrationForm.jsx

@@ -1,10 +1,25 @@
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, ErrorMessage } from "formik";
 import { register } from "../../redux/auth/operations";
 import { useDispatch } from "react-redux";
 import css from "./RegistrationForm.module.css";
 import svg from "../../img/icons.svg";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+
+
+
+const ValidationSchema = Yup.object().shape({
+  name: Yup.string()
+    .min(4, "Too Short!")
+    .max(64, "Too Long!")
+    .required("Required"),
+  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 const RegistrationForm = () => {
   const dispatch = useDispatch();
@@ -33,6 +48,7 @@ export const RegistrationForm = () => {
           password: "",
         }}
         onSubmit={handleSubmit}
+        validationSchema={ValidationSchema}
       >
         <Form className={css.form}>
           <label htmlFor="name" />
@@ -42,13 +58,24 @@ export const RegistrationForm = () => {
             placeholder="Enter your name"
             className={css.input}
           />
+          <ErrorMessage
+            name="name"
+            component="span"
+            className={css.error}       
+          />
+          
           <label htmlFor="email" />
           <Field
             type="email"
             name="email"
             placeholder="Enter your email"
             className={css.input}
           />
+          <ErrorMessage
+            name="email"
+            component="span"
+            className={css.error}       
+          />
           <label htmlFor="password" />
           <div>
             <Field
@@ -57,6 +84,11 @@ export const RegistrationForm = () => {
               className={css.input}
               placeholder="Create a password"
             />
+            <ErrorMessage
+            name="password"
+            component="span"
+            className={css.error}       
+          />
             <button
               type="button "
               className={css.eye}

src/components/RegistrationForm/RegistrationForm.module.css

@@ -48,4 +48,11 @@
     background-color: transparent;
   border: none;
   color: var(--white);
+  }
+
+  .error{
+    height: 0px;
+  color: red;
+  font-size: 12px;
+  text-align: left;
   }