feat: add login page, project room management, and user persistence

client/src/App.tsx

@@ -3,14 +3,33 @@ import GitHubCorner from "./components/GitHubCorner"
 import Toast from "./components/toast/Toast"
 import EditorPage from "./pages/EditorPage"
 import HomePage from "./pages/HomePage"
+import LoginPage from "./pages/LoginPage"
+import { useUser } from "./context/UserContext"
+import { Navigate } from "react-router-dom"
+
+const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
+    const { user } = useUser()
+    if (!user) {
+        return <Navigate to="/login" replace />
+    }
+    return children
+}
 
 const App = () => {
     return (
         <>
             <Router>
                 <Routes>
                     <Route path="/" element={<HomePage />} />
-                    <Route path="/editor/:roomId" element={<EditorPage />} />
+                    <Route path="/login" element={<LoginPage />} />
+                    <Route
+                        path="/editor/:roomId"
+                        element={
+                            <ProtectedRoute>
+                                <EditorPage />
+                            </ProtectedRoute>
+                        }
+                    />
                 </Routes>
             </Router>
             <Toast /> {/* Toast component from react-hot-toast */}

client/src/api/index.ts

@@ -0,0 +1,15 @@
+const API_BASE = import.meta.env.VITE_BACKEND_URL || "http://localhost:8000/api"
+
+export async function loginUser(
+    username: string,
+    email: string,
+    password: string,
+) {
+    const res = await fetch(`${API_BASE}/api/user/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, email, password }),
+    })
+    if (!res.ok) throw new Error((await res.json()).error || "Login failed")
+    return (await res.json()).user
+}

client/src/components/chats/ChatInput.tsx

@@ -5,7 +5,7 @@ import { ChatMessage } from "@/types/chat"
 import { SocketEvent } from "@/types/socket"
 import { formatDate } from "@/utils/formateDate"
 import { FormEvent, useRef } from "react"
-import { LuSendHorizonal } from "react-icons/lu"
+import { LuSendHorizontal } from "react-icons/lu"
 import { v4 as uuidV4 } from "uuid"
 
 function ChatInput() {
@@ -48,7 +48,7 @@ function ChatInput() {
                 className="flex items-center justify-center rounded-r-md  bg-primary p-2 text-black"
                 type="submit"
             >
-                <LuSendHorizonal size={24} />
+                <LuSendHorizontal size={24} />
             </button>
         </form>
     )

client/src/components/forms/FormComponent.tsx

@@ -86,11 +86,18 @@ const FormComponent = () => {
             socket.disconnect()
             socket.connect()
         }
-    }, [currentUser, location.state?.redirect, navigate, setStatus, socket, status])
+    }, [
+        currentUser,
+        location.state?.redirect,
+        navigate,
+        setStatus,
+        socket,
+        status,
+    ])
 
     return (
         <div className="flex w-full max-w-[500px] flex-col items-center justify-center gap-4 p-4 sm:w-[500px] sm:p-8">
-            <img src={logo} alt="Logo" className="w-full"/>
+            <img src={logo} alt="Logo" className="w-full" />
             <form onSubmit={joinRoom} className="flex w-full flex-col gap-4">
                 <input
                     type="text"

client/src/context/AppProvider.tsx

@@ -7,26 +7,29 @@ import { SettingContextProvider } from "./SettingContext.jsx"
 import { SocketProvider } from "./SocketContext.jsx"
 import { ViewContextProvider } from "./ViewContext.js"
 import { CopilotContextProvider } from "./CopilotContext.js"
+import { UserProvider } from "./UserContext"
 
 function AppProvider({ children }: { children: ReactNode }) {
     return (
-        <AppContextProvider>
-            <SocketProvider>
-                <SettingContextProvider>
-                    <ViewContextProvider>
-                        <FileContextProvider>
-                            <CopilotContextProvider>
-                                <RunCodeContextProvider>
-                                    <ChatContextProvider>
-                                        {children}
-                                    </ChatContextProvider>
-                                </RunCodeContextProvider>
-                            </CopilotContextProvider>
-                        </FileContextProvider>
-                    </ViewContextProvider>
-                </SettingContextProvider>
-            </SocketProvider>
-        </AppContextProvider>
+        <UserProvider>
+            <AppContextProvider>
+                <SocketProvider>
+                    <SettingContextProvider>
+                        <ViewContextProvider>
+                            <FileContextProvider>
+                                <CopilotContextProvider>
+                                    <RunCodeContextProvider>
+                                        <ChatContextProvider>
+                                            {children}
+                                        </ChatContextProvider>
+                                    </RunCodeContextProvider>
+                                </CopilotContextProvider>
+                            </FileContextProvider>
+                        </ViewContextProvider>
+                    </SettingContextProvider>
+                </SocketProvider>
+            </AppContextProvider>
+        </UserProvider>
     )
 }
 

client/src/context/UserContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useState } from "react"
+import { IUserDTO } from "../types/user"
+
+interface UserContextType {
+    user: IUserDTO | null
+    setUser: (user: IUserDTO | null) => void
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined)
+
+function getInitialUser(): IUserDTO | null {
+    const stored = localStorage.getItem("user")
+    if (stored) {
+        try {
+            return JSON.parse(stored)
+        } catch {
+            return null
+        }
+    }
+    return null
+}
+
+export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
+    children,
+}) => {
+    const [user, _setUser] = useState<IUserDTO | null>(getInitialUser())
+    const setUser = (user: IUserDTO | null) => {
+        _setUser(user)
+        if (user) {
+            localStorage.setItem("user", JSON.stringify(user))
+        } else {
+            localStorage.removeItem("user")
+        }
+    }
+    return (
+        <UserContext.Provider value={{ user, setUser }}>
+            {children}
+        </UserContext.Provider>
+    )
+}
+
+export function useUser() {
+    const ctx = useContext(UserContext)
+    if (!ctx) throw new Error("useUser must be used within UserProvider")
+    return ctx
+}
+
+export default UserContext

client/src/hooks/useLogin.ts

@@ -0,0 +1,25 @@
+import { useState } from "react"
+import { loginUser } from "../api"
+import { useUser } from "../context/UserContext"
+
+export function useLogin() {
+    const { setUser } = useUser()
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    async function login(username: string, email: string, password: string) {
+        setLoading(true)
+        setError(null)
+        try {
+            const user = await loginUser(username, email, password)
+            setUser(user)
+        } catch (err: any) {
+            setError(err.message)
+            console.error("Login error:", err)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return { login, loading, error }
+}

client/src/pages/LoginPage.tsx

@@ -0,0 +1,135 @@
+import type React from "react"
+
+import { useState } from "react"
+import { useLogin } from "../hooks/useLogin"
+import { useNavigate } from "react-router-dom"
+
+export default function LoginPage() {
+  const { login, loading, error } = useLogin()
+  const [formData, setFormData] = useState({
+    username: "",
+    email: "",
+    password: "",
+  })
+  const navigate = useNavigate()
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    console.log("form data", formData)
+    await login(formData.username, formData.email, formData.password)
+    navigate("/")
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-900 mb-2">Welcome back</h2>
+          <p className="text-gray-600">Sign in to your account to continue</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+                Username
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                required
+                value={formData.username}
+                onChange={handleInputChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-gray-900"
+                placeholder="Enter your username"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                value={formData.email}
+                onChange={handleInputChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-gray-900"
+                placeholder="Enter your email"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                value={formData.password}
+                onChange={handleInputChange}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-gray-900"
+                placeholder="Enter your password"
+              />
+            </div>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-md p-3">
+              <p className="text-sm text-red-600">{error}</p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {loading ? (
+              <div className="flex items-center">
+                <svg
+                  className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                Signing in...
+              </div>
+            ) : (
+              "Sign in"
+            )}
+          </button>
+        </form>
+
+        <div className="text-center">
+          <p className="text-sm text-gray-600">
+            Don't have an account?{" "}
+            <a href="/signup" className="font-medium text-blue-600 hover:text-blue-500 transition-colors">
+              Sign up here
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/types/user.ts

@@ -7,6 +7,14 @@ interface User {
     username: string
     roomId: string
 }
+export interface IUserDTO {
+    _id: string
+    username: string
+    email: string
+    avatarUrl?: string
+    createdAt: string
+    updatedAt: string
+}
 
 interface RemoteUser extends User {
     status: USER_CONNECTION_STATUS