Merge pull request #8 from 001elijah/auth

fix auth
001elijah · Jun 19, 2023 · c4780c0 · c4780c0
2 parents 3ebe404 + 1bd3f86
commit c4780c0
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 89 deletions.
diff --git a/public/index.html b/public/index.html
@@ -60,6 +60,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -2,12 +2,13 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
+import WelcomePage from 'pages/WelcomePage';
+import AuthPage from '../pages/AuthPage';
 import { HomePage } from 'pages/HomePage';
 import { BoardPage } from 'pages/BoardPage';
-import { WelcomePage } from 'pages/WelcomePage/WelcomePage';
-import AuthPage from '../pages/AuthPage/AuthPage';
 import { SharedLayout } from './SharedLayout/SharedLayout';
 import { PrivateRoute, PublicRoute } from './AuthForm/route';
+
 import { currentUser } from 'redux/Auth/authOperations';
 
 export const App = () => {

diff --git a/src/components/AuthWindows/AuthWindows.jsx b/src/components/AuthWindows/AuthWindows.jsx
@@ -0,0 +1,37 @@
+import { NavLink, useParams } from 'react-router-dom';
+import clsx from 'clsx';
+
+import { Login } from 'components/AuthForm/Login/Login';
+import { Register } from 'components/AuthForm/Register/Register';
+
+import s from './AuthWindows.module.scss';
+
+export const AuthWindows = () => {
+  const { id } = useParams();
+
+  return (
+    <section className={s.wrap}>
+      <ul className={s.list}>
+        <li>
+          <NavLink
+            to="/auth/register"
+            className={({ isActive }) => clsx(s.link, isActive && s.active)}
+          >
+            Registration
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/auth/login"
+            className={({ isActive }) => clsx(s.link, isActive && s.active)}
+          >
+            Log In
+          </NavLink>
+        </li>
+      </ul>
+      <div className={s.wrapForm}>
+        {id === 'login' ? <Login /> : <Register />}
+      </div>
+    </section>
+  );
+};
diff --git a/src/pages/AuthPage/AuthPage.module.scss → ...nents/AuthWindows/AuthWindows.module.scss b/src/pages/AuthPage/AuthPage.module.scss → ...nents/AuthWindows/AuthWindows.module.scss
diff --git a/src/components/BackdropMain/BackdropMain.jsx b/src/components/BackdropMain/BackdropMain.jsx
@@ -0,0 +1,32 @@
+import { useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import s from './BackdropMain.module.scss';
+
+const modalRoot = document.querySelector('#modal-root');
+
+export const BackdropModal = ({ children, closeModal }) => {
+  const handleClose = useCallback(
+    event => {
+      if (event.target === event.currentTarget || event.code === 'Escape') {
+        closeModal();
+      }
+    },
+    [closeModal],
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleClose);
+
+    return () => {
+      window.removeEventListener('keydown', handleClose);
+    };
+  }, [handleClose]);
+
+  return createPortal(
+    <div className={s.backdrop} onClick={handleClose}>
+      {children}
+    </div>,
+    modalRoot,
+  );
+};
diff --git a/src/components/BackdropMain/BackdropMain.module.scss b/src/components/BackdropMain/BackdropMain.module.scss
@@ -0,0 +1,14 @@
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 500;
+}
diff --git a/src/components/WelcomeWindows/WelcomeWindows.jsx b/src/components/WelcomeWindows/WelcomeWindows.jsx
@@ -0,0 +1,29 @@
+import { NavLink } from 'react-router-dom';
+
+import icons from '../../assets/icons/sprite.svg';
+
+import s from './WelcomeWindows.module.scss';
+
+export const WelcomeWindows = () => {
+  return (
+    <section className={s.section}>
+      <div className={s.image}></div>
+      <div className={s.wrap}>
+        <svg className={s.icon}>
+          <use href={`${icons}#icon-welcome`}></use>
+        </svg>
+        <h1 className={s.title}>Task Pro</h1>
+      </div>
+      <p className={s.text}>
+        Supercharge your productivity and take control of your tasks with Task
+        Pro - Don&apos;t wait, start achieving your goals now!
+      </p>
+      <NavLink to="/auth/register" className={s.link}>
+        Registration
+      </NavLink>
+      <NavLink to="/auth/login" className={s.secondLink}>
+        Log In
+      </NavLink>
+    </section>
+  );
+};
diff --git a/...pages/WelcomePage/WelcomePage.module.scss → ...WelcomeWindows/WelcomeWindows.module.scss b/...pages/WelcomePage/WelcomePage.module.scss → ...WelcomeWindows/WelcomeWindows.module.scss
@@ -37,6 +37,7 @@
 .icon {
   width: 40px;
   height: 40px;
+
   @include tablet {
     width: 48px;
     height: 48px;
@@ -65,6 +66,7 @@
   font-size: 14px;
   line-height: 1.29;
   letter-spacing: -0.02em;
+
   @include tablet {
     max-width: 473px;
   }

diff --git a/src/pages/AuthPage.jsx b/src/pages/AuthPage.jsx
@@ -0,0 +1,14 @@
+import { BackdropHome } from 'components/BackdropHome/BackdropHome';
+import { AuthWindows } from 'components/AuthWindows/AuthWindows';
+
+const AuthPage = () => {
+  return (
+    <BackdropHome>
+      <div className="container">
+        <AuthWindows />
+      </div>
+    </BackdropHome>
+  );
+};
+
+export default AuthPage;
diff --git a/src/pages/AuthPage/AuthPage.jsx b/src/pages/AuthPage/AuthPage.jsx
diff --git a/src/pages/WelcomePage.jsx b/src/pages/WelcomePage.jsx
@@ -0,0 +1,12 @@
+import { BackdropHome } from 'components/BackdropHome/BackdropHome';
+import { WelcomeWindows } from 'components/WelcomeWindows/WelcomeWindows';
+
+const WelcomePage = () => {
+  return (
+    <BackdropHome>
+      <WelcomeWindows />
+    </BackdropHome>
+  );
+};
+
+export default WelcomePage;
diff --git a/src/pages/WelcomePage/WelcomePage.jsx b/src/pages/WelcomePage/WelcomePage.jsx
diff --git a/src/redux/Auth/authOperations.js b/src/redux/Auth/authOperations.js
@@ -1,4 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
+import { logOut } from './authSlice';
 
 import {
   registerUserApi,
@@ -40,7 +41,7 @@ export const currentUser = createAsyncThunk(
       return data;
     } catch (error) {
       setTimeout(() => {
-        dispatch(logoutUser(token));
+        dispatch(logOut());
       }, 0);
       return rejectWithValue(error.message);
     }
@@ -65,5 +66,3 @@ export const logoutUser = createAsyncThunk(
     }
   },
 );
-
-
diff --git a/src/redux/Auth/authSlice.js b/src/redux/Auth/authSlice.js
@@ -18,30 +18,38 @@ const authSlice = createSlice({
     isLoading: false,
     error: null,
   },
+  reducers: {
+    logOut() {
+      return {
+        isAuth: false,
+        token: null,
+        userName: null,
+        email: null,
+        theme: null,
+        avatarUrl: null,
+        isLoading: false,
+        error: null,
+      };
+    },
+  },
   extraReducers: builder => {
     builder
       .addCase(registerUser.fulfilled, (state, { payload }) => {
         return {
           ...state,
-          isLoading: false,
           ...payload,
-          isAuth: true,
         };
       })
       .addCase(loginUser.fulfilled, (state, { payload }) => {
         return {
           ...state,
-          isLoading: false,
           ...payload,
-          isAuth: true,
         };
       })
       .addCase(currentUser.fulfilled, (state, { payload }) => {
         return {
           ...state,
-          isLoading: false,
           ...payload,
-          isAuth: true,
         };
       })
       .addCase(logoutUser.fulfilled, () => {
@@ -56,6 +64,15 @@ const authSlice = createSlice({
           error: null,
         };
       })
+      .addMatcher(
+        action =>
+          action.type.startsWith('auth') && action.type.endsWith('/fulfilled'),
+        state => {
+          state.isAuth = true;
+          state.isLoading = false;
+          state.error = null;
+        },
+      )
       .addMatcher(
         action =>
           action.type.startsWith('auth') && action.type.endsWith('/pending'),
@@ -75,4 +92,5 @@ const authSlice = createSlice({
   },
 });
 
+export const { logOut } = authSlice.actions;
 export default authSlice.reducer;
diff --git a/src/services/backendAPI.js b/src/services/backendAPI.js
@@ -12,8 +12,10 @@ const token = {
 };
 
 export const registerUserApi = async userData => {
-  const { data } = await axios.post('/register', userData);
-  return { ...data.user, token: data.token };
+  await axios.post('/register', userData);
+  const { email, password } = userData;
+  const login = await loginUserApi({ email, password });
+  return { ...login };
 };
 
 export const loginUserApi = async userData => {
@@ -32,5 +34,5 @@ export const currentUserApi = async userToken => {
 export const logoutUserApi = async token => {
   const { data } = await axios.post('/logout', token);
   console.log(data);
-  return data;
+  return null;
 };