jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge branch 'login' into login-auth

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-12 00:27:13 -03:00
commit d4b0ba9052
4 changed files with 82 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/frontend/src/components/inputComponent/index.tsx
View file

@ -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
value={value}
disabled={disabled}
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);
}}
/>
{isForm ? (
<Form.Control asChild>
<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);
}}
/>
</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(

44
src/frontend/src/pages/loginPage/index.tsx
View file

@ -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
onChange={(value) => {
handleInput({ target: { name: "password", value } });
}}
value={password}
password={true}
placeholder="Password"
className="w-full"
/>
</Form.Control>
<InputComponent
onChange={(value) => {
handleInput({ target: { name: "password", value } });
}}
value={password}
isForm
password={true}
required
placeholder="Password"
className="w-full"
/>
<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">

57
src/frontend/src/pages/signUpPage/index.tsx
View file

@ -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>
<Form.Control asChild>
<InputComponent
onChange={(value) => {
handleInput({ target: { name: "password", value } });
}}
value={password}
password={true}
placeholder="Password"
className="w-full"
/>
</Form.Control>
<InputComponent
onChange={(value) => {
handleInput({ target: { name: "password", value } });
}}
value={password}
isForm
password={true}
required
placeholder="Password"
className="w-full"
/>
<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
onChange={(value) => {
handleInput({ target: { name: "cnfPassword", value } });
}}
value={cnfPassword}
password={true}
/>
</Form.Control>
<InputComponent
onChange={(value) => {
handleInput({ target: { name: "cnfPassword", value } });
}}
value={cnfPassword}
isForm
password={true}
required
placeholder="Confirm your password"
className="w-full"
/>
<Form.Message className="field-invalid" match="valueMissing">
Please confirm your password

2
src/frontend/src/types/components/index.ts
View file

@ -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;