user profile page

AceJobAgency.client/src/components/LoginView.tsx

@@ -1,7 +1,46 @@
 import { Input, Checkbox, Button, Link } from "@heroui/react";
 import { IconMail, IconLock } from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import http, { login } from "../http";
 
 export default function LoginView({ onSignup }: { onSignup: () => void }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const validateFields = () => {
+    if (!email || !password) {
+      toast.error("Both email and password are required.");
+      return false;
+    }
+    return true;
+  };
+
+  const handleLogin = async () => {
+    if (!validateFields()) return;
+
+    const loginRequest = {
+      email,
+      password,
+    };
+
+    try {
+      const response = await http.post("/User/login", loginRequest);
+
+      if (response.status !== 200) {
+        throw new Error("Login failed");
+      }
+
+      const { token } = response.data;
+      login(token);
+    } catch (error) {
+      toast.error(
+        (error as any).response?.data ||
+          "Something went wrong! Please try again."
+      );
+    }
+  };
+
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col">
@@ -11,8 +50,20 @@ export default function LoginView({ onSignup }: { onSignup: () => void }) {
         </p>
       </div>
       <div className="flex flex-col gap-2">
-        <Input endContent={<IconMail />} label="Email" />
-        <Input endContent={<IconLock />} label="Password" type="password" />
+        <Input
+          endContent={<IconMail />}
+          label="Email"
+          type="email"
+          value={email}
+          onValueChange={setEmail}
+        />
+        <Input
+          endContent={<IconLock />}
+          label="Password"
+          type="password"
+          value={password}
+          onValueChange={setPassword}
+        />
       </div>
       <div className="flex py-2 px-1 justify-between">
         <Checkbox
@@ -27,18 +78,12 @@ export default function LoginView({ onSignup }: { onSignup: () => void }) {
         </Link>
       </div>
       <div className="flex flex-col gap-4 w-full">
-        <Button color="primary" className="w-full">
+        <Button color="primary" className="w-full" onPress={handleLogin}>
           Login
         </Button>
         <div className="flex flex-row gap-2 w-full justify-center *:my-auto">
           <p className="text-sm">Don't have an account?</p>
-          <Link
-            color="primary"
-            onPress={() => {
-              onSignup();
-            }}
-            className="text-sm"
-          >
+          <Link color="primary" onPress={onSignup} className="text-sm">
             Sign up
           </Link>
         </div>