diff --git a/backend/config/passportConfig.js b/backend/config/passportConfig.js index 173ff8a9..f3c4fd45 100644 --- a/backend/config/passportConfig.js +++ b/backend/config/passportConfig.js @@ -20,7 +20,8 @@ passport.use( return done(null, { id : user._id.toString(), username: user.username, - email: user.email + email: user.email, + token: user.token }); } catch (err) { return done(err); diff --git a/backend/models/User.js b/backend/models/User.js index fed589a9..cd85ea6d 100644 --- a/backend/models/User.js +++ b/backend/models/User.js @@ -16,18 +16,19 @@ const UserSchema = new mongoose.Schema({ type: String, required: true, }, + token: { + type: String, + unique: true, + sparse: true, + }, }); // ✅ FIXED: no next() -UserSchema.pre('save', async function (next) { - if (!this.isModified('password')) return next(); - try { - const salt = await bcrypt.genSalt(10); - this.password = await bcrypt.hash(this.password, salt); - next(); // Tells Mongoose hashing is done, save the document now - } catch (err) { - next(err); // Safely passes any encryption errors to the database handler - } +UserSchema.pre("save", async function () { + if (!this.isModified("password")) return; + + const salt = await bcrypt.genSalt(10); + this.password = await bcrypt.hash(this.password, salt); }); // ✅ password comparison @@ -36,3 +37,4 @@ UserSchema.methods.comparePassword = async function (enteredPassword) { }; module.exports = mongoose.model("User", UserSchema); + diff --git a/backend/routes/auth.js b/backend/routes/auth.js index 7c2cda78..6dfe7559 100644 --- a/backend/routes/auth.js +++ b/backend/routes/auth.js @@ -35,6 +35,24 @@ router.post("/login", validateRequest(loginSchema), passport.authenticate('local res.status(200).json( { message: 'Login successful', user: req.user } ); }); +// Save GitHub token route +router.post("/token", async (req, res) => { + if (!req.isAuthenticated()) { + return res.status(401).json({ message: 'Not authenticated' }); + } + const { token } = req.body; + if (!token) { + return res.status(400).json({ message: 'Token is required' }); + } + try { + await User.findByIdAndUpdate(req.user._id, { token }); + req.user.token = token; + res.status(200).json({ success: true, message: 'Token saved successfully' }); + } catch (err) { + res.status(500).json({ message: 'Error saving token', error: err.message }); + } +}); + // Logout route router.get("/logout", (req, res) => { diff --git a/src/App.tsx b/src/App.tsx index d9ae67ea..6db6723e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import ScrollProgressBar from "./components/ScrollProgressBar"; import { Toaster } from "react-hot-toast"; import Router from "./Routes/Router"; -const FULLSCREEN_ROUTES = ["/signup", "/login"]; +const FULLSCREEN_ROUTES = ["/signup", "/login", "/enterToken"]; function App() { const location = useLocation(); diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx index d742d5cc..fb2c20e9 100644 --- a/src/Routes/Router.tsx +++ b/src/Routes/Router.tsx @@ -9,8 +9,10 @@ import Signup from "../pages/Signup/Signup.tsx"; import Login from "../pages/Login/Login.tsx"; import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx"; import Home from "../pages/Home/Home.tsx"; -import Activity from "../pages/Activity.tsx"; -import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure +import Activity from "../pages/Activity.tsx"; +import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; +import SetToken from "../components/SetToken.tsx"; +import Profile from "../pages/Profile/Profile.tsx"; const Router = () => { return ( @@ -26,9 +28,9 @@ const Router = () => { } /> } /> } /> - - {/* Privacy Policy page route */} } /> + } /> + } /> ); }; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index fd5eac86..0eb29395 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,16 +1,19 @@ import { NavLink, Link } from "react-router-dom"; import { useState, useContext } from "react"; import { ThemeContext } from "../context/ThemeContext"; +import { UserContext } from "../context/UserContext"; import { Moon, Sun, Menu, X, Github } from "lucide-react"; const Navbar: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const themeContext = useContext(ThemeContext); + const userContext = useContext(UserContext); if (!themeContext) return null; const { toggleTheme, mode } = themeContext; + const user = userContext?.user ?? null; const navLinkStyles = ({ isActive }: { isActive: boolean }) => `px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 ${ @@ -53,9 +56,15 @@ const Navbar: React.FC = () => { Contributors - - Login - + {user ? ( + + {user.username} + + ) : ( + + Login + + )} {/* Theme Toggle */} + +

+ + Generate a new token + + {" "}with repo and read:user scopes. +

+ + + + + + + + {message && ( +
+ {message} +
+ )} + + + + ); +}; + +export default SetToken; diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx new file mode 100644 index 00000000..3e099da9 --- /dev/null +++ b/src/context/UserContext.tsx @@ -0,0 +1,40 @@ +import React, { createContext, useContext, useState } from "react"; + +export interface UserData { + _id: string; + username: string; + email: string; + token?: string; +} + +interface UserContextType { + user: UserData | null; + setUser: (user: UserData | null) => void; + updateToken: (token: string) => void; +} + +export const UserContext = createContext(null); + +export const useUser = () => { + const ctx = useContext(UserContext); + if (!ctx) throw new Error("useUser must be used within UserProvider"); + return ctx; +}; + +const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [user, setUserState] = useState(null); + + const setUser = (u: UserData | null) => setUserState(u); + + const updateToken = (token: string) => { + setUserState((prev) => (prev ? { ...prev, token } : prev)); + }; + + return ( + + {children} + + ); +}; + +export default UserProvider; diff --git a/src/main.tsx b/src/main.tsx index 4c5b79dd..e3e20374 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,13 +4,16 @@ import App from "./App.tsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; import ThemeWrapper from "./context/ThemeContext.tsx"; +import UserProvider from "./context/UserContext.tsx"; createRoot(document.getElementById("root")!).render( - - - - - + + + + + + + ); \ No newline at end of file diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 7146db84..0ac81579 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -3,6 +3,7 @@ import axios from "axios"; import { useNavigate, Link } from "react-router-dom"; import { ThemeContext } from "../../context/ThemeContext"; import type { ThemeContextType } from "../../context/ThemeContext"; +import { useUser } from "../../context/UserContext"; const backendUrl = import.meta.env.VITE_BACKEND_URL; @@ -12,13 +13,16 @@ interface LoginFormData { } const Login: React.FC = () => { - const [formData, setFormData] = useState({ email: "", password: "" }); + const [formData, setFormData] = useState({ + email: "", + password: "", + }); const [message, setMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); - const navigate = useNavigate(); const themeContext = useContext(ThemeContext) as ThemeContextType; const { mode } = themeContext; + const { setUser } = useUser(); const handleChange = (e: ChangeEvent) => { const { name, value } = e.target; @@ -30,11 +34,21 @@ const Login: React.FC = () => { setIsLoading(true); try { - const response = await axios.post(`${backendUrl}/api/auth/login`, formData); + const response = await axios.post( + `${backendUrl}/api/auth/login`, + formData, + { withCredentials: true }, + ); setMessage(response.data.message); - if (response.data.message === 'Login successful') { - navigate("/"); + if (response.data.message === "Login successful") { + const userData = response.data.user; + setUser(userData); + if (!userData.token) { + navigate("/enterToken"); + } else { + navigate("/"); + } } } catch (error: unknown) { if (axios.isAxiosError(error)) { @@ -57,34 +71,54 @@ const Login: React.FC = () => { > {/* Animated background elements */}
-
-
-
-
+
+
+
+
{/* Branding */}
- Logo + Logo
-

+

GitHubTracker

-

+

Track your GitHub journey

{/* Form Card */} -
-

+
+

Welcome Back

@@ -138,18 +172,22 @@ const Login: React.FC = () => { {/* Message */} {message && ( -
+
{message}
)} {/* Footer Text */}
-

+

Don't have an account? {

-
+
); }; -export default Login; \ No newline at end of file +export default Login; + diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx new file mode 100644 index 00000000..3b18249a --- /dev/null +++ b/src/pages/Profile/Profile.tsx @@ -0,0 +1,168 @@ +import React, { useState, useContext } from "react"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; +import { ThemeContext } from "../../context/ThemeContext"; +import type { ThemeContextType } from "../../context/ThemeContext"; +import { useUser } from "../../context/UserContext"; +import { KeyIcon, UserIcon, CheckCircle, Eye, EyeOff, LogOut } from "lucide-react"; + +const backendUrl = import.meta.env.VITE_BACKEND_URL; + +const Profile: React.FC = () => { + const themeContext = useContext(ThemeContext) as ThemeContextType; + const { mode } = themeContext; + const { user, updateToken, setUser } = useUser(); + const navigate = useNavigate(); + + const [token, setToken] = useState(user?.token ?? ""); + const [isLoading, setIsLoading] = useState(false); + const [saved, setSaved] = useState(false); + const [error, setError] = useState(""); + const [showToken, setShowToken] = useState(false); + + const handleLogout = async () => { + try { + await axios.get(`${backendUrl}/api/auth/logout`, { withCredentials: true }); + } finally { + setUser(null); + navigate("/login"); + } + }; + + const handleSaveToken = async (e: React.FormEvent) => { + e.preventDefault(); + setIsLoading(true); + setError(""); + setSaved(false); + try { + const response = await axios.post( + `${backendUrl}/api/auth/token`, + { token }, + { withCredentials: true } + ); + if (response.data.success) { + updateToken(token); + setSaved(true); + setTimeout(() => setSaved(false), 3000); + } + } catch { + setError("Failed to save token."); + } finally { + setIsLoading(false); + } + }; + + if (!user) { + return ( +
+

Please log in to view your profile.

+
+ ); + } + + const inputClass = `w-full pl-4 pr-4 py-3 rounded-xl focus:outline-none transition-all ${ + mode === "dark" + ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" + : "bg-gray-100 border border-gray-200 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" + }`; + + return ( +
+

+ Profile +

+ + {/* Username */} +
+
+ + Username +
+ +
+ + {/* Logout */} +
+ +
+ + {/* GitHub Token */} +
+
+ + GitHub Personal Access Token +
+
+
+ setToken(e.target.value)} + className={`${inputClass} pr-12`} + /> + +
+

+ + Generate a token + + {" "}with repo and read:user scopes. +

+ + {error && ( +

{error}

+ )} + + +
+
+
+ ); +}; + +export default Profile; diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx index 8b7457c9..82143050 100644 --- a/src/pages/Tracker/Tracker.tsx +++ b/src/pages/Tracker/Tracker.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react" +import React, { useState, useEffect, useContext } from "react" import { IssueOpenedIcon, IssueClosedIcon, @@ -10,7 +10,6 @@ import { Container, Box, TextField, - Button, Paper, Table, TableBody, @@ -32,6 +31,8 @@ import { import { useTheme } from "@mui/material/styles"; import { useGitHubAuth } from "../../hooks/useGitHubAuth"; import { useGitHubData } from "../../hooks/useGitHubData"; +import { useDebounce } from "../../hooks/useDebounce"; +import { UserContext } from "../../context/UserContext"; import { KeyIcon } from "lucide-react"; import BackToTopButton from "../../components/Backtotop"; @@ -50,13 +51,13 @@ interface GitHubItem { const Home: React.FC = () => { const theme = useTheme(); + const userContext = useContext(UserContext); const { username, setUsername, token, setToken, - error: authError, getOctokit, } = useGitHubAuth(); @@ -80,20 +81,32 @@ const Home: React.FC = () => { const [startDate, setStartDate] = useState(""); const [endDate, setEndDate] = useState(""); - // Fetch data when username, tab, or page changes + // Prefill from user context on mount + useEffect(() => { + const user = userContext?.user; + if (user?.username) setUsername(user.username); + if (user?.token) setToken(user.token); + }, []); + + const debouncedUsername = useDebounce(username, 800); + + // Auto-fetch when debounced username or token changes + useEffect(() => { + if (debouncedUsername) { + setPage(0); + fetchData(debouncedUsername, 1, ROWS_PER_PAGE); + } + }, [debouncedUsername, token]); + + // Fetch when tab or page changes (username already set) useEffect(() => { if (username) { fetchData(username, page + 1, ROWS_PER_PAGE); } }, [tab, page]); - const handleSubmit = (e: React.FormEvent): void => { - e.preventDefault(); - setPage(0); - fetchData(username, 1, ROWS_PER_PAGE); - }; - const handlePageChange = (_: unknown, newPage: number) => { + setPage(newPage); }; @@ -168,79 +181,46 @@ const Home: React.FC = () => { {/* Auth Form */} -
- - setUsername(e.target.value)} - required - sx={{ flex: 1, minWidth: 150 }} - /> - setToken(e.target.value)} - type="password" - required - sx={{ flex: 1, minWidth: 150 }} - helperText={ - + setUsername(e.target.value)} + sx={{ flex: 1, minWidth: 150 }} + /> + setToken(e.target.value)} + type="password" + sx={{ flex: 1, minWidth: 150 }} + helperText={ + + - - - Generate new token - - - - • - - - - Learn more - - - } - /> - - - + + Generate new token + + • + + Learn more + +
+ } + /> + {/* Filters */} @@ -328,9 +308,9 @@ const Home: React.FC = () => { - {(authError || dataError) && ( + {dataError && ( - {authError || dataError} + {dataError} )}