mehul-m-prajapati · parassareen4 · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024
diff --git a/backend/package.json b/backend/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.20.3",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
     "express-session": "^1.18.1",

diff --git a/backend/server.js b/backend/server.js
@@ -4,21 +4,23 @@ const session = require('express-session');
 const passport = require('passport');
 const bodyParser = require('body-parser');
 require('dotenv').config();
+const cors = require('cors');
 
 // Passport configuration
 require('./config/passportConfig');
 
 const app = express();
 
+// CORS configuration
+app.use(cors('*'));
+
 // Middleware
 app.use(bodyParser.json());
-
 app.use(session({
     secret: process.env.SESSION_SECRET,
     resave: false,
     saveUninitialized: false,
 }));
-
 app.use(passport.initialize());
 app.use(passport.session());
 
@@ -29,7 +31,6 @@ app.use('/api/auth', authRoutes);
 // Connect to MongoDB
 mongoose.connect(process.env.MONGO_URI, {}).then(() => {
     console.log('Connected to MongoDB');
-
     app.listen(process.env.PORT, () => {
         console.log(`Server running on port ${process.env.PORT}`);
     });

diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/crl-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Github Tracker</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/crl-icon.png b/public/crl-icon.png
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
@@ -0,0 +1,79 @@
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom"; // Import the hook for navigation
+
+interface LoginFormData {
+  email: string;
+  password: string;
+}
+
+const Login: React.FC = () => {
+  const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
+  const [message, setMessage] = useState<string>("");
+
+  const navigate = useNavigate(); // Initialize the navigate hook
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post(
+        "http://localhost:5000/api/auth/login", // Backend endpoint
+        formData,
+
+      );
+      setMessage(response.data.message); // Show success message from backend
+
+      // Navigate to /home if login is successful
+      if (response.data.message === 'Login successful') {
+        navigate("/home");
+      }
+    } catch (error: any) {
+      setMessage(error.response?.data?.message || "Something went wrong");
+    }
+  };
+
+  return (
+    <div className="max-w-md mt-12 mx-auto bg-white p-8 rounded-lg shadow-md">
+      <h2 className="text-2xl font-semibold text-center mb-6">Login</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            value={formData.email}
+            onChange={handleChange}
+            required
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            name="password"
+            placeholder="Password"
+            value={formData.password}
+            onChange={handleChange}
+            required
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          Login
+        </button>
+      </form>
+      {message && <p className="text-center text-red-500 mt-4">{message}</p>}
+    </div>
+  );
+};
+
+export default Login;
+
diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
@@ -4,11 +4,16 @@ import Home from "../pages/Home/Home"; // Import the Home component
 import About from "../pages/About/About"; // Import the About component
 import Contact from "../pages/Contact/Contact"; // Import the Contact component
 import Contributors from "../pages/Contributors/Contributors";
+import Signup from "./Signup/Signup.tsx";
+import Login from "./Login/Login.tsx";
+
 
 const Router = () => {
   return (
     <Routes>
       {/* Redirect from root (/) to the home page */}
+      <Route path="/signup" element={<Signup />} />
+      <Route path="/login" element={<Login />} />
       <Route path="/" element={<Navigate to="/home" replace />} />
       <Route path="/about" element={<About />} />
       <Route path="/contact" element={<Contact />} />

diff --git a/src/Routes/Signup/Signup.tsx b/src/Routes/Signup/Signup.tsx
@@ -0,0 +1,89 @@
+import React, { useState, ChangeEvent, FormEvent } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+interface SignUpFormData {
+  username: string;
+  email: string;
+  password: string;
+}
+
+const SignUp: React.FC = () => {
+  const [formData, setFormData] = useState<SignUpFormData>({ username: "", email: "", password: "" });
+  const [message, setMessage] = useState<string>("");
+
+  const navigate = useNavigate();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post(
+        "http://localhost:5000/api/auth/signup", // Backend endpoint
+        formData // Include cookies for session
+      );
+      setMessage(response.data.message); // Show success message from backend
+
+      // Navigate to login page after successful signup
+      if (response.data.message === 'User created successfully') {
+        navigate("/login");
+      }
+    } catch (error: any) {
+      setMessage(error.response?.data?.message || "Something went wrong");
+    }
+  };
+
+  return (
+    <div className="mt-12 max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
+      <h2 className="text-2xl font-semibold text-center mb-6">Sign Up</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <input
+            type="text"
+            name="username"
+            placeholder="Username"
+            value={formData.username}
+            onChange={handleChange}
+            required
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            value={formData.email}
+            onChange={handleChange}
+            required
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            name="password"
+            placeholder="Password"
+            value={formData.password}
+            onChange={handleChange}
+            required
+            className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          Sign Up
+        </button>
+      </form>
+      {message && <p className="text-center text-red-500 mt-4">{message}</p>}
+    </div>
+  );
+};
+
+export default SignUp;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -8,7 +8,8 @@ const Navbar: React.FC = () => {
     <nav className="bg-gray-800 text-white shadow-lg">
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         {/* Logo Section */}
-        <div className="text-2xl font-bold hover:text-gray-300 cursor-pointer">
+        <div className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center">
+          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
           GitHub Tracker
         </div>
 
@@ -38,6 +39,10 @@ const Navbar: React.FC = () => {
           >
             Contributors
           </Link>
+          <Link
+            to="/login"
+            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+          >Login</Link>
         </div>
 
         {/* Mobile Menu Button */}