Merge branch 'main' into feat/socket

ADARSHsri2004 · ADARSHsri2004 · commit 6397d178f88f · 2025-10-17T15:41:15.000+05:30
diff --git a/client/src/components/Canvas.jsx b/client/src/components/Canvas.jsx
@@ -11,6 +11,8 @@ export const Canvas = () => {
     const [activeColor, setActiveColor] = useState("#000000");
     const [strokeWidth, setStrokeWidth] = useState(3);
     const [isDrawing, setIsDrawing] = useState(false);
+    const [isCanvasFocused, setIsCanvasFocused] = useState(false); // 👈 new state
+
     const [roomId, setRoomId] = useState("");
     const [joined, setJoined] = useState(false);
     const [socket, setSocket] = useState(null);
@@ -58,6 +60,38 @@ export const Canvas = () => {
         return () => window.removeEventListener("resize", handleResize);
     }, []);
 
+    // 🎹 Keyboard shortcut handling
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!isCanvasFocused) return; // only when canvas focused
+
+            if (e.key === "p" || e.key === "P" || e.key === "1") {
+                handleToolChange("pen");
+            } else if (e.key === "e" || e.key === "E" || e.key === "2") {
+                handleToolChange("eraser");
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isCanvasFocused]);
+
+    // 🎹 Keyboard shortcut handling
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!isCanvasFocused) return; // only when canvas focused
+
+            if (e.key === "p" || e.key === "P" || e.key === "1") {
+                handleToolChange("pen");
+            } else if (e.key === "e" || e.key === "E" || e.key === "2") {
+                handleToolChange("eraser");
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isCanvasFocused]);
+
     // Drawing functions
     const startDrawing = (e) => {
         if (!joined) {
@@ -143,11 +177,14 @@ export const Canvas = () => {
 
             <canvas
                 ref={canvasRef}
+                tabIndex={0} // 👈 allows focus
+                onFocus={() => setIsCanvasFocused(true)} // 👈 activate shortcuts
+                onBlur={() => setIsCanvasFocused(false)} // 👈 deactivate shortcuts
                 onMouseDown={startDrawing}
                 onMouseMove={draw}
                 onMouseUp={stopDrawing}
                 onMouseLeave={stopDrawing}
-                className="cursor-crosshair"
+                className="cursor-crosshair focus:outline-2 focus:outline-primary"
             />
 
             {!joined && (
diff --git a/client/src/components/Toolbar.jsx b/client/src/components/Toolbar.jsx
@@ -1,52 +1,62 @@
-import { MousePointer2, Pen, Eraser, Square, Circle, Minus, Trash2 } from "lucide-react";
+import {
+  MousePointer2,
+  Pen,
+  Eraser,
+  Square,
+  Circle,
+  Minus,
+  Trash2,
+} from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./ui/Button";
 import { Separator } from "./ui/Separator";
 
 export const Toolbar = ({ activeTool, onToolChange, onClear }) => {
-    const tools = [
-        { type: "select", icon: MousePointer2 },
-        { type: "pen", icon: Pen },
-        { type: "eraser", icon: Eraser },
-        { type: "rectangle", icon: Square },
-        { type: "circle", icon: Circle },
-        { type: "line", icon: Minus },
-    ];
+  const tools = [
+    { type: "select", icon: MousePointer2 },
+    { type: "pen", icon: Pen },
+    { type: "eraser", icon: Eraser },
+    { type: "rectangle", icon: Square },
+    { type: "circle", icon: Circle },
+    { type: "line", icon: Minus },
+  ];
 
-    return (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 z-50">
-            <div className="bg-toolbar border border-toolbar-border rounded-2xl shadow-xl backdrop-blur-sm p-2 flex items-center gap-2">
-                {tools.map((tool) => {
-                    const Icon = tool.icon;
-                    return (
-                        <Button
-                            key={tool.type}
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => onToolChange(tool.type)}
-                            className={cn(
-                                "h-10 w-10 transition-all duration-200 hover:bg-secondary",
-                                activeTool === tool.type && "bg-primary text-primary-foreground hover:bg-primary/90"
-                            )}
-                            aria-label={tool.type}
-                        >
-                            <Icon className="h-5 w-5" />
-                        </Button>
-                    );
-                })}
+  return (
+    <div className="fixed top-6 left-1/2 -translate-x-1/2 z-50">
+      <div className="bg-toolbar border border-toolbar-border rounded-2xl shadow-xl backdrop-blur-sm p-2 flex items-center gap-2">
+        {tools.map((tool) => {
+          const Icon = tool.icon;
+          return (
+            <Button
+              key={tool.type}
+              variant="ghost"
+              size="icon"
+              onClick={() => onToolChange(tool.type)}
+              className={cn(
+                "h-10 w-10 transition-all duration-200 hover:bg-secondary",
+                activeTool === tool.type
+                  ? "bg-primary text-primary-foreground ring-2 ring-offset-2 ring-primary"
+                  : ""
+              )}
+              aria-label={tool.type}
+            >
+              <Icon className="h-5 w-5" />
+            </Button>
+          );
+        })}
 
-                <Separator orientation="vertical" className="h-8 mx-1" />
+        <Separator orientation="vertical" className="h-8 mx-1" />
 
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={onClear}
-                    className="h-10 w-10 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive"
-                    aria-label="Clear canvas"
-                >
-                    <Trash2 className="h-5 w-5" />
-                </Button>
-            </div>
-        </div>
-    );
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClear}
+          className="h-10 w-10 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive"
+          aria-label="Clear canvas"
+        >
+          <Trash2 className="h-5 w-5" />
+        </Button>
+      </div>
+    </div>
+  );
 };
diff --git a/server/controllers/authController.js b/server/controllers/authController.js
@@ -0,0 +1,38 @@
+const bcrypt = require("bcrypt");
+const jwt = require("jsonwebtoken");
+
+const users = [];
+const tokenBlacklist = [];
+
+const JWT_SECRET = process.env.JWT_SECRET || "your_jwt_secret";
+const JWT_EXPIRES_IN = "1h";
+
+exports.registerUser = async (req, res) => {
+    const { email, password } = req.body;
+    if (users.find(user => user.email === email)) {
+        return res.status(400).json({ message: "User already exists" });
+    }
+    const hash = await bcrypt.hash(password, 10);
+    users.push({ email, password: hash });
+    res.json({ message: "User registered" });
+}
+exports.loginUser = async (req, res) => {
+    const { email, password } = req.body;
+    const user = users.find((u) => u.email === email);
+    if (!user) return res.status(400).json({ message: "Invalid credentials" });
+
+    const match = await bcrypt.compare(password, user.password);
+    if (!match) return res.status(400).json({ message: "Invalid credentials" });
+
+    const token = jwt.sign({ email }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
+    res.json({ token });
+}
+exports.logoutUser = (req, res) => {
+    const { token } = req.body;
+    tokenBlacklist.push(token);
+    res.json({ message: "Logged out" });
+}
+
+exports.getUsers =() => users;
+
+exports.getBlacklist =() => tokenBlacklist;
diff --git a/server/index.js b/server/index.js
@@ -4,9 +4,24 @@ const { Server } = require("socket.io");
 const cors = require("cors");
 
 const app = express();
+const PORT = process.env.PORT || 3000;
+
+// Middleware
 app.use(express.json());
 app.use(cors());
 
+// Routes
+const authRoutes = require("./routes/authRoutes");
+app.use("/api/auth", authRoutes);
+
+// Root
+app.get("/", (req, res) => {
+  res.send("Collab Canvas server is running!");
+});
+
+app.listen(PORT, () => {
+  console.log(`Server listening on port ${PORT}`);
+
 const PORT = process.env.PORT || 3000;
 
 // Basic root route
diff --git a/server/middleware/authMiddleware.js b/server/middleware/authMiddleware.js
@@ -0,0 +1,23 @@
+const jwt = require("jsonwebtoken");
+const { getBlacklist } = require("../controllers/authController");
+
+const JWT_SECRET = process.env.JWT_SECRET || "your_jwt_secret";
+
+exports.authMiddleware = (req, res, next) => {
+    const auth = req.headers.authorization;
+    if (!auth) return res.status(401).json({ message: "No token" });
+
+    const token = auth.split(" ")[1];
+    if (tokenBlacklist.includes(token)) {
+        return res.status(403).json({ message: "Logged out" });
+    }
+
+    try {
+        const payload = jwt.verify(token, JWT_SECRET);
+        req.user = payload;
+        next();
+    } catch {
+        res.status(403).json({ message: "Invalid token" });
+    }
+}
+ 
diff --git a/server/routes/authRoutes.js b/server/routes/authRoutes.js
@@ -0,0 +1,13 @@
+const express = require("express");
+const router = express.Router();
+const { registerUser, loginUser, logoutUser } = require("../controllers/authController");
+const { authMiddleware } = require("../middleware/authMiddleware");
+
+router.post("/signup", registerUser);
+router.post("/login", loginUser);
+router.post("/logout", logoutUser);
+router.get("/me", authMiddleware, (req, res) => {
+  res.json({ user: req.user });
+});
+
+module.exports = router;
