4 files changed, 87 insertions, 17 deletions

diff --git a/src/main.jsx b/src/main.jsx
index c4a8c39..3de432c 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client'; // Import from 'react-dom/client'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './index.css';
 import App from './App';
@@ -7,15 +7,32 @@ import Login from './pages/Login';
 import Register from './pages/Register';
 import Dashboard from './pages/Dashboard';
 import ManageAds from './pages/ManageAds';
+import PrivateRoute from './utils/PrivateRoute';
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = ReactDOM.createRoot(rootElement); // Create a root
+
+root.render(
   <Router>
     <Routes>
       <Route path="/" element={<Login />} />
       <Route path="/register" element={<Register />} />
-      <Route path="/dashboard" element={<Dashboard />} />
-      <Route path="/manage-ads" element={<ManageAds />} />
+      <Route
+        path="/dashboard"
+        element={
+          <PrivateRoute>
+            <Dashboard />
+          </PrivateRoute>
+        }
+      />
+      <Route
+        path="/manage-ads"
+        element={
+          <PrivateRoute>
+            <ManageAds />
+          </PrivateRoute>
+        }
+      />
     </Routes>
-  </Router>,
-  document.getElementById('root')
+  </Router>
 );
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 89e0c8b..9d38aa9 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,20 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
+import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 
 const Login = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
   const navigate = useNavigate();
 
-  const handleLogin = () => {
-    // Handle login logic here
-    navigate('/dashboard');
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post('http://localhost:5000/login', {
+        username,
+        password,
+      });
+      localStorage.setItem('token', response.data.token);
+      navigate('/dashboard');
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   return (
     <div>
       <h1>Login</h1>
       <form onSubmit={handleLogin}>
-        <input type="text" placeholder="Username" />
-        <input type="password" placeholder="Password" />
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
         <button type="submit">Login</button>
       </form>
     </div>
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
index 84c0bf2..f0acf58 100644
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -1,17 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
+import axios from 'axios';
 
 const Register = () => {
-  const handleRegister = (e) => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleRegister = async (e) => {
     e.preventDefault();
-    // Handle registration logic here
+    try {
+      const response = await axios.post('http://localhost:5000/register', {
+        username,
+        password,
+      });
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   return (
     <div>
       <h1>Register</h1>
       <form onSubmit={handleRegister}>
-        <input type="text" placeholder="Username" />
-        <input type="password" placeholder="Password" />
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
         <button type="submit">Register</button>
       </form>
     </div>
diff --git a/src/utils/PrivateRoute.jsx b/src/utils/PrivateRoute.jsx
new file mode 100644
index 0000000..b57bcf5
--- /dev/null
+++ b/src/utils/PrivateRoute.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+const PrivateRoute = ({ children }) => {
+  const token = localStorage.getItem('token');
+  return token ? children : <Navigate to="/" />;
+};
+
+export default PrivateRoute;