From 61d1e13644c94cbe6d98054b16291da433637462 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 7 Aug 2023 09:51:40 -0300
Subject: [PATCH] feat(loginPage): add LoginPage component to handle user login
 functionality

The LoginPage component is added to handle the user login functionality. It includes UI elements such as buttons, icons, and input fields for email address and password. The component also includes a login button and a sign-up button for users who don't have an account.
---
 src/frontend/src/pages/loginPage/index.tsx | 39 ++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/frontend/src/pages/loginPage/index.tsx

diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx
new file mode 100644
index 000000000..6ba88455a
--- /dev/null
+++ b/src/frontend/src/pages/loginPage/index.tsx
@@ -0,0 +1,39 @@
+import { FaApple, FaGithub } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { GoogleIcon } from "../../icons/Google";
+
+export default function LoginPage() {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
+      <div className="flex w-72 flex-col items-center justify-center gap-2">
+        <span className="mb-4 text-5xl">⛓️</span>
+        <span className="mb-6 text-2xl font-semibold text-primary">
+          Log in to LangFlow
+        </span>
+        <div className="flex w-full items-center justify-center gap-2">
+          <Button variant="primary" className="w-full py-6">
+            <FaApple className="h-6 w-6" />
+          </Button>
+          <Button variant="primary" className="w-full py-6">
+            <FaGithub className="h-6 w-6" />
+          </Button>
+          <Button variant="primary" className="w-full py-6">
+            <div className="h-6 w-6">
+              <GoogleIcon />
+            </div>
+          </Button>
+        </div>
+        <span className="text-sm text-muted-foreground">or</span>
+        <Input className="bg-background" placeholder="Email address" />
+        <Input className="bg-background" placeholder="Password" />
+        <Button variant="default" className="w-full">
+          Login
+        </Button>
+        <Button variant="outline" className="mt-6 w-full">
+          Don't have an account?&nbsp;<b>Sign Up</b>
+        </Button>
+      </div>
+    </div>
+  );
+}