diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..bbf3c1e --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +VITE_BACKEND_URL=http://localhost:5000 \ No newline at end of file diff --git a/backend/package.json b/backend/package.json index 89507d5..e101279 100644 --- 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 index 13654c2..3f19f00 100644 --- 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 index e4b78ea..b6d940d 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Github Tracker
diff --git a/package.json b/package.json index 5f47253..bac976a 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "devDependencies": { "@eslint/js": "^9.13.0", + "@types/node": "^22.10.1", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react-swc": "^3.5.0", diff --git a/public/crl-icon.png b/public/crl-icon.png new file mode 100644 index 0000000..2f61178 Binary files /dev/null and b/public/crl-icon.png differ diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx new file mode 100644 index 0000000..1c1f495 --- /dev/null +++ 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 + +const backendUrl = import.meta.env.VITE_BACKEND_URL; +interface LoginFormData { + email: string; + password: string; +} + +const Login: React.FC = () => { + const [formData, setFormData] = useState({ email: "", password: "" }); + const [message, setMessage] = useState(""); + + const navigate = useNavigate(); // Initialize the navigate hook + + const handleChange = (e: ChangeEvent) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + try { + const response = await axios.post(`${backendUrl}/api/auth/login`, + 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 ( +
+

Login

+
+
+ +
+
+ +
+ +
+ {message &&

{message}

} +
+ ); +}; + +export default Login; + diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx index 5307a85..867672a 100644 --- 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 ( {/* Redirect from root (/) to the home page */} + } /> + } /> } /> } /> } /> diff --git a/src/Routes/Signup/Signup.tsx b/src/Routes/Signup/Signup.tsx new file mode 100644 index 0000000..40edaa8 --- /dev/null +++ b/src/Routes/Signup/Signup.tsx @@ -0,0 +1,90 @@ +import React, { useState, ChangeEvent, FormEvent } from "react"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; + +const backendUrl = import.meta.env.VITE_BACKEND_URL; +interface SignUpFormData { + username: string; + email: string; + password: string; +} + +const SignUp: React.FC = () => { + const [formData, setFormData] = useState({ username: "", email: "", password: "" }); + const [message, setMessage] = useState(""); + + const navigate = useNavigate(); + + const handleChange = (e: ChangeEvent) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + try { + const response = await axios.post( + `${backendUrl}/api/auth/signup`, + 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 ( +
+

Sign Up

+
+
+ +
+
+ +
+
+ +
+ +
+ {message &&

{message}

} +
+ ); +}; + +export default SignUp; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ce886fa..f7ea2f2 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -8,7 +8,8 @@ const Navbar: React.FC = () => {