diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 91e9bbd8a..ec2e02037 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -34,6 +34,9 @@ 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 78b06c411..d9087bcf4 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -9,90 +9,91 @@ export default function InputComponent({ disabled, password, editNode = false, + placeholder = "Type something...", }: 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/constants/constants.ts b/src/frontend/src/constants/constants.ts index 0ff77cf45..6677ca2b6 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -508,3 +508,10 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [ "/api/v1/custom_component", "/api/v1/validate/prompt", ]; + +export const CONTROL_INPUT_STATE = { + email: '', + password: '', + cnfPassword: '', + username: '', +}; diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx new file mode 100644 index 000000000..05941ed1a --- /dev/null +++ b/src/frontend/src/pages/signUpPage/index.tsx @@ -0,0 +1,119 @@ +import _ from "lodash"; +import { FaApple, FaGithub } from "react-icons/fa"; +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 { inputHandlerEventType, inputStateType } from "../../types/components"; +import { alertContext } from "../../contexts/alertContext"; +import { Link } from "react-router-dom"; +import InputComponent from "../../components/inputComponent"; + +export default function SignUp(): JSX.Element { + const [inputState, setInputState] = useState(CONTROL_INPUT_STATE); + let errClasses = { + email: false, + password: false, + cnfPassword: false, + username: false, + }; + + const { + setErrorData, + errorOpen, + } = useContext(alertContext); + + const { email, 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); + errClasses[key] = true; + } + }); + setErrorData({ + title: "Mandatory fields are empty", + list: err, + }); + } + 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" + /> + + + + + +
+
+ ); +} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index fc51c8ee3..a3c4a1715 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -4,6 +4,7 @@ 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"; const Router = () => { return ( @@ -15,6 +16,7 @@ const Router = () => { } /> } /> + } /> }> diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 5cf87b8d3..497a6c7a5 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -10,6 +10,7 @@ export type InputComponentType = { editNode?: boolean; onChangePass?: (value: boolean | boolean) => void; showPass?: boolean; + placeholder?: string; }; export type ToggleComponentType = { enabled: boolean; @@ -81,13 +82,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 = { @@ -101,18 +102,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 = { @@ -171,3 +172,17 @@ export type IconComponentProps = { export interface languageMap { [key: string]: string | undefined; } + +export type inputStateType = { + email: string; + password: string; + cnfPassword: string; + username: string; +}; + +export type inputHandlerEventType = { + target: { + value: string; + name: string; + }; +};