Add Login and Sign-Up pages with OAuth UI

client/src/App.jsx

@@ -23,6 +23,8 @@ const App = () => {
       {false && <HotelReg/>}
       <div className='min-h-[70vh]'>
         <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<Signup />} />
           <Route path='/' element={<Home/>} />
           <Route path='/rooms' element={<AllRooms/>} />
           <Route path='/rooms/:id' element={<RoomDetails/>} />

client/src/auth.css

@@ -0,0 +1,54 @@
+.auth-container {
+  max-width: 400px;
+  margin: 80px auto;
+  padding: 2rem;
+  background: var(--card-bg, #111);
+  border-radius: 12px;
+  text-align: center;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.auth-form input {
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  background: #000;
+  color: #fff;
+}
+
+.auth-form button {
+  padding: 12px;
+  border-radius: 8px;
+  background: #4f46e5;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+.oauth {
+  width: 100%;
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  background: transparent;
+  color: #fff;
+}
+
+.oauth.google {
+  border-color: #ea4335;
+}
+
+.oauth.linkedin {
+  border-color: #0a66c2;
+}
+
+.auth-footer {
+  margin-top: 1rem;
+  font-size: 14px;
+}

client/src/main.jsx

@@ -1,35 +1,48 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-import { BrowserRouter } from 'react-router-dom'
-import { ClerkProvider } from '@clerk/clerk-react'
 import React from "react";
-import { ThemeProvider } from "./contexts/ThemeContext";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { ClerkProvider } from "@clerk/clerk-react";
 
-const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+import App from "./App.jsx";
+import "./index.css";
+import { ThemeProvider } from "./contexts/ThemeContext";
 
-if (!PUBLISHABLE_KEY) {
-  throw new Error('Add your Clerk Publishable Key to the .env file');
-}
+const clerkKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 
 // 🟢 Apply stored theme BEFORE React renders
 const storedTheme = localStorage.getItem("theme");
 if (storedTheme === "dark" || storedTheme === "light") {
   document.documentElement.setAttribute("data-theme", storedTheme);
 } else {
   const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  document.documentElement.setAttribute("data-theme", prefersDark ? "dark" : "light");
+  document.documentElement.setAttribute(
+    "data-theme",
+    prefersDark ? "dark" : "light"
+  );
 }
 
-createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+const Root = () => {
+  const content = (
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  );
+
+  // ✅ Auth enabled only if Clerk key exists
+  return clerkKey ? (
+    <ClerkProvider publishableKey={clerkKey}>
+      {content}
+    </ClerkProvider>
+  ) : (
+    content
+  );
+};
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
     <BrowserRouter>
-      <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
-        <ThemeProvider>
-          <App />
-        </ThemeProvider>
-      </ClerkProvider>
+      <Root />
     </BrowserRouter>
-  </React.StrictMode>
+  </StrictMode>
 );

client/src/pages/Login.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Login = () => {
+  return (
+    <div className="auth-container">
+      <h1>Welcome Back</h1>
+      <p>Login to continue</p>
+
+      <form className="auth-form">
+        <input type="email" placeholder="Email" required />
+        <input type="password" placeholder="Password" required />
+
+        <button type="submit">Login</button>
+      </form>
+
+      <div className="auth-divider">or</div>
+
+      <button className="oauth google">Continue with Google</button>
+      <button className="oauth linkedin">Continue with LinkedIn</button>
+
+      <p className="auth-footer">
+        Don’t have an account? <Link to="/signup">Sign up</Link>
+      </p>
+    </div>
+  );
+};
+
+export default Login;

client/src/pages/Signup.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Signup = () => {
+  return (
+    <div className="auth-container">
+      <h1>Create Account</h1>
+      <p>Sign up to get started</p>
+
+      <form className="auth-form">
+        <input type="text" placeholder="Full Name" required />
+        <input type="email" placeholder="Email" required />
+        <input type="password" placeholder="Password" required />
+
+        <button type="submit">Sign Up</button>
+      </form>
+
+      <div className="auth-divider">or</div>
+
+      <button className="oauth google">Continue with Google</button>
+      <button className="oauth linkedin">Continue with LinkedIn</button>
+
+      <p className="auth-footer">
+        Already have an account? <Link to="/login">Login</Link>
+      </p>
+    </div>
+  );
+};
+
+export default Signup;