diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 18dafe3..ae6eeec 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -159,7 +159,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1386,7 +1385,6 @@ "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz", "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==", "license": "MIT", - "peer": true, "engines": { "node": "^14.21.3 || >=16" }, @@ -1470,7 +1468,6 @@ "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.2.tgz", "integrity": "sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==", "license": "MIT", - "peer": true, "dependencies": { "@octokit/auth-token": "^4.0.0", "@octokit/graphql": "^7.1.0", @@ -3022,7 +3019,6 @@ "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3324,7 +3320,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -5635,7 +5630,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -5837,7 +5831,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -5847,7 +5840,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -6901,7 +6893,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz", "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -7206,7 +7197,6 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index b4b6503..e03b1c1 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,28 +1,26 @@ import { useState, useEffect } from "react"; import { Button } from "../components/ui/button.js"; import { useNavigate } from "react-router-dom"; -import { Menu, X, PlusSquare, LogIn, LogOut } from "lucide-react"; +import { Menu, X } from "lucide-react"; import axios from "axios"; function Header() { const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [user, setUser] = useState<{ _id: string; name: string } | null>(null); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); const navigate = useNavigate(); - // Scroll effect + // Scroll shadow effect useEffect(() => { - const handleScroll = () => setIsScrolled(window.scrollY > 20); + const handleScroll = () => setIsScrolled(window.scrollY > 10); window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); - // Fetch authenticated user + // Fetch logged-in user useEffect(() => { const token = localStorage.getItem("token"); if (!token) return; - const fetchUser = async () => { try { const res = await axios.get("http://localhost:3000/api/auth/me", { @@ -30,111 +28,146 @@ function Header() { }); setUser(res.data.user); } catch { + localStorage.removeItem("token"); setUser(null); - localStorage.removeItem("token"); // remove invalid token } }; - fetchUser(); }, []); + // Scroll to section smoothly const scrollToSection = (id: string) => { - const element = document.getElementById(id); - if (element) { - element.scrollIntoView({ behavior: "smooth" }); + const el = document.getElementById(id); + if (el) { + el.scrollIntoView({ behavior: "smooth" }); setIsMobileMenuOpen(false); } }; - // Navigate to a separate page which provides actions (join/create/logout) const handleJoinNow = () => { - if (!user) { - navigate("/signin"); - } else { - navigate("/room-actions"); - } + if (!user) navigate("/signin"); + else navigate("/room-actions"); }; const handleLogout = () => { localStorage.removeItem("token"); setUser(null); - setIsDropdownOpen(false); navigate("/"); }; return ( - - - - PeerCall - + + {/* Logo aligned to extreme left */} + + PeerCall + - {/* Desktop Navigation */} - - scrollToSection("features")} - className="text-gray-900 hover:text-green-600 transition-colors font-medium" - > - Features - - scrollToSection("tech-stack")} - className="text-gray-900 hover:text-green-600 transition-colors font-medium" - > - Tech Stack - - - - Join Now - - - + {/* Desktop Navigation */} + + scrollToSection("features")} + className="text-gray-800 hover:text-green-600 transition-colors font-medium" + > + Features + + scrollToSection("tech-stack")} + className="text-gray-800 hover:text-green-600 transition-colors font-medium" + > + Tech Stack + + + {user ? ( + + + Hi, {user.name.split(" ")[0]} + + + Logout + + + ) : ( + + Join Now + + )} + + + {/* Mobile Menu Button */} + setIsMobileMenuOpen(!isMobileMenuOpen)} + aria-label="Toggle menu" + > + {isMobileMenuOpen ? : } + + - {/* Mobile Menu Button */} + + {/* Mobile Menu */} + + setIsMobileMenuOpen(!isMobileMenuOpen)} - aria-label="Toggle menu" + onClick={() => scrollToSection("features")} + className="text-gray-800 hover:text-green-600 text-lg text-left font-medium" > - {isMobileMenuOpen ? : } + Features + + scrollToSection("tech-stack")} + className="text-gray-800 hover:text-green-600 text-lg text-left font-medium" + > + Tech Stack - - {/* Mobile Navigation */} - {isMobileMenuOpen && ( - - scrollToSection("features")} - className="block w-full text-left text-gray-900 hover:text-green-600 transition-colors font-medium py-2" - > - Features - - scrollToSection("tech-stack")} - className="block w-full text-left text-gray-900 hover:text-green-600 transition-colors font-medium py-2" - > - Tech Stack - + {user ? ( + <> + + Hello, {user.name.split(" ")[0]} + + + Logout + + > + ) : ( Join Now - {/* mobile: action buttons moved to /room-actions page */} - - )} - + )} + + ); } diff --git a/frontend/src/pages/Signup.tsx b/frontend/src/pages/Signup.tsx index 5541c3c..bb1fc90 100644 --- a/frontend/src/pages/Signup.tsx +++ b/frontend/src/pages/Signup.tsx @@ -23,6 +23,8 @@ interface SignUpFormData { const SignUp = () => { const [isLoading, setIsLoading] = useState(false); + const [serverMessage, setServerMessage] = useState(null); + const [isError, setIsError] = useState(false); const navigate = useNavigate(); const { @@ -42,13 +44,16 @@ const SignUp = () => { description: "Passwords do not match", variant: "destructive", }); + // Removed duplicated inline error message for password mismatch + // setServerMessage("Passwords do not match"); + // setIsError(true); return; } setIsLoading(true); + setServerMessage(null); try { const name = data.email.split("@")[0]; - const response = await axios.post( "http://localhost:3000/api/auth/signup", { @@ -67,29 +72,35 @@ const SignUp = () => { response.data.message || "Account created successfully. Welcome!", }); + setServerMessage("Account created successfully! Redirecting..."); + setIsError(false); + if (response.data.token) { localStorage.setItem("token", response.data.token); } reset(); - navigate("/signin"); + setTimeout(() => navigate("/signin"), 1500); } catch (error: any) { + const msg = + error.response?.data?.message || + "Registration failed. Please try again."; toast({ title: "Error", - description: - error.response?.data?.message || - "Registration failed. Please try again.", + description: msg, variant: "destructive", }); + setServerMessage(msg); + setIsError(true); } finally { setIsLoading(false); } }; return ( - - - + + + PeerCall @@ -98,7 +109,20 @@ const SignUp = () => { - + + {/* Message Area (prevents layout shift) */} + {serverMessage && ( + + {serverMessage} + + )} + { @@ -159,7 +183,7 @@ const SignUp = () => { - + Already have an account?{" "}