refactor[loginPage]: Refactor login Page to use Form UI Radix Modal

src/frontend/src/constants/constants.ts

@@ -514,3 +514,8 @@ export const CONTROL_INPUT_STATE = {
   cnfPassword: "",
   username: "",
 };
+
+export const CONTROL_LOGIN_STATE = {
+  username: "",
+  password: "",
+};

src/frontend/src/pages/loginPage/index.tsx

@@ -1,39 +1,130 @@
-import { FaApple, FaGithub } from "react-icons/fa";
+import * as Form from "@radix-ui/react-form";
+import { useState } from "react";
+import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
-import { GoogleIcon } from "../../icons/Google";
+import { CONTROL_LOGIN_STATE } from "../../constants/constants";
+import { inputHandlerEventType, loginInputStateType, } from "../../types/components";
+import { Link } from "react-router-dom";
+import IconComponent from "../../components/genericIconComponent";
 
-export default function LoginPage() {
+export default function LoginPage(): JSX.Element {
+  const [inputState, setInputState] =
+    useState<loginInputStateType>(CONTROL_LOGIN_STATE);
+
+  const { password, username } = inputState;
+
+  function handleInput({
+    target: { name, value },
+  }: inputHandlerEventType): void {
+    setInputState((prev) => ({ ...prev, [name]: value }));
+  }
   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>
+    <Form.Root
+      onSubmit={(event) => {
+        if (password === "") {
+          event.preventDefault();
+          return;
+        }
+
+        const data = Object.fromEntries(new FormData(event.currentTarget));
+        event.preventDefault();
+      }}
+      className="w-full h-full"
+    >
+      <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">
+            Sign in to LangFlow
+          </span>
+          <div className="flex w-full items-center justify-center gap-2">
+            <Button variant="primary" className="w-full py-6">
+              <IconComponent
+                name="FaApple"
+                className="h-6 w-6"
+              />
+            </Button>
+            <Button variant="primary" className="w-full py-6">
+              <IconComponent
+                name="FaGithub"
+                className="h-6 w-6"
+              />
+            </Button>
+            <Button variant="primary" className="w-full py-6">
+              <IconComponent
+                name="GoogleSearchRun"
+                className="h-6 w-6"
+              />
+            </Button>
+          </div>
+          <span className="text-sm text-muted-foreground">or</span>
+          <div className="w-full mb-3">
+            <Form.Field name="username">
+              <Form.Label className="data-[invalid]:label-invalid">
+                Username <span className="font-medium text-destructive">*</span>
+              </Form.Label>
+
+              <Form.Control asChild>
+                <Input
+                  onChange={({ target: { value } }) => {
+                    handleInput({ target: { name: "username", value } });
+                  }}
+                  value={username}
+                  className="w-full"
+                  required
+                  placeholder="Username"
+                />
+              </Form.Control>
+
+              <Form.Message match="valueMissing" className="field-invalid">
+                Please enter your username
+              </Form.Message>
+            </Form.Field>
+          </div>
+          <div className="w-full mb-3">
+            <Form.Field name="password" serverInvalid={password === ""}>
+              <Form.Label className="data-[invalid]:label-invalid">
+                Password <span className="font-medium text-destructive">*</span>
+              </Form.Label>
+
+              <Form.Control asChild>
+                <InputComponent
+                  onChange={(value) => {
+                    handleInput({ target: { name: "password", value } });
+                  }}
+                  value={password}
+                  password={true}
+                  placeholder="Password"
+                  className="w-full"
+                />
+              </Form.Control>
+
+              <Form.Message className="field-invalid" match="valueMissing">
+                Please enter your password
+              </Form.Message>
+
+              {password === "" && (
+                <Form.Message className="field-invalid">
+                  Please enter a valid password
+                </Form.Message>
+              )}
+            </Form.Field>
+          </div>
+          <div className="w-full">
+            <Form.Submit asChild>
+              <Button className="mr-3 mt-6 w-full">Sign in</Button>
+            </Form.Submit>
+          </div>
+          <div className="w-full">
+            <Link to="/signup">
+              <Button className="w-full" variant="outline">
+                Don't have an account?&nbsp;<b>Sign Up</b>
+              </Button>
+            </Link>
+          </div>
         </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>
+    </Form.Root>
   );
 }

src/frontend/src/pages/signUpPage/index.tsx

@@ -1,18 +1,16 @@
 import * as Form from "@radix-ui/react-form";
-import { useState } from "react";
-import { FaApple, FaGithub } from "react-icons/fa";
+import { FormEvent, useState } from "react";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CONTROL_INPUT_STATE } from "../../constants/constants";
-import { GoogleIcon } from "../../icons/Google";
-import { inputHandlerEventType, inputStateType } from "../../types/components";
+import { inputHandlerEventType, signUpInputStateType } from "../../types/components";
 import { Link } from "react-router-dom";
 import IconComponent from "../../components/genericIconComponent";
 
 export default function SignUp(): JSX.Element {
   const [inputState, setInputState] =
-    useState<inputStateType>(CONTROL_INPUT_STATE);
+    useState<signUpInputStateType>(CONTROL_INPUT_STATE);
 
   const { password, cnfPassword, username } = inputState;
 
@@ -23,8 +21,8 @@ export default function SignUp(): JSX.Element {
   }
   return (
     <Form.Root
-      onSubmit={(event) => {
-        if (password !== cnfPassword) {
+      onSubmit={(event: FormEvent<HTMLFormElement>) => {
+          if (password === "") {
           event.preventDefault();
           return;
         }

src/frontend/src/types/components/index.ts

@@ -174,7 +174,7 @@ export interface languageMap {
   [key: string]: string | undefined;
 }
 
-export type inputStateType = {
+export type signUpInputStateType = {
   password: string;
   cnfPassword: string;
   username: string;
@@ -219,3 +219,8 @@ export type UserManagementType = {
   index?: number;
   onConfirm: (index, data) => void;
 };
+
+export type loginInputStateType = {
+  username: string;
+  password: string;
+}