Merge pull request #42 from indrasuthar07/adding-login-page

feat: adding user login page ui(with error handling)

Author: 04shubham7

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import SignUp from "./pages/Signup";
+import SignIn from "./pages/Signin";
 const queryClient = new QueryClient();
 
 const App = () => (
@@ -14,6 +15,7 @@ const App = () => (
         <Routes>
           <Route path="/" element={<Index />} />
           <Route path="/signup" element={<SignUp />} />
+          <Route path="/signin" element={<SignIn />} />
         </Routes>
       </BrowserRouter>
     </TooltipProvider>

frontend/src/pages/Signin.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router-dom";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card";
+import { InputField } from "../components/InputField";
+import { toast } from "../hooks/use-toast";
+import { mockLogin, SignInData } from "../lib/api";
+import { Loader2 } from "lucide-react";
+
+const SignIn = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<SignInData>();
+
+  const onSubmit = async (data: SignInData) => {
+    setIsLoading(true);
+    try {
+      const response = await mockLogin(data);
+      toast({
+        title: "Welcome back!",
+        description: response.message,
+      });
+      reset();
+      // Navigate to dashboard or home page here
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Login failed. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 py-8">
+
+      {/* Background floating blobs */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute -top-32 -left-32 w-96 h-96 bg-blue-400 rounded-full opacity-30 bg-gradient-to-br from-blue-400 via-blue-100 to-blue-400 blur-3xl animate-blob"></div>
+        <div className="absolute top-0 -right-32 w-96 h-96 bg-blue-400 rounded-full opacity-30 blur-3xl animate-blob animation-delay-2000"></div>
+        <div className="absolute bottom-0 left-1/4 w-96 h-96 bg-blue-400 rounded-full opacity-30 blur-2xl animate-blob animation-delay-4000"></div>
+      </div>
+
+      {/* Glassmorphic Card */}
+      <Card className="w-full max-w-md bg-transparent backdrop-blur-md border border-white/30 shadow-lg rounded-xl p-6">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-3xl font-extrabold text-blue-700">
+            UniLoot
+          </CardTitle>
+          <CardDescription className="text-gray-700 text-base">
+            Sign in to your account
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <InputField
+              label="Email"
+              id="email"
+              type="email"
+              placeholder="[email protected]"
+              {...register("email", {
+                required: "Email is required",
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: "Invalid email address",
+                },
+              })}
+              error={errors.email?.message}
+            />
+
+            <InputField
+              label="Password"
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              {...register("password", {
+                required: "Password is required",
+                minLength: {
+                  value: 6,
+                  message: "Password must be at least 6 characters",
+                },
+              })}
+              error={errors.password?.message}
+            />
+
+            <Button
+              type="submit"
+              className="w-full bg-blue-700 text-white hover:bg-blue-800 transition-all rounded-lg py-3 font-semibold flex justify-center items-center gap-2"
+              size="lg"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                "Sign In"
+              )}
+            </Button>
+          </form>
+        </CardContent>
+
+        <CardFooter className="flex flex-col space-y-2">
+          <div className="text-sm text-gray-700 text-center">
+            Don't have an account?{" "}
+            <Link
+              to="/signup"
+              className="text-blue-700 hover:text-blue-800 hover:underline font-medium transition-colors"
+            >
+              Sign Up
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default SignIn;