frontend login forms

client/app/(auth)/login/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "@/app/hooks/useAuth";
+import { Input } from "../../component/ui/input";
+import { Button } from "../../component/ui/button";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage() {
+  const { setToken } = useAuth();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get("email");
+    const password = formData.get("password");
+
+    try {
+      const response = await fetch("http://localhost:3000/api/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Invalid credentials");
+      }
+
+      const data = await response.json();
+      console.log(data);
+      setToken(data.access_token);
+      router.push("/dashboard");
+      router.refresh();
+    } catch (err) {
+      setError("Invalid email or password");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold">Welcome back</h2>
+          <p className="mt-2 text-gray-600 dark:text-gray-400">
+            Sign in to your account
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          {error && (
+            <div className="p-3 text-sm text-red-500 bg-red-100 rounded-lg dark:bg-red-900/30">
+              {error}
+            </div>
+          )}
+
+          <Input
+            label="Email address"
+            name="email"
+            type="email"
+            required
+            placeholder="Enter your email"
+          />
+
+          <Input
+            label="Password"
+            name="password"
+            type="password"
+            required
+            placeholder="Enter your password"
+          />
+
+          <Button type="submit" isLoading={isLoading}>
+            Sign in
+          </Button>
+
+          <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+            Dont have an account?{" "}
+            <Link
+              href="/register"
+              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+            >
+              Sign up
+            </Link>
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+}

client/app/(auth)/register/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { Input } from "../../component/ui/input";
+import { Button } from "../../component/ui/button";
+import Link from "next/link";
+
+export default function RegisterPage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get("email");
+    const password = formData.get("password");
+    const firstName = formData.get("firstName");
+    const lastName = formData.get("lastName");
+
+    try {
+      const response = await fetch("http://localhost:3000/api/auth/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password, firstName, lastName }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Registration failed");
+      }
+
+      const data = await response.json();
+      localStorage.setItem("token", data.access_token);
+      window.location.href = "/dashboard";
+    } catch (err) {
+      setError("Registration failed. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold">Create an account</h2>
+          <p className="mt-2 text-gray-600 dark:text-gray-400">
+            Get started with your account
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          {error && (
+            <div className="p-3 text-sm text-red-500 bg-red-100 rounded-lg dark:bg-red-900/30">
+              {error}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <Input
+              label="First name"
+              name="firstName"
+              required
+              placeholder="Enter your first name"
+            />
+            <Input
+              label="Last name"
+              name="lastName"
+              required
+              placeholder="Enter your last name"
+            />
+          </div>
+
+          <Input
+            label="Email address"
+            name="email"
+            type="email"
+            required
+            placeholder="Enter your email"
+          />
+
+          <Input
+            label="Password"
+            name="password"
+            type="password"
+            required
+            placeholder="Create a password"
+          />
+
+          <Button type="submit" isLoading={isLoading}>
+            Create account
+          </Button>
+
+          <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+            Already have an account?{" "}
+            <Link
+              href="/login"
+              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+            >
+              Sign in
+            </Link>
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+}

client/app/component/ui/button.tsx

@@ -0,0 +1,49 @@
+// components/ui/input.tsx
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Input({ label, error, ...props }: InputProps) {
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+      )}
+      <input
+        {...props}
+        className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500
+        dark:bg-gray-800 dark:border-gray-700 dark:text-white ${
+          error ? "border-red-500" : "border-gray-300"
+        }`}
+      />
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}
+
+// components/ui/button.tsx
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isLoading?: boolean;
+}
+
+export function Button({ children, isLoading, ...props }: ButtonProps) {
+  return (
+    <button
+      {...props}
+      className={`w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg
+      hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+      disabled:opacity-50 disabled:cursor-not-allowed ${props.className || ""}`}
+    >
+      {isLoading ? (
+        <div className="flex items-center justify-center">
+          <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+        </div>
+      ) : (
+        children
+      )}
+    </button>
+  );
+}

client/app/component/ui/input.tsx

@@ -0,0 +1,24 @@
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Input({ label, error, ...props }: InputProps) {
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+      )}
+      <input
+        {...props}
+        className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500
+        dark:bg-gray-800 dark:border-gray-700 dark:text-white ${
+          error ? "border-red-500" : "border-gray-300"
+        }`}
+      />
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}

client/app/dashboard/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useUser } from "../hooks/useUser";
+import { useAuth } from "../hooks/useAuth";
+export default function DashboardPage() {
+  const router = useRouter();
+  const { token } = useAuth();
+  const user = useUser();
+
+  useEffect(() => {
+    if (!token) {
+      router.push("/login");
+    }
+  }, [token, router]);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+  return (
+    <div className="min-h-screen p-4">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-2xl font-bold">Welcome, {user.firstName}!</h1>
+        <p>Email: {user.email}</p>
+        <p>Role: {user.role}</p>
+      </div>
+    </div>
+  );
+}

client/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

client/app/hooks/useAuth.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+}
+
+interface AuthStore {
+  token: string | null;
+  user: User | null;
+  setToken: (token: string | null) => void;
+  setUser: (user: User | null) => void;
+  logout: () => void;
+}
+
+export const useAuth = create<AuthStore>()(
+  persist(
+    (set) => ({
+      token: null,
+      user: null,
+      setToken: (token) => set({ token }),
+      setUser: (user) => set({ user }),
+      logout: () => set({ token: null, user: null }),
+    }),
+    {
+      name: "auth-storage",
+    },
+  ),
+);

client/app/hooks/useUser.ts

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { useAuth } from "./useAuth";
+
+export const useUser = () => {
+  const { token, user, setUser } = useAuth();
+  console.log(user);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      if (!token || user) return;
+
+      try {
+        const response = await fetch("http://localhost:3000/api/users/me", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) throw new Error("Failed to fetch user");
+
+        const userData = await response.json();
+        setUser(userData);
+      } catch (error) {
+        console.error("Error fetching user:", error);
+        useAuth.getState().logout();
+      }
+    };
+
+    fetchUser();
+  }, [token, user, setUser]);
+
+  return user;
+};

client/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

client/app/page.tsx

@@ -0,0 +1,6 @@
+// import Image from "next/image";
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/login");
+}