Merge pull request #43 from AnWhiteM/new-auth

commit

src/components/App/App.jsx

@@ -1,24 +1,68 @@
-import { HomePage } from "../HomePage/HomePage";
-import { LoginPage } from "../LoginPage/LoginPage";
-import { Route, Routes } from 'react-router-dom';
-import Login from "../Login/Login";
-import Register from "../Register/Register";
+import { lazy, Suspense, useEffect } from "react";
 
+// import { HomePage } from "../HomePage/HomePage";
+// import { LoginPage } from "../LoginPage/LoginPage";
+// import Login from "../Login/Login";
+// import Register from "../Register/Register";
+
+import { Route, Routes } from "react-router-dom";
+import { Toaster } from "react-hot-toast";
+
+import { useDispatch, useSelector } from "react-redux";
+import { refreshUser } from "../../redux/auth/operations";
+import { selectIsRefreshing } from "../../redux/auth/selectror";
+
+import RestrictedRoute from "../RestrictedRoute/RestrictedRoute";
+import PrivateRoute from "../PrivateRoute/PrivateRoute";
+
+const HomePage = lazy(() => import("../../pages/HomePage/HomePage"));
+const LoginPage = lazy(() => import("../../pages/LoginPage/LoginPage"));
+const Login = lazy(() => import("../../pages/Login/Login"));
+const Register = lazy(() => import("../../pages/Register/Register"));
+const NotFoundPage = lazy(() => import("../../pages/NotFoundPage"));
 
 export const App = () => {
-
-  return (
-  <>
-  <Routes>
-        <Route index element={<LoginPage />} />
-        <Route path="/welcome" element={<LoginPage />} />
-        <Route path="/auth/register" element={<Register />} />
-        <Route path="/auth/login" element={<Login />} />
-        <Route path="/home" element={<HomePage />} />
-    </Routes>
-
-  </>
-  )
-
+  const isRefreshing = useSelector(selectIsRefreshing);
+  const dispatch = useDispatch();
 
+  useEffect(() => {
+    dispatch(refreshUser());
+  }, [dispatch]);
+  return (
+    <>
+      {isRefreshing ? (
+        <b>Loading...</b>
+      ) : (
+        <Suspense fallback={null}>
+          <Routes>
+            <Route index element={<LoginPage />} />
+            <Route path="/welcome" element={<LoginPage />} />
+            <Route
+              path="/auth/register"
+              element={
+                <RestrictedRoute component={<Register />} redirectTo="/home" />
+              }
+            />
+            <Route
+              path="/auth/login"
+              element={
+                <RestrictedRoute component={<Login />} redirectTo="/home" />
+              }
+            />
+            <Route
+              path="/home"
+              element={
+                <PrivateRoute
+                  component={<HomePage />}
+                  redirectTo="/auth/login"
+                />
+              }
+            />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+          <Toaster position="top-right" />
+        </Suspense>
+      )}
+    </>
+  );
 };

src/components/AppBar/AppBar.jsx

@@ -1,5 +1,5 @@
 // import css from "./AppBar.module.css";
 
 export default function AppBar() {
-  return <div className={css.container}></div>;
+  return <div></div>;
 }

src/components/LoginForm/LoginForm.jsx

@@ -1,130 +1,35 @@
-// import { Formik, Form, Field } from "formik";
-// import { logIn } from "../../redux/auth/operations";
-// import { useDispatch, useSelector } from "react-redux";
-// import { useNavigate } from "react-router-dom";
-// import css from "./LoginForm.module.css";
-// import { useEffect, useState } from "react";
-// import toast from "react-hot-toast";
-// import { selectError } from "../../redux/auth/selectror";
-
-// export default function LoginForm() {
-//   const dispatch = useDispatch();
-//   const navigate = useNavigate();
-
-//   const error = useSelector(selectError);
-//   const [submittedWithError, setSubmittedWithError] = useState(false);
-
-//   // const handleSubmit = async (values, actions) => {
-//   //   try {
-//   //     await dispatch(logIn(values));
-//   //     navigate("/home")
-//   //   } catch (error) {
-//   //     console.error("Login failed:", error);
-//   //   }
-//   //   actions.resetForm();
-//   // };
-
-//   const handleSubmit = (values, actions) => {
-//     dispatch(logIn(values));
-//     navigate("/home");
-//     actions.resetForm();
-//   };
-
-//   useEffect(() => {
-//     if (error && submittedWithError) {
-//       toast.error(`Ops, somthing wrong, Try Again!`);
-//     }
-//   }, [error, submittedWithError]);
-
-//   const handleFormSubmit = (values, actions) => {
-//     setSubmittedWithError(true);
-//     handleSubmit(values, actions);
-//   };
-
-//   const [showPassword, setShowPassword] = useState(false);
-
-//   const togglePasswordVisibility = (event) => {
-//     event.preventDefault();
-//     setShowPassword(!showPassword);
-//   };
-
-//   return (
-//     <div>
-//       <Formik
-//         initialValues={{
-//           email: "",
-//           password: "",
-//         }}
-//         onSubmit={handleFormSubmit}
-//       >
-//             <Form className={css.form}>
-//               <label htmlFor="email"/>
-//                 <Field type="email" name="email" placeholder ="Enter your email" className={css.input}/>
-//                 <label htmlFor="password"/>
-//                   <div>
-//                     <Field
-//                       type={showPassword ? "text" : "password"}
-//                       name="password"
-//                       className={css.input}
-//                       placeholder="Confirm a password"
-//                     />
-//                     <button type="button "className={css.eye} onClick={togglePasswordVisibility}>
-//                       {/* <svg width="18" height="18" stroke="currentColor">
-//                         <use
-//                           href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
-//                         ></use>
-//                       </svg> */}
-//                     </button>
-//                 </div>
-
-//                 <button type="submit" className={css.button}>Log in Now</button>
-//           </Form>
-//         </Formik>
-//     </div>
-//   );
-// }
-
-import { Formik, Form, Field, validateYupSchema, ErrorMessage } from "formik";
+import { Formik, Form, Field } from "formik";
 import { logIn } from "../../redux/auth/operations";
-import { useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 import css from "./LoginForm.module.css";
-import { useState } from "react";
+import { useEffect, 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"),
-});
-
+import { selectError } from "../../redux/auth/selectror";
 
 export default function LoginForm() {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
-
-  // const error = useSelector(selectError);
+  const error = useSelector(selectError);
   const [submittedWithError, setSubmittedWithError] = useState(false);
 
   const handleSubmit = async (values, actions) => {
-    setSubmittedWithError(true);
+    setSubmittedWithError(false); // Скидаємо стан при новому сабміті
     try {
-      const resultAction = await dispatch(logIn(values));
-      unwrapResult(resultAction);
-      navigate("/home");
+      await dispatch(logIn(values)).unwrap();
+      toast.success("Logged in successfully");
     } catch (error) {
-      toast.error(`Ops, something went wrong, Try Again!`);
       console.error("Login failed:", error);
+      toast.error("Ops, something went wrong, Try Again!");
+      setSubmittedWithError(true);
     }
     actions.resetForm();
   };
 
+  useEffect(() => {
+    if (error && submittedWithError) {
+      toast.error("Ops, something went wrong, Try Again!");
+    }
+  }, [error, submittedWithError]);
+
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordVisibility = (event) => {
@@ -140,49 +45,35 @@ export default function LoginForm() {
           password: "",
         }}
         onSubmit={handleSubmit}
-        validationSchema={ValidationSchema}
       >
         <Form className={css.form}>
-          <label htmlFor="email" />
+          <label htmlFor="email">Email</label>
           <Field
             type="email"
             name="email"
             placeholder="Enter your email"
             className={css.input}
+            required
           />
-          <ErrorMessage
-            name="email"
-            component="span"
-            className={css.error}       
-          />
-
-          <label htmlFor="password" />
+          <label htmlFor="password">Password</label>
           <div>
             <Field
               type={showPassword ? "text" : "password"}
               name="password"
               className={css.input}
               placeholder="Enter your password"
+              required
             />
-              <ErrorMessage
-              name="password"
-              component="span"
-              className={css.error}       
-            />
-
             <button
               type="button"
               className={css.eye}
               onClick={togglePasswordVisibility}
             >
               {/* <svg width="18" height="18" stroke="currentColor">
-                <use
-                  href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}
-                ></use>
+                <use href={`${svg}${showPassword ? "#eye-slash-icon" : "#eye-icon"}`}></use>
               </svg> */}
             </button>
           </div>
-
           <button type="submit" className={css.button}>
             Log in Now
           </button>

src/components/PrivateRoute/PrivateRoute.jsx

@@ -0,0 +1,12 @@
+import { useSelector } from "react-redux";
+import { selectIsLoggedIn } from "../../redux/auth/selectror";
+import { Navigate } from "react-router-dom";
+
+export default function PrivateRoute({
+  component: Component,
+  redirectTo = "/auth/login",
+}) {
+  const isLoggedIn = useSelector(selectIsLoggedIn);
+
+  return isLoggedIn ? Component : <Navigate to={redirectTo} />;
+}