Major: Added Authentication Functionality, interfaces with backend;

Added new styles to HomePage & VideoPage;
Added AuthContext to persist logged_in status;

frontend/src/components/Auth/LoginForm.tsx

@@ -1 +1,127 @@
-// login.html
+import React, { useState } from "react";
+import Input from "../Layout/Input";
+import Button from "../Layout/Button";
+import { useAuth } from "../../context/AuthContext";
+
+interface LoginFormData {
+  username: string;
+  password: string;
+}
+
+interface FormErrors {
+  username?: string;
+  password?: string;
+  general?: string; // For general authentication errors
+}
+
+const LoginForm: React.FC = () => {
+  const { setIsLoggedIn } = useAuth();
+
+  const [formData, setFormData] = useState<LoginFormData>({
+    username: "",
+    password: "",
+  });
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    // Check for empty fields
+    Object.keys(formData).forEach((key) => {
+      if (!formData[key as keyof LoginFormData]) {
+        newErrors[key as keyof FormErrors] = "This field is required";
+      }
+    });
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (validateForm()) {
+      try {
+        const response = await fetch("/api/login", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+          body: JSON.stringify(formData),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.message || "Login failed");
+        }
+
+        if (data.logged_in) {
+          //TODO: Handle successful login (e.g., redirect to home page)
+          console.log("Login successful");
+          setIsLoggedIn(true);
+          window.location.reload();
+        } else {
+          // Handle authentication errors
+          if (data.errors) {
+            setErrors({
+              general: "Invalid username or password",
+            });
+          }
+        }
+      } catch (error) {
+        console.error("Login error:", error);
+        setErrors({
+          general: "An error occurred during login. Please try again.",
+        });
+      }
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="login-form h-[100%] flex flex-col h-full justify-evenly items-center"
+    >
+      {errors.general && (
+        <p className="text-red-500 text-sm text-center">{errors.general}</p>
+      )}
+
+      {errors.username && (
+        <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
+      )}
+      <Input
+        name="username"
+        placeholder="Username"
+        value={formData.username}
+        onChange={handleInputChange}
+        extraClasses={`${errors.username ? "border-red-500" : ""}`}
+      />
+
+      {errors.password && (
+        <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
+      )}
+      <Input
+        name="password"
+        type="password"
+        placeholder="Password"
+        value={formData.password}
+        onChange={handleInputChange}
+        extraClasses={`${errors.password ? "border-red-500" : ""}`}
+      />
+
+      <Button type="submit">Login</Button>
+    </form>
+  );
+};
+
+export default LoginForm;