Origin/implement login page/ login signup pages components

frontend/src/app/(authenticated)/layout.tsx

@@ -1,43 +1,50 @@
-"use client"
-
-import Navbar from "@/components/layouts/navbar"
-import Sidebar from "@/components/layouts/sidebar"
-import { Toaster } from "@/components/ui/toaster"
-import React, { ReactNode, useState } from "react"
-import {
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-} from "@tanstack/react-query"
+// components/layouts/authenticated-layout.tsx
+
+import Navbar from "@/components/layouts/navbar";
+import Sidebar from "@/components/layouts/sidebar";
+import { Toaster } from "@/components/ui/toaster";
+import React, { ReactNode, useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 interface AuthenticatedLayoutProps {
-  children: ReactNode
+  children: ReactNode;
 }
 
 export default function AuthenticatedLayout({
   children,
 }: AuthenticatedLayoutProps) {
-  const queryClient = new QueryClient()
+  const queryClient = new QueryClient();
 
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true)
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
   const toggleSidebar = () => {
-    setIsSidebarOpen((isSidebarOpen) => !isSidebarOpen)
-  }
+    setIsSidebarOpen((isSidebarOpen) => !isSidebarOpen);
+  };
 
   return (
     <QueryClientProvider client={queryClient}>
       <div className="flex flex-row w-full min-h-[100vh]">
+        {/* Sidebar */}
         <Sidebar
-          className={` ${isSidebarOpen ? "min-w-[280px] w-[280px]" : "min-w-0 w-0"} overflow-x-hidden transition-width duration-300 ease-in-out`}
+          className={`${
+            isSidebarOpen ? "min-w-[280px] w-[280px]" : "min-w-0 w-0"
+          } overflow-x-hidden transition-width duration-300 ease-in-out`}
         />
+
+        {/* Main Content */}
         <div className="w-full">
+          {/* Navbar */}
           <Navbar toggleSidebar={toggleSidebar} />
+
+          {/* Main Content Wrapper */}
           <div className="w-full h-full max-h-[90vh] flex justify-center items-center flex-col relative">
             <div className="w-5/6 h-full relative">{children}</div>
           </div>
         </div>
+
+        {/* Toaster */}
         <Toaster />
       </div>
     </QueryClientProvider>
-  )
+  );
 }

frontend/src/app/login/page.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import React, { useState } from "react";
+import axios from "axios";
+import { toast } from "react-hot-toast";
+import LoginForm from "../components/form/loginForm";
+import PageLayout from "../components/layout/pageLayout";
+import InputField from "../components/ui/inputField";
+
+export default function LoginPage() {
+  const [loading, setLoading] = useState(false);
+
+  const onLogin = async (user) => {
+    try {
+      setLoading(true);
+      const response = await axios.post("/api/users/login", user);
+      console.log("Login success", response.data);
+      toast.success("Login success");
+      // router.push("/profile");
+    } catch (error) {
+      console.log("Login failed", error.message);
+      toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <PageLayout title={loading ? "Processing" : "Login"} loading={loading}>
+      <LoginForm onLogin={onLogin} />
+      <InputField
+        id="email"
+        type="text"
+        value={user.email}
+        onChange={(value) => setUser({ ...user, email: value })}
+        placeholder="email"
+      />
+      <InputField
+        id="password"
+        type="password"
+        value={user.password}
+        onChange={(value) => setUser({ ...user, password: value })}
+        placeholder="password"
+      />
+      <button
+        onClick={onLogin}
+        className="p-2 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:border-gray-600"
+      >
+        Login
+      </button>
+      <Link href="/signup">Visit Signup page</Link>
+    </PageLayout>
+  );
+}

frontend/src/app/signup/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import React, { useState } from "react";
+import axios from "axios";
+import { toast } from "react-hot-toast";
+import SignupForm from "../components/form/signupForm";
+import PageLayout from "../components/layout/pageLayout";
+import InputField from "../components/ui/inputField";
+
+export default function SignupPage() {
+  const [loading, setLoading] = useState(false);
+
+  const onSignup = async (user) => {
+    try {
+      setLoading(true);
+      const response = await axios.post("/api/users/signup", user);
+      console.log("Signup success", response.data);
+      toast.success("Signup success");
+      // router.push("/login");
+    } catch (error) {
+      console.log("Signup failed", error.message);
+      toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <PageLayout title={loading ? "Processing" : "Signup"} loading={loading}>
+      <SignupForm onSignup={onSignup} />
+      <Link href="/login">Visit login page</Link>
+    </PageLayout>
+  );
+}

frontend/src/components/ui/inputField.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const InputField = ({ id, type, value, onChange, placeholder }) => {
+  return (
+    <div>
+      <label htmlFor={id}>{id}</label>
+      <input
+        className="p-2 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:border-gray-600 text-black"
+        id={id}
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default InputField;