feat: Add signUp page and Sign out button

src/frontend/src/components/headerComponent/index.tsx

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

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

@@ -9,6 +9,7 @@ export default function InputComponent({
   disabled,
   password,
   editNode = false,
+  placeholder = "Type something...",
 }: InputComponentType) {
   const [pwdVisible, setPwdVisible] = useState(false);
 
@@ -30,7 +31,7 @@ export default function InputComponent({
       	password && editNode ? "pr-8" : "",
       	password && !editNode ? "pr-10" : ""
     	)}
-        placeholder={password && editNode ? "Key" : "Type something..."}
+    	placeholder={password && editNode ? "Key" : placeholder}
     	onChange={(e) => {
       	onChange(e.target.value);
     	}}

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: '',
+};

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<inputStateType>(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 (
+  	<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={errClasses.email ? "border-destructive" : "" + " bg-background"}
+        	placeholder="Email address"
+        	name="email"
+        	value={email}
+        	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"
+      	/>
+      	<Input
+        	className="bg-background"
+        	placeholder="Username"
+        	name="username"
+        	value={username}
+        	onChange={handleInput}
+        	type="text"
+      	/>
+      	<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>
+  );
+}

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 = () => {
       </Route>
       <Route path="*" element={<HomePage />} />
       <Route path="/login" element={<LoginPage />} />
+      <Route path="/signup" element={<SignUp/>} />
       <Route path="/account">
         <Route path="delete" element={<DeleteAccountPage />}></Route>
       </Route>

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