From 69ec2681bdbb409d9e196b23f33898d6a725c67d Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Thu, 10 Aug 2023 02:26:06 -0300 Subject: [PATCH] refactor[signUpPage]: refactor sign up page to use radix ui form modal --- src/frontend/src/App.tsx | 10 +- .../components/genericIconComponent/index.tsx | 8 +- .../src/components/headerComponent/index.tsx | 2 +- .../src/components/inputComponent/index.tsx | 156 +++++----- src/frontend/src/components/ui/popover.tsx | 2 +- src/frontend/src/components/ui/select.tsx | 46 +-- src/frontend/src/constants/constants.ts | 6 +- src/frontend/src/controllers/API/api.tsx | 2 - src/frontend/src/modals/baseModal/index.tsx | 22 +- .../src/pages/AdminPage/LoginPage/index.tsx | 21 +- src/frontend/src/pages/AdminPage/index.tsx | 279 +++++++++--------- src/frontend/src/pages/signUpPage/index.tsx | 233 +++++++++------ src/frontend/src/routes.tsx | 10 +- src/frontend/src/types/components/index.ts | 49 +-- src/frontend/src/utils/styleUtils.ts | 11 +- 15 files changed, 461 insertions(+), 396 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index f5c9b54d7..fb0e9f2d4 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -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 - && -
} + {!isLoginPage &&
}
diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx index 681835f44..186c2e253 100644 --- a/src/frontend/src/components/genericIconComponent/index.tsx +++ b/src/frontend/src/components/genericIconComponent/index.tsx @@ -7,5 +7,11 @@ export default function IconComponent({ iconColor, }: IconComponentProps): JSX.Element { const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"]; - return ; + return ( + + ); } diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index ec2e02037..2a5fef057 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -35,7 +35,7 @@ export default function Header() { ⛓️ {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index d9087bcf4..7adb029c3 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -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 ( -
- { - onChange(e.target.value); - }} - /> - {password && ( - - )} -
+
+ { + onChange(e.target.value); + }} + /> + {password && ( + + )} +
); } diff --git a/src/frontend/src/components/ui/popover.tsx b/src/frontend/src/components/ui/popover.tsx index 63c80bb7e..2a7a6988d 100644 --- a/src/frontend/src/components/ui/popover.tsx +++ b/src/frontend/src/components/ui/popover.tsx @@ -27,4 +27,4 @@ const PopoverContent = React.forwardRef< )); PopoverContent.displayName = PopoverPrimitive.Content.displayName; -export { Popover, PopoverTrigger, PopoverContent }; +export { Popover, PopoverContent, PopoverTrigger }; diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx index 865096f82..c8586598f 100644 --- a/src/frontend/src/components/ui/select.tsx +++ b/src/frontend/src/components/ui/select.tsx @@ -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, @@ -28,8 +28,8 @@ const SelectTrigger = React.forwardRef< -)) -SelectTrigger.displayName = SelectPrimitive.Trigger.displayName +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; const SelectContent = React.forwardRef< React.ElementRef, @@ -58,8 +58,8 @@ const SelectContent = React.forwardRef< -)) -SelectContent.displayName = SelectPrimitive.Content.displayName +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; const SelectLabel = React.forwardRef< React.ElementRef, @@ -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, @@ -93,8 +93,8 @@ const SelectItem = React.forwardRef< {children} -)) -SelectItem.displayName = SelectPrimitive.Item.displayName +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; const SelectSeparator = React.forwardRef< React.ElementRef, @@ -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, +}; diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index f6cd633ab..142684c3e 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -510,7 +510,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [ ]; export const CONTROL_INPUT_STATE = { - password: '', - cnfPassword: '', - username: '', + password: "", + cnfPassword: "", + username: "", }; diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 2df49081e..6029d135e 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -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++; diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index e058f4086..b343aa06f 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -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} -
+
{headerChild}
diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx index 6109278c4..74cc75d07 100644 --- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx @@ -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 (
⛓️ - - Admin - + Admin -
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index 6f1c8fea1..e598af8b4 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -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 ( <> -
-
-
-
-
-
-

- Welcome back! -

-

- Here's a list of all users! -

+
+
+
+
+
+
+

+ Welcome back! +

+

+ Here's a list of all users! +

+
+
-
-
- {userList.current.length === 0 && ( - <> -
-

There's no users left :)

-
- - )} - {userList.current.length > 0 && ( - <> -
-
- handleFilterUsers(e.target.value)} - /> - {inputValue.length > 0 && ( - + )} +
+
+ { + handleNewUser(user); }} - variant="ghost" - className="h-8 px-2 lg:px-3" > - Reset - - - )} + + +
-
- { - handleNewUser(user); - }} - > - - -
-
-
- - - - User - Password - - - - - {filterUserList.map((user, index) => ( - - - {user.user} - - - {user.password} - - -
- { - handleEditUser(index, user); - }} - > - - - - - - { - handleDeleteUser(index); - }} - > - - - - -
- + > +
+ + + User + Password + - ))} - -
-
- { - handleChangePagination(pageSize, pageIndex); - }} - > - - )} + + + {filterUserList.map((user, index) => ( + + + {user.user} + + + {user.password} + + +
+ { + handleEditUser(index, user); + }} + > + + + + + + { + handleDeleteUser(index); + }} + > + + + + +
+ + + ))} + + +
+ { + handleChangePagination(pageSize, pageIndex); + }} + > + + )} +
-
- -
- ); } diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx index 444c31bc8..797ef62b6 100644 --- a/src/frontend/src/pages/signUpPage/index.tsx +++ b/src/frontend/src/pages/signUpPage/index.tsx @@ -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(CONTROL_INPUT_STATE); - - const { - setErrorData, - errorOpen, - } = useContext(alertContext); + const [inputState, setInputState] = + useState(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 ( -
-
- ⛓️ - - Sign up to LangFlow - -
- - - -
- or - - handleInput({ target: { name: 'password', value } })} - password={true} - placeholder="Password" - /> - handleInput({ target: { name: 'cnfPassword', value } })} - password={true} - placeholder="Confirm your password" - /> - - - - -
-
+ { + if (password !== cnfPassword) { + event.preventDefault(); + return; + } + + const data = Object.fromEntries(new FormData(event.currentTarget)); + event.preventDefault(); + }} + className="w-full h-full" + > +
+
+ ⛓️ + + Sign up to LangFlow + +
+ + + +
+ or +
+ + + Username * + + + + { + handleInput({ target: { name: "username", value } }); + }} + value={username} + className="w-full" + required + placeholder="Username" + /> + + + + Please enter your username + + +
+
+ + + Password * + + + + { + handleInput({ target: { name: "password", value } }); + }} + value={password} + password={true} + placeholder="Password" + className="w-full" + /> + + + + Please enter a password + + + {password != cnfPassword && ( + + Passwords do not match + + )} + +
+
+ + + Confirm your password{" "} + * + + + + { + handleInput({ target: { name: "cnfPassword", value } }); + }} + value={cnfPassword} + password={true} + /> + + + + Please confirm your password + + +
+
+ + + +
+
+ + + +
+
+
+ ); } diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index c30ecef70..8466f9b57 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -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 = () => { } /> } /> - + } /> - } /> + } /> } /> } /> - + }> diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 07d1c3d97..70c19aa1a 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -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; -} +}; diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 3896c2de9..4ffba0c21 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -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, };