newUpdates_week15

src/App.jsx

@@ -1,26 +1,53 @@
 import { Routes, Route } from "react-router-dom";
 import Login from "./pages/Login";
-import Register from "./pages/Register";
-import CreateNote from "./pages/CreateNote";
+import Register from "./pages/Register.jsx";
 import ViewNotes from "./pages/ViewNotes";
-import Navbar from "./components/Navbar";
+import CreateNote from "./pages/CreateNote.jsx";
+import Navbar from "./components/Navbar.jsx";
+import { useDispatch,useSelector } from "react-redux";
+import { useEffect } from "react";
+import { checkAuthStatus } from "./store/slices/authSlice";
+import ProtectedRoute from "./components/auth/ProtectedRoute";
 
+
+
+
 const App = () => {
   return (
     <div className="min-h-screen bg-gray-50">
       <Navbar />
       <main className="container mx-auto px-4 py-8">
 
           <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
 
-            <Route path="/notes" element={<ViewNotes />} />
-            <Route path="/" element={<CreateNote />} />
+
+            <Route path="/login"  element={
+             <ProtectedRoute requireAuth={false} >
+              <Login />
+              </ProtectedRoute>
+               } />
+
+            <Route path="/register" element={
+              <ProtectedRoute requireAuth={false} >
+              <Register />
+              </ProtectedRoute>
+              } />
+
+            <Route path="/notes" element={
+              <ProtectedRoute requireAuth={true} >
+              <ViewNotes />
+              </ProtectedRoute>
+              } />
+            <Route path="/" element={
+              <ProtectedRoute requireAuth={true} >
+              <CreateNote />
+              </ProtectedRoute>
+              } />
           </Routes>
+
       </main>
     </div>
   );
 };
-
+  
 export default App;

src/components/Navbar.jsx

@@ -34,7 +34,8 @@ const Navbar = () => {
           </Link>
 
           <div className="flex gap-4">
-
+            {isAuthenticated ? (
+              <>
                 <Link
                   to="/"
                   className={`flex items-center gap-1 px-3 py-2 rounded-md transition-colors ${
@@ -66,8 +67,9 @@ const Navbar = () => {
                   <LogOut size={18} />
                   <span>Logout</span>
                 </button>
-
-
+              </>
+            ) : (
+              <>
                 <Link
                   to="/login"
                   className={`flex items-center gap-1 px-3 py-2 rounded-md transition-colors ${
@@ -91,12 +93,13 @@ const Navbar = () => {
                   <UserPlus size={18} />
                   <span>Register</span>
                 </Link>
-
+              </>
+            )}
           </div>
         </nav>
       </div>
     </header>
   );
 };
 
-export default Navbar;
+export default Navbar;

src/components/auth/ProtectedRoute.jsx

@@ -2,10 +2,10 @@ import { Navigate, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 const ProtectedRoute = ({ children, requireAuth }) => {
-  const { isAuthenticated, loading } = useSelector((state) => state.auth);
+  const { isAuthenticated, loading , status } = useSelector((state) => state.auth);
 
   // Show loading state while checking authentication
-  if (loading) {
+  if ( status ===  "loading") {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center">
@@ -17,12 +17,19 @@ const ProtectedRoute = ({ children, requireAuth }) => {
   }
 
   // TODO: If route requires authentication and user is not authenticated, redirect to login
+  if( requireAuth && !isAuthenticated) {
+    return <Navigate to ="/login" replace/>;
+  }
 
 
   //TODO: If route requires unauthenticated user and user is authenticated, redirect to notes
+  if (!requireAuth && isAuthenticated) {
+    return <Navigate to="/notes" replace />;
 
+  }
 
   // Otherwise, render the children
+
   return children;
 };
 

src/pages/Login.jsx

@@ -1,12 +1,46 @@
-const Login = () => {
+import ract from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {z} from "zod";
+import { useNavigate } from 'react-router-dom';
+import {useDispatch, useSelector} from 'react-redux';
+import { login  } from "../store/slices/authSlice.js";
+import { loginSchema } from '../schema/authSchema.js';
+
+
+const Login =() =>{
+
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const {status, error } = useSelector((state) => state.auth)
+
+
+ const {
+  register ,
+  handleSubmit,
+  formState:{errors},
+ } =useForm({
+  resolver: zodResolver(loginSchema),
+ });
+
+  const onLogin = async (data) => {
+    try{
+      await dispatch(login(data)).unwrap();
+      navigate("/notes");
+    } catch(error) {
+      console.log("failed to login", error);
+    }
+  }
+
+
   return (
     <div className="min-h-[60vh] flex items-center justify-center">
       <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
         <h2 className="text-2xl font-bold text-center text-gray-800 mb-6">
           Login to Your Account
         </h2>
 
-        <form className="space-y-4">
+        <form  onSubmit = {handleSubmit (onLogin)}className="space-y-4">
           <div>
             <label
               htmlFor="email"
@@ -17,6 +51,7 @@ const Login = () => {
             <input
               type="email"
               id="email"
+              {...register("email")}
               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500"
               placeholder="Enter your email"
             />
@@ -32,6 +67,7 @@ const Login = () => {
             <input
               type="password"
               id="password"
+              {...register("password")}
               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500"
               placeholder="Enter your password"
             />
@@ -54,6 +90,6 @@ const Login = () => {
       </div>
     </div>
   );
-};
 
+}
 export default Login;

src/pages/Register.jsx

@@ -1,12 +1,48 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {z} from "zod"
+import { useDispatch ,useSelector } from 'react-redux';
+import{useNavigate} from 'react-router-dom';
+import { registers } from '../store/slices/authSlice.js';
+import { registerSchema } from "../schema/authSchema.js";
+
+
 const Register = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate()
+  const {status , error} = useSelector((state) => state.auth)
+  const{
+   register,
+  handleSubmit,
+  formState:{errors},
+  } =useForm({
+    resolve: zodResolver(registerSchema),
+    defaultValues: {
+      email: ""
+    }
+  });
+
+  const onRegister = async (data) => {
+    try {
+      await dispatch(registers(data)).unwrap();
+      console.log(register.date)
+      navigate('/login');
+    } catch (error) {
+      console.log('something went wrong', error);
+    }
+  };
+
+
+
   return (
     <div className="min-h-[60vh] flex items-center justify-center">
       <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
         <h2 className="text-2xl font-bold text-center text-gray-800 mb-6">
           Create an Account
         </h2>
 
-        <form className="space-y-4">
+        <form onSubmit = {handleSubmit (onRegister)}  className="space-y-4">
           <div>
             <label
               htmlFor="email"
@@ -17,9 +53,14 @@ const Register = () => {
             <input
               type="email"
               id="email"
+              {...register('email')}
               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500"
               placeholder="Enter your email"
             />
+            {/* {errors.email && (
+              <p className='mt-1 text-sm text-red-600'>{errors.email.message}</p>
+            )} */}
+
           </div>
 
           <div>
@@ -32,9 +73,13 @@ const Register = () => {
             <input
               type="password"
               id="password"
+              {...register("password")}
               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500"
               placeholder="Enter your password"
             />
+            {/* {errors.password && (
+              <p className='mt-1 text-sm text-red-600'>{errors.password.message}</p>
+            )} */}
           </div>
 
           <div>
@@ -47,6 +92,7 @@ const Register = () => {
             <input
               type="password"
               id="confirmPassword"
+              {...registers("confirmPassword")}
               className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500"
               placeholder="Confirm your password"
             />

src/schema/authSchema.js

@@ -10,11 +10,7 @@ export const registerSchema = z
     email: z.string().min(1, "Email is required").email("Invalid email format"),
     password: z
       .string()
-      .min(8, "Password must be at least 8 characters")
-      .regex(
-        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
-        "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
-      ),
+      .min(8, "Password must be at least 8 characters"),
     confirmPassword: z.string().min(1, "Please confirm your password"),
   })
   .refine((data) => data.password === data.confirmPassword, {