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

refactor[signUpPage]: refactor sign up page to use radix ui form modal

Browse source
This commit is contained in:
igorrCarvalho 2023-08-10 02:26:06 -03:00
commit 69ec2681bd
15 changed files with 461 additions and 396 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/src/App.tsx
View file

@ -46,8 +46,8 @@ export default function App() {
}>
>([]);
const isLoginPage = location.pathname.includes('login');
const isAdminPage = location.pathname.includes('admin');
const isLoginPage = location.pathname.includes("login");
const isAdminPage = location.pathname.includes("admin");
// Use effect hook to update alertsList when a new alert is added
useEffect(() => {
@ -123,7 +123,6 @@ export default function App() {
prevAlertsList.filter((alert) => alert.id !== id)
);
};
return (
//need parent component with width and height
@ -137,10 +136,7 @@ export default function App() {
}}
FallbackComponent={CrashErrorComponent}
>
{
!isLoginPage
&&
<Header />}
{!isLoginPage && <Header />}
<Router />
</ErrorBoundary>
<div></div>

8
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -7,5 +7,11 @@ export default function IconComponent({
iconColor,
}: IconComponentProps): JSX.Element {
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
return <TargetIcon strokeWidth={1.5} className={className} style={{ color: iconColor }} />;
return (
<TargetIcon
strokeWidth={1.5}
className={className}
style={{ color: iconColor }}
/>
);
}

2
src/frontend/src/components/headerComponent/index.tsx
View file

@ -35,7 +35,7 @@ export default function Header() {
<span className="ml-4 text-2xl">⛓️</span>
</Link>
<Button variant="outline" className="">
Sign out
Sign out
</Button>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
<MenuBar flows={flows} tabId={tabId} />

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

@ -10,90 +10,92 @@ export default function InputComponent({
password,
editNode = false,
placeholder = "Type something...",
className,
}: InputComponentType) {
const [pwdVisible, setPwdVisible] = useState(false);
// Clear component state
useEffect(() => {
if (disabled) {
onChange("");
}
if (disabled) {
onChange("");
}
}, [disabled, onChange]);
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" : ""
)}
placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => {
onChange(e.target.value);
}}
/>
{password && (
<button
className={classNames(
editNode
? "input-component-true-button"
: "input-component-false-button"
)}
onClick={() => {
setPwdVisible(!pwdVisible);
}}
>
{password &&
(pwdVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={classNames(
editNode
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={classNames(
editNode
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
))}
</button>
)}
</div>
<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);
}}
/>
{password && (
<button
className={classNames(
editNode
? "input-component-true-button"
: "input-component-false-button"
)}
onClick={() => {
setPwdVisible(!pwdVisible);
}}
>
{password &&
(pwdVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={classNames(
editNode
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={classNames(
editNode
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
))}
</button>
)}
</div>
);
}

2
src/frontend/src/components/ui/popover.tsx
View file

@ -27,4 +27,4 @@ const PopoverContent = React.forwardRef<
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
export { Popover, PopoverTrigger, PopoverContent };
export { Popover, PopoverContent, PopoverTrigger };

46
src/frontend/src/components/ui/select.tsx
View file

@ -1,15 +1,15 @@
"use client"
"use client";
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown } from "lucide-react"
import { cn } from "../../utils/utils"
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown } from "lucide-react";
import * as React from "react";
import { cn } from "../../utils/utils";
const Select = SelectPrimitive.Root
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
@ -28,8 +28,8 @@ const SelectTrigger = React.forwardRef<
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
@ -58,8 +58,8 @@ const SelectContent = React.forwardRef<
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
@ -70,8 +70,8 @@ const SelectLabel = React.forwardRef<
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
@ -93,8 +93,8 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
@ -105,16 +105,16 @@ const SelectSeparator = React.forwardRef<
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
}
SelectTrigger,
SelectValue,
};

6
src/frontend/src/constants/constants.ts
View file

@ -510,7 +510,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
];
export const CONTROL_INPUT_STATE = {
password: '',
cnfPassword: '',
username: '',
password: "",
cnfPassword: "",
username: "",
};

2
src/frontend/src/controllers/API/api.tsx
View file

@ -1,6 +1,5 @@
import axios, { AxiosError, AxiosInstance } from "axios";
import { useContext, useEffect, useRef } from "react";
import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
// Create a new Axios instance
@ -20,7 +19,6 @@ function ApiInterceptor() {
// return Promise.reject(error);
// }
// let retryCount = 0;
// while (retryCount < 4) {
// await sleep(5000); // Sleep for 5 seconds
// retryCount++;

22
src/frontend/src/modals/baseModal/index.tsx
View file

@ -47,7 +47,15 @@ interface BaseModalProps {
open?: boolean;
setOpen?: (open: boolean) => void;
disable?: boolean;
size?: "x-small" | "smaller" | "small" | "medium" | "large" | "large-h-full" | "small-h-full" | "medium-h-full";
size?:
| "x-small"
| "smaller"
| "small"
| "medium"
| "large"
| "large-h-full"
| "small-h-full"
| "medium-h-full";
}
function BaseModal({
open,
@ -85,16 +93,16 @@ function BaseModal({
minWidth = "min-w-[40vw]";
height = "h-[40vh]";
break;
case "small-h-full":
minWidth = "min-w-[40vw]";
break;
case "small-h-full":
minWidth = "min-w-[40vw]";
break;
case "medium":
minWidth = "min-w-[60vw]";
height = "h-[60vh]";
break;
case "medium-h-full":
minWidth = "min-w-[60vw]";
break;
minWidth = "min-w-[60vw]";
break;
case "large":
minWidth = "min-w-[80vw]";
height = "h-[80vh]";
@ -118,7 +126,7 @@ function BaseModal({
{triggerChild}
</DialogTrigger>
<DialogContent className={minWidth}>
<div className="word-break-break-word truncate-doubleline">
<div className="truncate-doubleline word-break-break-word">
{headerChild}
</div>
<div className={`mt-2 flex flex-col ${height} w-full `}>

21
src/frontend/src/pages/AdminPage/LoginPage/index.tsx
View file

@ -1,29 +1,28 @@
import { FaApple, FaGithub } from "react-icons/fa";
import { useNavigate } from "react-router-dom";
import { Button } from "../../../components/ui/button";
import { Input } from "../../../components/ui/input";
import { GoogleIcon } from "../../../icons/Google";
import { useNavigate } from "react-router-dom";
export default function LoginAdminPage() {
const navigate = useNavigate();
function loginAdmin() {
navigate("/admin/");
}
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">
Admin
</span>
<span className="mb-6 text-2xl font-semibold text-primary">Admin</span>
<Input className="bg-background" placeholder="Email address" />
<Input className="bg-background" placeholder="Password" />
<Button
onClick={() => {loginAdmin()}}
variant="default" className="w-full">
<Button
onClick={() => {
loginAdmin();
}}
variant="default"
className="w-full"
>
Login
</Button>
</div>

279
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -1,8 +1,9 @@
import _ from "lodash";
import { Pencil, Trash2, X } from "lucide-react";
import { X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import PaginatorComponent from "../../components/PaginatorComponent";
import ShadTooltip from "../../components/ShadTooltipComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import {
@ -15,7 +16,6 @@ import {
} from "../../components/ui/table";
import ConfirmationModal from "../../modals/ConfirmationModal";
import UserManagementModal from "../../modals/UserManagementModal";
import IconComponent from "../../components/genericIconComponent";
export default function AdminPage() {
const [inputValue, setInputValue] = useState("");
@ -249,154 +249,153 @@ export default function AdminPage() {
return (
<>
<div className="main-page-panel">
<div className="h-full m-auto flex flex-row justify-center">
<div className="basis-5/6">
<div className="m-auto h-full flex-col space-y-8 p-8 flex ">
<div className="flex items-center justify-between space-y-2">
<div>
<h2 className="text-2xl font-bold tracking-tight">
Welcome back!
</h2>
<p className="text-muted-foreground">
Here&apos;s a list of all users!
</p>
<div className="main-page-panel">
<div className="m-auto flex h-full flex-row justify-center">
<div className="basis-5/6">
<div className="m-auto flex h-full flex-col space-y-8 p-8 ">
<div className="flex items-center justify-between space-y-2">
<div>
<h2 className="text-2xl font-bold tracking-tight">
Welcome back!
</h2>
<p className="text-muted-foreground">
Here&apos;s a list of all users!
</p>
</div>
<div className="flex items-center space-x-2"></div>
</div>
<div className="flex items-center space-x-2"></div>
</div>
{userList.current.length === 0 && (
<>
<div className="flex items-center justify-between">
<h2>There's no users left :)</h2>
</div>
</>
)}
{userList.current.length > 0 && (
<>
<div className="flex items-center justify-between">
<div className="flex flex-1 items-center space-x-2">
<Input
value={inputValue}
placeholder="Filter users..."
className="h-8 w-[150px] lg:w-[250px]"
onChange={(e) => handleFilterUsers(e.target.value)}
/>
{inputValue.length > 0 && (
<Button
onClick={() => {
resetFilter();
setInputValue("");
{userList.current.length === 0 && (
<>
<div className="flex items-center justify-between">
<h2>There's no users left :)</h2>
</div>
</>
)}
{userList.current.length > 0 && (
<>
<div className="flex items-center justify-between">
<div className="flex flex-1 items-center space-x-2">
<Input
value={inputValue}
placeholder="Filter users..."
className="h-8 w-[150px] lg:w-[250px]"
onChange={(e) => handleFilterUsers(e.target.value)}
/>
{inputValue.length > 0 && (
<Button
onClick={() => {
resetFilter();
setInputValue("");
}}
variant="ghost"
className="h-8 px-2 lg:px-3"
>
Reset
<X className="ml-2 h-4 w-4" />
</Button>
)}
</div>
<div>
<UserManagementModal
title="New User"
titleHeader={"Add a new user"}
cancelText="Cancel"
confirmationText="Save"
icon={"UserPlus2"}
onConfirm={(index, user) => {
handleNewUser(user);
}}
variant="ghost"
className="h-8 px-2 lg:px-3"
>
Reset
<X className="ml-2 h-4 w-4" />
</Button>
)}
<Button>New User</Button>
</UserManagementModal>
</div>
</div>
<div>
<UserManagementModal
title="New User"
titleHeader={"Add a new user"}
cancelText="Cancel"
confirmationText="Save"
icon={"UserPlus2"}
onConfirm={(index, user) => {
handleNewUser(user);
}}
>
<Button>New User</Button>
</UserManagementModal>
</div>
</div>
<div
className="overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted
<div
className="overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted
custom-scroll"
>
<Table className="table-fixed bg-muted outline-1 ">
<TableHeader>
<TableRow>
<TableHead className="h-10">User</TableHead>
<TableHead className="h-10">Password</TableHead>
<TableHead className="h-10 w-[100px] text-right"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filterUserList.map((user, index) => (
<TableRow key={user.user}>
<TableCell className="truncate py-2 font-medium">
{user.user}
</TableCell>
<TableCell className="truncate py-2">
{user.password}
</TableCell>
<TableCell className="flex w-[100px] py-2 text-right">
<div className="flex">
<UserManagementModal
title="Edit"
titleHeader={`${user.user}`}
cancelText="Cancel"
confirmationText="Edit"
icon={"UserPlus2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleEditUser(index, user);
}}
>
<ShadTooltip content="Edit" side="top">
<IconComponent name="Pencil"
className="h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</UserManagementModal>
<ConfirmationModal
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone."
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleDeleteUser(index);
}}
>
<ShadTooltip content="Delete" side="top">
<IconComponent name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</ConfirmationModal>
</div>
</TableCell>
>
<Table className="table-fixed bg-muted outline-1 ">
<TableHeader>
<TableRow>
<TableHead className="h-10">User</TableHead>
<TableHead className="h-10">Password</TableHead>
<TableHead className="h-10 w-[100px] text-right"></TableHead>
</TableRow>
))}
</TableBody>
</Table>
</div>
<PaginatorComponent
pageIndex={index}
pageSize={size}
totalRowsCount={filterUserList.length}
paginate={(pageIndex, pageSize) => {
handleChangePagination(pageSize, pageIndex);
}}
></PaginatorComponent>
</>
)}
</TableHeader>
<TableBody>
{filterUserList.map((user, index) => (
<TableRow key={user.user}>
<TableCell className="truncate py-2 font-medium">
{user.user}
</TableCell>
<TableCell className="truncate py-2">
{user.password}
</TableCell>
<TableCell className="flex w-[100px] py-2 text-right">
<div className="flex">
<UserManagementModal
title="Edit"
titleHeader={`${user.user}`}
cancelText="Cancel"
confirmationText="Edit"
icon={"UserPlus2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleEditUser(index, user);
}}
>
<ShadTooltip content="Edit" side="top">
<IconComponent
name="Pencil"
className="h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</UserManagementModal>
<ConfirmationModal
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone."
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleDeleteUser(index);
}}
>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</ConfirmationModal>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<PaginatorComponent
pageIndex={index}
pageSize={size}
totalRowsCount={filterUserList.length}
paginate={(pageIndex, pageSize) => {
handleChangePagination(pageSize, pageIndex);
}}
></PaginatorComponent>
</>
)}
</div>
</div>
</div>
</div>
</div>
</>
);
}

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

@ -1,104 +1,157 @@
import _ from "lodash";
import * as Form from "@radix-ui/react-form";
import { useState } from "react";
import { FaApple, FaGithub } from "react-icons/fa";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
import { GoogleIcon } from "../../icons/Google";
import { useContext, useState } from "react";
import { CONTROL_INPUT_STATE } from "../../constants/constants";
import { GoogleIcon } from "../../icons/Google";
import { inputHandlerEventType, inputStateType } from "../../types/components";
import { alertContext } from "../../contexts/alertContext";
import { Link } from "react-router-dom";
import InputComponent from "../../components/inputComponent";
import IconComponent from "../../components/genericIconComponent";
export default function SignUp(): JSX.Element {
const [inputState, setInputState] = useState<inputStateType>(CONTROL_INPUT_STATE);
const {
setErrorData,
errorOpen,
} = useContext(alertContext);
const [inputState, setInputState] =
useState<inputStateType>(CONTROL_INPUT_STATE);
const { password, cnfPassword, username } = inputState;
function handleInput({ target: { name, value } }: inputHandlerEventType): void {
setInputState((prev) => ({ ...prev, [name]: value }));
};
function handleSignUpPass() {
if (password !== cnfPassword) {
const errorDat = {
title: "Passwords are not equal",
};
return setErrorData(errorDat);
}
let err = [];
Object.keys(inputState)
.forEach((key) => {
if (inputState[key] === '') {
err.push(key);
}
});
setErrorData({
title: "Mandatory fields are empty",
list: err,
});
}
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">
Sign up 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="Username"
name="username"
value={username}
onChange={handleInput}
type="text"
/>
<InputComponent
value={password}
onChange={(value) => handleInput({ target: { name: 'password', value } })}
password={true}
placeholder="Password"
/>
<InputComponent
value={cnfPassword}
onChange={(value) => handleInput({ target: { name: 'cnfPassword', value } })}
password={true}
placeholder="Confirm your password"
/>
<Button
variant="default"
className="w-full"
onClick={() => {
handleSignUpPass();
}}
>
Sign up
</Button>
<Link to="/login" className="mt-6 w-full">
<Button variant="outline" className="mt-6 w-full">
Already have an account?&nbsp;<b>Sign in</b>
</Button>
</Link>
</div>
</div>
<Form.Root
onSubmit={(event) => {
if (password !== cnfPassword) {
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 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="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 != cnfPassword}>
<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 a password
</Form.Message>
{password != cnfPassword && (
<Form.Message className="field-invalid">
Passwords do not match
</Form.Message>
)}
</Form.Field>
</div>
<div className="w-full">
<Form.Field
name="confirmpassword"
serverInvalid={password != cnfPassword}
>
<Form.Label className="data-[invalid]:label-invalid">
Confirm your password{" "}
<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>
<Form.Message className="field-invalid" match="valueMissing">
Please confirm your password
</Form.Message>
</Form.Field>
</div>
<div className="w-full">
<Form.Submit asChild>
<Button className="mr-3 mt-6 w-full">Sign up</Button>
</Form.Submit>
</div>
<div className="w-full">
<Link to="/login">
<Button className="w-full" variant="outline">
Already have an account?&nbsp;<b>Sign in</b>
</Button>
</Link>
</div>
</div>
</div>
</Form.Root>
);
}

10
src/frontend/src/routes.tsx
View file

@ -1,12 +1,12 @@
import { Route, Routes } from "react-router-dom";
import AdminPage from "./pages/AdminPage";
import LoginAdminPage from "./pages/AdminPage/LoginPage";
import CommunityPage from "./pages/CommunityPage";
import FlowPage from "./pages/FlowPage";
import HomePage from "./pages/MainPage";
import DeleteAccountPage from "./pages/deleteAccountPage";
import LoginPage from "./pages/loginPage";
import SignUp from "./pages/signUpPage";
import LoginAdminPage from "./pages/AdminPage/LoginPage";
import AdminPage from "./pages/AdminPage";
const Router = () => {
return (
@ -17,13 +17,13 @@ const Router = () => {
<Route path="" element={<FlowPage />} />
</Route>
<Route path="*" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignUp/>} />
<Route path="/signup" element={<SignUp />} />
<Route path="/login/admin" element={<LoginAdminPage />} />
<Route path="/admin" element={<AdminPage />} />
<Route path="/account">
<Route path="delete" element={<DeleteAccountPage />}></Route>
</Route>

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

@ -11,6 +11,7 @@ export type InputComponentType = {
onChangePass?: (value: boolean | boolean) => void;
showPass?: boolean;
placeholder?: string;
className?: string;
};
export type ToggleComponentType = {
enabled: boolean;
@ -82,13 +83,13 @@ export type DisclosureComponentType = {
children: ReactNode;
openDisc: boolean;
button: {
title: string;
Icon: any;
buttons?: {
Icon: ReactElement;
title: string;
onClick: (event?: React.MouseEvent) => void;
}[];
title: string;
Icon: any;
buttons?: {
Icon: ReactElement;
title: string;
onClick: (event?: React.MouseEvent) => void;
}[];
};
};
export type FloatComponentType = {
@ -102,18 +103,18 @@ export type TooltipComponentType = {
children: ReactElement;
title: string | ReactElement;
placement?:
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
};
export type ProgressBarType = {
@ -165,7 +166,7 @@ export interface IVarHighlightType {
export type IconComponentProps = {
name: string;
className: string;
className?: string;
iconColor?: string;
};
@ -181,8 +182,8 @@ export type inputStateType = {
export type inputHandlerEventType = {
target: {
value: string;
name: string;
value: string;
name: string;
};
};
export type PaginatorComponentType = {
@ -205,7 +206,7 @@ export type ConfirmationModalType = {
data: any;
index: number;
onConfirm: (index, data) => void;
}
};
export type UserManagementType = {
title: string;
@ -217,4 +218,4 @@ export type UserManagementType = {
data?: any;
index?: number;
onConfirm: (index, data) => void;
}
};

11
src/frontend/src/utils/styleUtils.ts
View file

@ -5,6 +5,8 @@ import {
ChevronDown,
ChevronLeft,
ChevronRight,
ChevronsLeft,
ChevronsRight,
ChevronsUpDown,
Circle,
Clipboard,
@ -44,6 +46,7 @@ import {
MoonIcon,
MoreHorizontal,
Paperclip,
Pencil,
Plus,
Redo,
Rocket,
@ -66,9 +69,6 @@ import {
X,
XCircle,
Zap,
Pencil,
ChevronsRight,
ChevronsLeft
} from "lucide-react";
import { AirbyteIcon } from "../icons/Airbyte";
import { AnthropicIcon } from "../icons/Anthropic";
@ -96,6 +96,7 @@ import SvgWikipedia from "../icons/Wikipedia/Wikipedia";
import SvgWolfram from "../icons/Wolfram/Wolfram";
import { HackerNewsIcon } from "../icons/hackerNews";
import { SupabaseIcon } from "../icons/supabase";
import { FaApple, FaGithub } from "react-icons/fa";
export const gradients = [
"bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
@ -284,5 +285,7 @@ export const nodeIconsLucide = {
UserPlus2,
Pencil,
ChevronsRight,
ChevronsLeft
ChevronsLeft,
FaGithub,
FaApple,
};