authForm component Login+Register

src/components/App/App.jsx

@@ -1,4 +1,4 @@
-import ContactForm from '../ContactForm/ContactForm';
+import ContactForm from '../Form/ContactForm/ContactForm';
 import ContactList from '../ContactList/ContactList';
 import Filter from '../Filter/Filter';
 

src/components/ContactForm/ContactForm.jsx → src/components/Form/ContactForm/ContactForm.jsx

@@ -1,10 +1,10 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { addContact } from '../../redux/operations';
-import * as selectors from '../../redux/selectors';
+import { addContact } from '../../../redux/operations';
+import * as selectors from '../../../redux/selectors';
 import { nanoid } from '@reduxjs/toolkit';
 
 import Notiflix from 'notiflix';
-import { Loader } from '../Loader/Loader';
+import { Loader } from '../../Loader/Loader';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser, faPhone, faCheck } from '@fortawesome/free-solid-svg-icons';

src/components/Form/authForms/LoginForm.jsx

@@ -0,0 +1,36 @@
+import { useDispatch, useSelector } from 'react-redux';
+
+export const LoginForm = () => {
+  const dispatch = useDispatch();
+  const errorLogin = useSelector(state => state.error); // Dont FORGET !!! import selector
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const form = e.currentTarget;
+
+    dispatch(
+      logIn({
+        email: form.elements.email.value,
+        password: form.elements.password.value,
+      })
+    );
+    form.reset();
+  };
+
+  return (
+    <>
+      {errorLogin && <div>Error login</div>}
+      <form autoComplete="off" onSubmit={handleSubmit}>
+        <label>
+          Email
+          <input type="email" name="email" required />
+        </label>
+        <label>
+          Password
+          <input type="password" name="password" required />
+        </label>
+        <button type="submit">Log In</button>
+      </form>
+    </>
+  );
+};

src/components/Form/authForms/RegisterForm.jsx

@@ -0,0 +1,54 @@
+import { useDispatch } from 'react-redux';
+
+export const RegisterForm = () => {
+  const dispatch = useDispatch();
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const form = e.currentTarget;
+
+    dispatch(
+      register({
+        name: form.elements.name.value,
+        email: form.elements.email.value,
+        password: form.elements.password.value,
+      })
+    );
+    form.reset();
+    };
+
+      return (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <label>
+            Username
+            <input
+              type="text"
+              name="name"
+              required
+              placeholder="Nick Name"
+              minLength={3}
+            />
+          </label>
+          <label>
+            Email
+            <input
+              type="email"
+              name="email"
+              required
+              placeholder="your-mail@gmail.com"
+            />
+          </label>
+          <label>
+            Password
+            <input
+              type="password"
+              name="password"
+              minLength={7}
+              required
+              placeholder="*******"
+            />
+          </label>
+          <button type="submit">Register</button>
+        </form>
+      );
+};

src/pages/Login.jsx

@@ -1,4 +1,5 @@
 import { NavLink } from 'react-router-dom';
+import { LoginForm } from '../components/Form/authForms/LoginForm'
 
 const Login = () => {
   return (

src/pages/Register.jsx

@@ -1,4 +1,5 @@
 import { NavLink } from 'react-router-dom';
+import { RegisterForm } from '../components/Form/authForms/RegisterForm';
 
 const Register = () => {
   return (