Merge pull request #18 from MargoMarm/feature/auth-redux

Feature/auth redux

package.json

@@ -24,7 +24,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.4.5",
+    "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
+    "react-toastify": "^9.1.3",
     "redux-persist": "^6.0.0",
     "styled-components": "^6.0.7",
     "yup": "^1.2.0"

src/components/AuthForm/AuthForm.jsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { Formik, ErrorMessage } from 'formik';
-import sprite from '../../assets/sprite.svg';
+import { useState } from 'react';
 
+import sprite from '../../assets/sprite.svg';
 import {
   TextInput,
   FormContainer,
@@ -13,27 +14,31 @@ import {
   Warning,
 } from './AuthForm.styled';
 import AuthButton from '../AuthButton';
-import { useState } from 'react';
 
-const authSchema = Yup.object().shape({
-  name: Yup.string().required('Name is required'),
-  email: Yup.string()
-    .matches(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/, {
-      message: 'Email must be valid',
-    })
-    .email('Invalid email')
-    .required('Email is required'),
-  password: Yup.string()
-    .matches(/^(&=.*[a-zA-Z]{6})(?=.*\d)[a-zA-Z\d]{7}$/, {
-      message: 'password must have ...',
-    })
-    .required('Password is required'),
-});
+const emailLyout = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
+const passwordLayout = /^(?=.*[a-zA-Z]{6,})(?=.*\d)[a-zA-Z\d]{7,}$/;
 
-export default function AuthForm({ nameIsShown, btnTitle }) {
+export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
   const [isPasswordShown, setIsPasswordShown] = useState(false);
   const [typePasswordInput, setTypePasswordInput] = useState('password');
 
+  const validateName = nameIsShown => {
+    return nameIsShown ? Yup.string().required('Name is required') : null;
+  };
+  const authSchema = Yup.object().shape({
+    name: validateName(nameIsShown),
+    email: Yup.string()
+      .matches(emailLyout, { message: 'Email must be valid' })
+      .email('Invalid email')
+      .required('Email is required'),
+    password: Yup.string()
+      .matches(passwordLayout, {
+        message:
+          'Password must contain 6+ letters, 1 number, and 1+ letter or number',
+      })
+      .required('Password is required'),
+  });
+
   const initialValues = nameIsShown
     ? {
         name: '',
@@ -59,9 +64,7 @@ export default function AuthForm({ nameIsShown, btnTitle }) {
   return (
     <Formik
       initialValues={initialValues}
-      onSubmit={values => {
-        console.log(values);
-      }}
+      onSubmit={onSubmit}
       validationSchema={authSchema}
     >
       <FormContainer>
@@ -110,7 +113,7 @@ export default function AuthForm({ nameIsShown, btnTitle }) {
               placeholder="password"
               name="password"
             />
-            <HidePasswordbtn onClick={toglePassword}>
+            <HidePasswordbtn onClick={toglePassword} type="button">
               <svg width="20" height="20">
                 <use
                   href={

src/main.jsx

@@ -3,11 +3,19 @@ import { BrowserRouter } from 'react-router-dom';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
 import './index.css';
+import { PersistGate } from 'redux-persist/integration/react';
+import { Provider } from 'react-redux';
+
+import { persistor, store } from './redux/store.js';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <BrowserRouter basename="/september-project">
-      <App />
-    </BrowserRouter>
+    <PersistGate loading={null} persistor={persistor}>
+      <Provider store={store}>
+        <BrowserRouter basename="/september-project">
+          <App />
+        </BrowserRouter>
+      </Provider>
+    </PersistGate>
   </React.StrictMode>,
 );

src/pages/SignIn/SignIn.jsx

@@ -4,8 +4,17 @@ import Header from '../../components/headersComp/Header/Header';
 import AuthForm from '../../components/AuthForm/AuthForm';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper } from '../Home/Home.styled';
+import { useDispatch } from 'react-redux';
+import { logInUser } from '../../redux/auth/operation';
 
 const SignIn = () => {
+  const dispatch = useDispatch();
+
+  const logIn = (user, { resetForm }) => {
+    dispatch(logInUser(user));
+    resetForm();
+  };
+
   return (
     <Wrapper>
       <Header />
@@ -15,7 +24,7 @@ const SignIn = () => {
           'Welcome! Please enter your credentials to login to the platform:'
         }
       />
-      <AuthForm btnTitle="Sign In" nameIsShown={false} />
+      <AuthForm btnTitle="Sign In" nameIsShown={false} onSubmit={logIn} />
       <BtnSubtitle
         text={'Don’t have an account?'}
         to={'/signup'}

src/pages/SignUp/SignUp.jsx

@@ -2,10 +2,19 @@ import Title from '../../components/Title/Title';
 import SubTitle from '../../components/SubTitle/SubTitle';
 import Header from '../../components/headersComp/Header/Header';
 import AuthForm from '../../components/AuthForm';
+import { useDispatch } from 'react-redux';
+import { authUser } from '../../redux/auth/operation';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper } from '../Home/Home.styled';
 
 const SignUp = () => {
+  const dispatch = useDispatch();
+  const handleSubmit = (user, { resetForm }) => {
+    console.log(user);
+    dispatch(authUser(user));
+    resetForm();
+  };
+
   return (
     <Wrapper>
       <Header />
@@ -15,7 +24,8 @@ const SignUp = () => {
           'Thank you for your interest in our platform. To complete the registration process, please provide us with the following information.'
         }
       />
-      <AuthForm nameIsShown={true} btnTitle="Sign Up" />
+      <AuthForm nameIsShown={true} btnTitle="Sign Up" onSubmit={handleSubmit} />
+
       <BtnSubtitle
         text={'Already have account?'}
         to={'/signin'}