completed

src/App.jsx

@@ -4,19 +4,72 @@ import Register from "./pages/Register";
 import CreateNote from "./pages/CreateNote";
 import ViewNotes from "./pages/ViewNotes";
 import Navbar from "./components/Navbar";
+import ProtectedRoute from "./components/auth/ProtectedRoute";
+import CreateNoteForm from "./components/CreateNoteForm";
+import NoteCard from "./components/NoteCard";
+import { useEffect } from "react";
+import { checkAuthStatus } from "./store/slices/authSlice";
+import { useDispatch } from "react-redux";
+
+
 
 const App = () => {
+
+
+  const dispatch = useDispatch();
+  // const { status } = useSelector((state) => state.auth);
+
+  useEffect(() => {
+    dispatch(checkAuthStatus());
+  }, [dispatch]);
+
+
   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="/" element={<CreateNoteForm />} />
+            <Route path="/NoteCard" element={<NoteCard />} />
+
+
+
+
+            <Route path="/login"
+            element={
+              <ProtectedRoute requireAuth={false}>
+                <Login />
+              </ProtectedRoute>
+            }
+            />
+
+            <Route path="/register" 
+            element={
+              <ProtectedRoute requireAuth={false}>
+                <Register />
+              </ProtectedRoute>
+            }
+            />
+
+            <Route path="/CreateNote"
+            element={
+              <ProtectedRoute requireAuth={true}>
+                <CreateNote />
+              </ProtectedRoute>
+            }
+            />
+
+            <Route path="/view-notes"
+            element={
+              <ProtectedRoute requireAuth={true}>
+                <ViewNotes />
+              </ProtectedRoute>
+            }
+            />
+
+
 
-            <Route path="/notes" element={<ViewNotes />} />
-            <Route path="/" element={<CreateNote />} />
           </Routes>
       </main>
     </div>

src/components/Navbar.jsx

@@ -46,7 +46,10 @@ const Navbar = () => {
                   <Plus size={18} />
                   <span>Create</span>
                 </Link>
-
+
+                  {isAuthenticated  ? (
+                    <>
+
                 <Link
                   to="/notes"
                   className={`flex items-center gap-1 px-3 py-2 rounded-md transition-colors ${
@@ -66,7 +69,9 @@ const Navbar = () => {
                   <LogOut size={18} />
                   <span>Logout</span>
                 </button>
-
+                </>
+                  ) : (
+                    <>
 
                 <Link
                   to="/login"
@@ -91,8 +96,10 @@ const Navbar = () => {
                   <UserPlus size={18} />
                   <span>Register</span>
                 </Link>
-
+           </>
+                )}
           </div>
+
         </nav>
       </div>
     </header>

src/components/auth/ProtectedRoute.jsx

@@ -17,9 +17,15 @@ 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 ="/CreateNote" replace />;
+  }
 
 
   // Otherwise, render the children

src/pages/Login.jsx

@@ -1,12 +1,52 @@
+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 { login } from "../store/slices/authSlice";
+import { loginSchema } from "../schema/authSchema";
+import { Link } from "react-router-dom";
+
+
 const Login = () => {
+  const dispatch = useDispatch();
+  const { status, error } = useSelector((state) => state.auth);
+  const navigate = useNavigate();
+
+  //create react hook form
+   const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(loginSchema),
+  });
+
+
+  //create onSubmit function
+
+  const onSubmit = async (data) => {
+    try{
+      await dispatch(login(data)).unwrap();
+      navigate("/view-notes");
+
+    }catch (error){ 
+      console.log(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(onSubmit)} className="space-y-4">
           <div>
             <label
               htmlFor="email"
@@ -17,6 +57,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,11 +73,18 @@ 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"
             />
+             {errors.password && (
+  <p className="text-red-500 text-sm mt-1">
+    {errors.password.message}
+  </p>
+)}
           </div>
 
+
           <button
             type="submit"
             className="w-full bg-yellow-500 text-white py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2"
@@ -47,9 +95,9 @@ const Login = () => {
 
         <p className="mt-4 text-center text-sm text-gray-600">
           Don't have an account?{" "}
-          <a href="/register" className="text-yellow-600 hover:text-yellow-500">
+          <Link to="/register" className="text-yellow-600 hover:text-yellow-500">
             Register here
-          </a>
+          </Link>
         </p>
       </div>
     </div>

src/pages/Register.jsx

@@ -1,12 +1,47 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { useDispatch, useSelector } from "react-redux";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { registerUser } from "../store/slices/authSlice";
+import { registerSchema } from "../schema/authSchema";
+import { Link } from "react-router-dom";
+
 const Register = () => {
+  const dispatch = useDispatch();
+  const { status, error } = useSelector((state) => state.auth);
+  const navigate = useNavigate();
+
+  //creat react hook form
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(registerSchema),
+  });
+
+  //handle form submit
+  const onSubmit = async (data) => {
+    try {
+      await dispatch(registerUser(data)).unwrap();
+      navigate("/view-notes");
+    } catch (err) {
+      console.error("Failed to register:", err);
+    }
+  };
+
   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(onSubmit)} className="space-y-4">
           <div>
             <label
               htmlFor="email"
@@ -17,9 +52,15 @@ 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="text-red-500 text-sm mt-1">
+                {errors.email.message}
+              </p>
+            )}
           </div>
 
           <div>
@@ -32,9 +73,16 @@ 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="text-red-500 text-sm mt-1">
+    {errors.password.message}
+  </p>
+)}
+
           </div>
 
           <div>
@@ -47,9 +95,16 @@ const Register = () => {
             <input
               type="password"
               id="confirmPassword"
+              {...register("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"
             />
+           {errors.confirmPassword && (
+  <p className="text-red-500 text-sm mt-1">
+    {errors.confirmPassword.message}
+  </p>
+)}
+
           </div>
 
           <button
@@ -62,9 +117,9 @@ const Register = () => {
 
         <p className="mt-4 text-center text-sm text-gray-600">
           Already have an account?{" "}
-          <a href="/login" className="text-yellow-600 hover:text-yellow-500">
+          <Link to="/login" className="text-yellow-600 hover:text-yellow-500">
             Login here
-          </a>
+          </Link>
         </p>
       </div>
     </div>