Merge branch 'login' into login-auth

src/frontend/src/components/inputComponent/index.tsx

@@ -1,3 +1,4 @@
+import * as Form from "@radix-ui/react-form";
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils/utils";
@@ -7,6 +8,8 @@ export default function InputComponent({
   value,
   onChange,
   disabled,
+  required = false,
+  isForm = false,
   password,
   editNode = false,
   placeholder = "Type something...",
@@ -23,21 +26,47 @@ export default function InputComponent({
 
   return (
     <div className="relative w-full">
-      <Input
+      {isForm ? (
-        value={value}
+        <Form.Control asChild>
-        disabled={disabled}
+          <Input
-        className={classNames(
+            value={value}
-          password && !pwdVisible && value !== "" ? " text-clip password " : "",
+            disabled={disabled}
-          editNode ? " input-edit-node " : "",
+            required={required}
-          password && editNode ? "pr-8" : "",
+            className={classNames(
-          password && !editNode ? "pr-10" : "",
+              password && !pwdVisible && value !== ""
-          className
+                ? " text-clip password "
-        )}
+                : "",
-        placeholder={password && editNode ? "Key" : placeholder}
+              editNode ? " input-edit-node " : "",
-        onChange={(e) => {
+              password && editNode ? "pr-8" : "",
-          onChange(e.target.value);
+              password && !editNode ? "pr-10" : "",
-        }}
+              className
-      />
+            )}
+            placeholder={password && editNode ? "Key" : placeholder}
+            onChange={(e) => {
+              onChange(e.target.value);
+            }}
+          />
+        </Form.Control>
+      ) : (
+        <Input
+          value={value}
+          disabled={disabled}
+          required={required}
+          className={classNames(
+            password && !pwdVisible && value !== ""
+              ? " text-clip password "
+              : "",
+            editNode ? " input-edit-node " : "",
+            password && editNode ? "pr-8" : "",
+            password && !editNode ? "pr-10" : "",
+            className
+          )}
+          placeholder={password && editNode ? "Key" : placeholder}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+        />
+      )}
       {password && (
         <button
           className={classNames(

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

@@ -65,20 +65,8 @@ export default function LoginPage(): JSX.Element {
         <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
+            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="mb-3 w-full">
             <Form.Field name="username">
               <Form.Label className="data-[invalid]:label-invalid">
@@ -103,32 +91,26 @@ export default function LoginPage(): JSX.Element {
             </Form.Field>
           </div>
           <div className="mb-3 w-full">
-            <Form.Field name="password" serverInvalid={password === ""}>
+            <Form.Field name="password">
               <Form.Label className="data-[invalid]:label-invalid">
                 Password <span className="font-medium text-destructive">*</span>
               </Form.Label>
 
-              <Form.Control asChild>
+              <InputComponent
-                <InputComponent
+                onChange={(value) => {
-                  onChange={(value) => {
+                  handleInput({ target: { name: "password", value } });
-                    handleInput({ target: { name: "password", value } });
+                }}
-                  }}
+                value={password}
-                  value={password}
+                isForm
-                  password={true}
+                password={true}
-                  placeholder="Password"
+                required
-                  className="w-full"
+                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">

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

@@ -39,20 +39,8 @@ export default function SignUp(): JSX.Element {
         <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 up to LangFlow
+            Sign up 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="mb-3 w-full">
             <Form.Field name="username">
               <Form.Label className="data-[invalid]:label-invalid">
@@ -81,18 +69,17 @@ export default function SignUp(): JSX.Element {
               <Form.Label className="data-[invalid]:label-invalid">
                 Password <span className="font-medium text-destructive">*</span>
               </Form.Label>
-
+              <InputComponent
-              <Form.Control asChild>
+                onChange={(value) => {
-                <InputComponent
+                  handleInput({ target: { name: "password", value } });
-                  onChange={(value) => {
+                }}
-                    handleInput({ target: { name: "password", value } });
+                value={password}
-                  }}
+                isForm
-                  value={password}
+                password={true}
-                  password={true}
+                required
-                  placeholder="Password"
+                placeholder="Password"
-                  className="w-full"
+                className="w-full"
-                />
+              />
-              </Form.Control>
 
               <Form.Message className="field-invalid" match="valueMissing">
                 Please enter a password
@@ -115,15 +102,17 @@ export default function SignUp(): JSX.Element {
                 <span className="font-medium text-destructive">*</span>
               </Form.Label>
 
-              <Form.Control asChild>
+              <InputComponent
-                <InputComponent
+                onChange={(value) => {
-                  onChange={(value) => {
+                  handleInput({ target: { name: "cnfPassword", value } });
-                    handleInput({ target: { name: "cnfPassword", value } });
+                }}
-                  }}
+                value={cnfPassword}
-                  value={cnfPassword}
+                isForm
-                  password={true}
+                password={true}
-                />
+                required
-              </Form.Control>
+                placeholder="Confirm your password"
+                className="w-full"
+              />
 
               <Form.Message className="field-invalid" match="valueMissing">
                 Please confirm your password

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

@@ -7,6 +7,8 @@ export type InputComponentType = {
   disabled?: boolean;
   onChange: (value: string) => void;
   password: boolean;
+  required?: boolean;
+  isForm?: boolean;
   editNode?: boolean;
   onChangePass?: (value: boolean | boolean) => void;
   showPass?: boolean;