From 6290f6bffa648ee8d794e5ca1c208f767c19e904 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Tue, 19 Aug 2025 19:58:29 +0700
Subject: [PATCH] :sparkles: create new login page

create all UI components on the login page, including the header, login form, and OAuth selection
---
 features/auth/ui/EmailInput.tsx     | 26 +++++++++++++++++
 features/auth/ui/Login.tsx          | 37 +++++++++++++++++++++++-
 features/auth/ui/OAuthProviders.tsx | 45 +++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 features/auth/ui/EmailInput.tsx
 create mode 100644 features/auth/ui/OAuthProviders.tsx

diff --git a/features/auth/ui/EmailInput.tsx b/features/auth/ui/EmailInput.tsx
new file mode 100644
index 0000000..053f5ef
--- /dev/null
+++ b/features/auth/ui/EmailInput.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Button, Input } from "@heroui/react";
+import React from "react";
+
+const EmailInput = () => {
+  return (
+    <>
+      <Input
+        className="w-full "
+        label="Email"
+        type="email"
+        variant="bordered"
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button className="mt-2 w-full" color="primary">
+        Continue
+      </Button>
+    </>
+  );
+};
+
+export default EmailInput;
diff --git a/features/auth/ui/Login.tsx b/features/auth/ui/Login.tsx
index 667db12..f64bbdf 100644
--- a/features/auth/ui/Login.tsx
+++ b/features/auth/ui/Login.tsx
@@ -1,7 +1,42 @@
+"use client";
+
 import React from "react";
+import EmailInput from "./EmailInput";
+import { Divider, Link } from "@heroui/react";
+import { routes } from "@/shared/config/routes";
+import OAuthProviders from "./OAuthProviders";
 
 const Login = () => {
-  return <div>This is login flow</div>;
+  return (
+    <div className="pt-12 max-w-[480px] mx-auto">
+      <div className="text-3xl text-center">Welcome back</div>
+
+      {/* Email form */}
+      <div className="mt-6 px-3">
+        <EmailInput />
+      </div>
+
+      {/* Sign up link */}
+      <p className="text-center text-neutral-300 text-sm font-light mt-5">
+        Don't have an account?{" "}
+        <Link className="text-sm font-medium" href={routes.signup}>
+          Sign Up
+        </Link>
+      </p>
+
+      {/* Divider between email form and third-party login options */}
+      <div className="flex w-full items-center mt-6 px-10">
+        <Divider className="flex-1" />
+        <span className="px-2 text-neutral-500 text-sm">or</span>
+        <Divider className="flex-1" />
+      </div>
+
+      {/* Buttons for third-party login options */}
+      <div className="mt-6 px-4">
+        <OAuthProviders />
+      </div>
+    </div>
+  );
 };
 
 export default Login;
diff --git a/features/auth/ui/OAuthProviders.tsx b/features/auth/ui/OAuthProviders.tsx
new file mode 100644
index 0000000..a351f03
--- /dev/null
+++ b/features/auth/ui/OAuthProviders.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@heroui/react";
+import { Icon } from "@iconify/react";
+import React from "react";
+
+const OAuthProviders = () => {
+  // set to true if there are other providers coming soon
+  const comingSoonProviders: boolean = true;
+
+  // Provider for third-party auth
+  const oAuthProviders = [
+    {
+      name: "Google",
+      icon: "logos:google-icon",
+    },
+    {
+      name: "Discord",
+      icon: "logos:discord-icon",
+    },
+  ];
+
+  return (
+    <div className="w-full flex flex-col gap-2 mt-4">
+      {oAuthProviders.map((provider, index) => {
+        return (
+          <Button
+            key={index}
+            className="w-full hover:bg-neutral-800"
+            variant="bordered"
+            startContent={<Icon icon={provider.icon} />}
+          >
+            Continue with {provider.name}
+          </Button>
+        );
+      })}
+
+      {comingSoonProviders && (
+        <Button className="w-full" variant="ghost" isDisabled>
+          Other login options will come soon
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default OAuthProviders;