Merge branch 'main' into fix/auth-user-tests

Author: JayRathore10

.github/workflows/auto-label-gssoc.yml

@@ -25,4 +25,6 @@ jobs:
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}  # Use GITHUB_TOKEN for PRs
         labels: |
-          level:intermediate quality:clean gssoc:approved
+            level:intermediate
+            quality:clean
+            gssoc:approved

Dockerfile.prod

@@ -7,12 +7,12 @@ WORKDIR /app
 # Copy package.json
 COPY package.json .
 
-# Install production dependencies using Yarn
-RUN npm install --production
+# Install dependencies (dev deps needed for the build step)
+RUN npm install
 # Copy the rest of the application files
 COPY . .
 
-# Build the frontend using Yarn
+# Build the frontend
 RUN npm run build
 
 # Stage 2: Serve the application with Nginx

backend/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "nodemon server.js",
     "start": "node server.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jasmine spec/**/*.spec.cjs"
+
   },
   "keywords": [],
   "author": "",
@@ -20,7 +21,8 @@
     "express-session": "^1.18.1",
     "mongoose": "^8.8.2",
     "passport": "^0.7.0",
-    "passport-local": "^1.0.0"
+    "passport-local": "^1.0.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "nodemon": "^3.1.9"

backend/routes/auth.js

@@ -1,29 +1,37 @@
 const express = require("express");
 const passport = require("passport");
 const User = require("../models/User");
+const { signupSchema, loginSchema } = require("../validators/authValidator");
+const { validateRequest } = require("../validators/validationRequest");
 const router = express.Router();
 
 // Signup route
-router.post("/signup", async (req, res) => {
+router.post("/signup", validateRequest(signupSchema), async (req, res) => {
 
     const { username,  email, password } = req.body;
 
     try {
-        const existingUser = await User.findOne( {email} );
+        const existingUser = await User.findOne({
+            $or: [{ email }, { username }],
+        });
 
         if (existingUser)
-            return res.status(400).json( {message: 'User already exists'} );
+            return res.status(400).json({ message: 'User already exists' });
 
-        const newUser = new User( {username, email, password} );
+        const newUser = new User({ username, email, password });
         await newUser.save();
-        res.status(201).json( {message: 'User created successfully'} );
+        res.status(201).json({ message: 'User created successfully' });
     } catch (err) {
+        if (err && err.code === 11000) {
+            return res.status(400).json({ message: 'User already exists' });
+        }
+
         res.status(500).json({ message: 'Error creating user', error: err.message });
     }
 });
 
 // Login route
-router.post("/login", passport.authenticate('local'), (req, res) => {
+router.post("/login", validateRequest(loginSchema), passport.authenticate('local'), (req, res) => {
     res.status(200).json( { message: 'Login successful', user: req.user } );
 });
 

backend/validators/authValidator.js

@@ -0,0 +1,38 @@
+const { z } = require("zod");
+
+const signupSchema = z.object({
+    username: z.string()
+        .trim()
+        .min(3, "Username must be at least 3 characters long")
+        .max(30, "Username must be at most 30 characters long")
+        .regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores")
+        ,
+    
+    email: z.string()
+        .trim()
+        .toLowerCase()
+        .email("Invalid email address"),
+
+
+    password: z.string()
+        .min(8, "Password must be at least 8 characters long")
+        .max(100, "Password must be at most 100 characters long")
+        .regex(
+            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
+            'Password must contain uppercase, lowercase, number, and special character'
+        ),
+});
+
+
+const loginSchema = z.object({
+    email: z.string()
+        .trim()
+        .toLowerCase()
+        .email("Invalid email address"),
+    password: z.string()
+        .min(8, "Password must be at least 8 characters long")
+        .max(100, "Password must be at most 100 characters long")
+});
+
+
+module.exports = { signupSchema, loginSchema };

backend/validators/validationRequest.js

@@ -0,0 +1,20 @@
+const validateRequest = (schema) => (req, res, next) => {
+    const result = schema.safeParse(req.body);
+
+    if(!result.success) {
+        return res.status(400).json({
+            success: false,
+            message: 'Validation failed',
+            errors: result.error.issues.map((err) => ({
+                field: err.path.join('.'),
+                message: err.message,
+            })),
+        });
+    }
+
+    req.validated = result.data;
+    req.body = result.data;
+    next();
+}
+
+module.exports = { validateRequest };

package.json

@@ -7,6 +7,8 @@
     "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
+    "test": "vitest",
+    "test:backend": "jasmine spec/**/*.spec.cjs",
     "preview": "vite preview",
     "docker:dev": "docker compose --profile dev up --build",
     "docker:prod": "docker compose --profile prod up -d --build",
@@ -17,7 +19,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
-    "@primer/octicons-react": "^19.15.5",
+    "@primer/octicons-react": "^19.25.0",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",
     "express": "^5.2.1",
@@ -35,6 +37,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jasmine": "^5.1.8",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.23",
@@ -50,10 +55,13 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "express-session": "^1.18.2",
     "globals": "^15.11.0",
-    "jasmine": "^5.9.0",
+    "jasmine": "^5.13.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "jsdom": "^29.1.1",
     "passport": "^0.7.0",
     "passport-local": "^1.0.0",
-    "supertest": "^7.1.4",
-    "vite": "^5.4.10"
+    "supertest": "^7.2.2",
+    "vite": "^5.4.10",
+    "vitest": "^4.1.6"
   }
 }

src/App.tsx

@@ -1,23 +1,27 @@
+import { useLocation } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
 import Router from "./Routes/Router";
-import ThemeWrapper from "./context/ThemeContext";
+
+const FULLSCREEN_ROUTES = ["/signup", "/login"];
 
 function App() {
+  const location = useLocation();
+  const isFullscreen = FULLSCREEN_ROUTES.includes(location.pathname);
+
   return (
-    <ThemeWrapper>
       <div className="relative flex flex-col min-h-screen">
-        <ScrollProgressBar />
+        {!isFullscreen && <ScrollProgressBar />}
 
-        <Navbar />
+        {!isFullscreen && <Navbar />}
 
-        <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
+        <main className={`flex justify-center items-center ${isFullscreen ? "flex-1" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
           <Router />
         </main>
 
-        <Footer />
+        {!isFullscreen && <Footer />}
 
         <Toaster
           position="top-center"
@@ -37,7 +41,6 @@ function App() {
           }}
         />
       </div>
-    </ThemeWrapper>
   );
 }
 

src/components/Features.tsx

@@ -7,42 +7,54 @@ const Features = () => {
       title: 'Activity Analytics',
       description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
       bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600'
+      iconColor: 'text-blue-600',
+      hoverColor: 'hover:bg-blue-400/50 dark:hover:bg-blue-900/30',
+      borderColor: 'hover:border-blue-200 dark:hover:border-blue-700'
     },
     {
       icon: Users,
       title: 'Multi-User Tracking',
       description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
       bgColor: 'bg-green-100',
-      iconColor: 'text-green-600'
+      iconColor: 'text-green-600',
+      hoverColor: 'hover:bg-green-400/50 dark:hover:bg-green-900/30',
+      borderColor: 'hover:border-green-200 dark:hover:border-green-700'
     },
     {
       icon: Search,
       title: 'Smart Search',
       description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
       bgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600'
+      iconColor: 'text-purple-600',
+      hoverColor: 'hover:bg-purple-400/50 dark:hover:bg-purple-900/30',
+      borderColor: 'hover:border-purple-200 dark:hover:border-purple-700'
     },
     {
       icon: Zap,
       title: 'Real-time Updates',
       description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
       bgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600'
+      iconColor: 'text-orange-600',
+      hoverColor: 'hover:bg-orange-400/50 dark:hover:bg-orange-900/30',
+      borderColor: 'hover:border-orange-200 dark:hover:border-orange-700'
     },
     {
       icon: Shield,
       title: 'Privacy First',
       description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
       bgColor: 'bg-red-100',
-      iconColor: 'text-red-600'
+      iconColor: 'text-red-600',
+      hoverColor: 'hover:bg-red-400/50 dark:hover:bg-red-900/30',
+      borderColor: 'hover:border-red-200 dark:hover:border-red-700'
     },
     {
       icon: Globe,
       title: 'Export & Share',
       description: 'Export activity reports and share insights with your team through various formats and integrations.',
       bgColor: 'bg-indigo-100',
-      iconColor: 'text-indigo-600'
+      iconColor: 'text-indigo-600',
+      hoverColor: 'hover:bg-indigo-400/50 dark:hover:bg-indigo-900/30',
+      borderColor: 'hover:border-indigo-200 dark:hover:border-indigo-700'
     }
   ];
 
@@ -60,12 +72,12 @@ const Features = () => {
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
             return (
-              <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl hover:shadow-lg transition-all duration-300">
+              <div key={index} className={`group h-72 w-full bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
                 <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
                   <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
                 </div>
-                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                <h3 className="  text-2xl font-bold text-gray-900 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white transition-colors duration-300">{feature.title}</h3>
+                <p className="text-gray-600 dark:text-gray-300 text-base font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
                   {feature.description}
                 </p>
               </div>