initial commit

2025-07-03 01:50:10 +06:00
commit 913ec11bc7
49 changed files with 6784 additions and 0 deletions
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@ -0,0 +1,109 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import FormField from "@/components/FormField";
+import { login } from "@/lib/auth";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import { useAuth } from "@/context/AuthContext";
+
+const page = () => {
+  const router = useRouter();
+  const { setToken } = useAuth();
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // For Rafeed
+  // Function to login a user. I've kept it in a barebones form right now, but you can just call the login function from  /lib/auth.ts and pass on the form.
+  const loginUser = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await login(form, setToken); // Call the login function
+      router.push("/home"); // Redirect on successful login
+    } catch (error) {
+      console.log(error);
+      setError(error.message); // Handle error messages
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <BackgroundWrapper>
+      <div className="flex-1 min-h-screen">
+        <div className="min-h-screen overflow-y-auto">
+          <div className="min-h-full flex flex-col justify-center gap-10 mt-7 mx-6 py-8">
+            {/* Logo Container */}
+            <div
+              className="w-full self-center mt-7"
+              style={{ aspectRatio: "368/89" }}
+            >
+              <Image
+                src="/images/logo/logo.png"
+                alt="Logo"
+                width={368}
+                height={89}
+                className="w-full h-full object-contain"
+                priority
+              />
+            </div>
+
+            {/* Form Container */}
+            <div className="flex flex-col justify-between gap-10">
+              <div className="flex flex-col w-full gap-5">
+                <FormField
+                  title="Email Address"
+                  value={form.email}
+                  placeholder="Enter your email address..."
+                  handleChangeText={(e) => setForm({ ...form, email: e })}
+                />
+                <FormField
+                  title="Password"
+                  value={form.password}
+                  placeholder="Enter a password"
+                  handleChangeText={(e) => setForm({ ...form, password: e })}
+                />
+              </div>
+
+              {error && <DestructibleAlert text={error} extraStyles="" />}
+
+              <button
+                onClick={() => router.push("/home")}
+                disabled={isLoading}
+                className="w-full h-14 flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span
+                  className="font-medium"
+                  style={{ fontFamily: "Montserrat, sans-serif" }}
+                >
+                  {isLoading ? "Logging in..." : "Login"}
+                </span>
+              </button>
+            </div>
+
+            {/* Register Link */}
+            <p
+              className="text-center mb-[70px]"
+              style={{ fontFamily: "Montserrat, sans-serif" }}
+            >
+              Don't have an account?{" "}
+              <Link href="/register" className="text-[#276ac0] hover:underline">
+                Register here.
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </BackgroundWrapper>
+  );
+};
+
+export default page;