From 1ad78dca1fe897b60f8c3b91a5d0c7343d4c8a66 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 16 Aug 2023 18:14:49 -0300
Subject: [PATCH] Feat: add user on signUp button form

---
 src/frontend/src/App.tsx                      | 47 ++++++++---------
 .../components/PaginatorComponent/index.tsx   | 12 +++--
 .../src/components/authLoginGuard/index.tsx   |  2 +-
 .../src/components/headerComponent/index.tsx  | 11 ++--
 src/frontend/src/constants/constants.ts       |  3 ++
 src/frontend/src/contexts/authContext.tsx     | 14 ++---
 src/frontend/src/controllers/API/api.tsx      |  7 +--
 src/frontend/src/controllers/API/index.ts     |  4 +-
 src/frontend/src/pages/loginPage/index.tsx    |  2 +-
 src/frontend/src/pages/signUpPage/index.tsx   | 51 +++++++++++++++++--
 src/frontend/src/types/contexts/auth.ts       |  2 +-
 src/frontend/src/utils/styleUtils.ts          |  2 +-
 12 files changed, 99 insertions(+), 58 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 99901e3a0..beab8c683 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -14,7 +14,7 @@ import { alertContext } from "./contexts/alertContext";
 import { AuthContext } from "./contexts/authContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
-import { autoLogin, getLoggedUser, onLogin } from "./controllers/API";
+import { autoLogin, getLoggedUser } from "./controllers/API";
 import Router from "./routes";
 
 export default function App() {
@@ -37,7 +37,7 @@ export default function App() {
     successData,
     successOpen,
     setSuccessOpen,
-    setErrorData
+    setErrorData,
   } = useContext(alertContext);
   const navigate = useNavigate();
 
@@ -131,33 +131,34 @@ export default function App() {
   };
 
   //this function is to get the user logged in when the page is refreshed
-  const { setUserData, getAuthentication, login, setAutoLogin } = useContext(AuthContext);
+  const { setUserData, getAuthentication, login, setAutoLogin } =
+    useContext(AuthContext);
 
   useEffect(() => {
     setTimeout(() => {
-      autoLogin().then((user) => {
-        if(user && user['access_token']){
-          user['refresh_token'] = "auto";
-          login(user['access_token'], user['refresh_token']);
-          setAutoLogin(true);
-        }
-      }).catch((error) => {
-        setAutoLogin(false);
-        if (getAuthentication && !isLoginPage) {
-          getLoggedUser()
-            .then((user) => {
-              setUserData(user);
-            })
-            .catch((error) => {});
-        }
-        else{
-          navigate("/login");
-        }
-      });
+      autoLogin()
+        .then((user) => {
+          if (user && user["access_token"]) {
+            user["refresh_token"] = "auto";
+            login(user["access_token"], user["refresh_token"]);
+            setAutoLogin(true);
+          }
+        })
+        .catch((error) => {
+          setAutoLogin(false);
+          if (getAuthentication && !isLoginPage) {
+            getLoggedUser()
+              .then((user) => {
+                setUserData(user);
+              })
+              .catch((error) => {});
+          } else {
+            navigate("/login");
+          }
+        });
     }, 500);
   }, []);
 
-
   return (
     //need parent component with width and height
     <div className="flex h-full flex-col">
diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx
index 0bb40fa60..0e9242f15 100644
--- a/src/frontend/src/components/PaginatorComponent/index.tsx
+++ b/src/frontend/src/components/PaginatorComponent/index.tsx
@@ -19,7 +19,9 @@ export default function PaginatorComponent({
 }: PaginatorComponentType) {
   const [size, setPageSize] = useState(pageSize);
   const [index, setPageIndex] = useState(pageIndex);
-  const [maxIndex, setMaxPageIndex] = useState(Math.ceil(totalRowsCount/pageSize));
+  const [maxIndex, setMaxPageIndex] = useState(
+    Math.ceil(totalRowsCount / pageSize)
+  );
   const [currentPage, setCurrentPage] = useState(1);
 
   return (
@@ -32,7 +34,7 @@ export default function PaginatorComponent({
             <Select
               onValueChange={(pageSize: string) => {
                 setPageSize(Number(pageSize));
-                setMaxPageIndex(Math.ceil(totalRowsCount/Number(pageSize)))
+                setMaxPageIndex(Math.ceil(totalRowsCount / Number(pageSize)));
                 paginate(Number(pageSize), 0);
               }}
             >
@@ -70,7 +72,7 @@ export default function PaginatorComponent({
               onClick={() => {
                 if (index > 0) {
                   const pgIndex = size - index;
-                  setCurrentPage(currentPage-1);
+                  setCurrentPage(currentPage - 1);
                   setPageIndex(pgIndex);
                   paginate(size, pgIndex);
                 }
@@ -86,7 +88,7 @@ export default function PaginatorComponent({
               onClick={() => {
                 const pgIndex = size + index;
                 setPageIndex(pgIndex);
-                setCurrentPage(currentPage+1);
+                setCurrentPage(currentPage + 1);
                 paginate(size, pgIndex);
               }}
               variant="outline"
@@ -100,7 +102,7 @@ export default function PaginatorComponent({
               variant="outline"
               className="hidden h-8 w-8 p-0 lg:flex"
               onClick={() => {
-                setPageIndex(maxIndex-1);
+                setPageIndex(maxIndex - 1);
                 setCurrentPage(maxIndex);
                 paginate(size, size);
               }}
diff --git a/src/frontend/src/components/authLoginGuard/index.tsx b/src/frontend/src/components/authLoginGuard/index.tsx
index 229f9b284..980528023 100644
--- a/src/frontend/src/components/authLoginGuard/index.tsx
+++ b/src/frontend/src/components/authLoginGuard/index.tsx
@@ -5,7 +5,7 @@ import { AuthContext } from "../../contexts/authContext";
 export const ProtectedLoginRoute = ({ children }) => {
   const { getAuthentication, autoLogin } = useContext(AuthContext);
 
-  if(autoLogin === true){
+  if (autoLogin === true) {
     window.location.replace("/");
     return <Navigate to="/" replace />;
   }
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 274b4bdc3..29b5ec0ca 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -7,12 +7,11 @@ import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import { getLoggedUser, getRepoStars } from "../../controllers/API";
+import { getRepoStars } from "../../controllers/API";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
-import { Users } from "../../types/api";
 
 export default function Header() {
   const { flows, tabId } = useContext(TabsContext);
@@ -53,17 +52,13 @@ export default function Header() {
             Sign out
           </Button>
         )}
-        
+
         {isAdmin && (
-          <Button
-            variant="outline"
-            onClick={() => navigate("/admin")}
-          >
+          <Button variant="outline" onClick={() => navigate("/admin")}>
             Admin page
           </Button>
         )}
 
-
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar flows={flows} tabId={tabId} />
         )}
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index a8881d7a5..105e75b23 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -610,3 +610,6 @@ export function tabsArray(codes: string[], method: number) {
 }
 
 export const BASE_URL_API = "http://localhost:7860/";
+
+export const SIGN_UP_SUCCESS =
+  "Congratulations on signing up! Your account is currently awaiting activation by our admin team.";
diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx
index b66606ada..24a697339 100644
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/src/frontend/src/contexts/authContext.tsx
@@ -1,8 +1,8 @@
 import { createContext, useEffect, useState } from "react";
 import Cookies from "universal-cookie";
+import { getLoggedUser } from "../controllers/API";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
-import { getLoggedUser } from "../controllers/API";
 
 const initialValue: AuthContextType = {
   isAdmin: false,
@@ -38,15 +38,15 @@ export function AuthProvider({ children }): React.ReactElement {
       setAccessToken(storedAccessToken);
     }
   }, []);
-  
+
   useEffect(() => {
     if (accessToken) {
       getLoggedUser().then((user) => {
-        const isSuperUser = user.is_superuser
+        const isSuperUser = user.is_superuser;
         setIsAdmin(isSuperUser);
       });
     }
-  }, [accessToken, isAdmin])
+  }, [accessToken, isAdmin]);
 
   function getAuthentication() {
     const storedRefreshToken = cookies.get("refresh_token");
@@ -85,7 +85,9 @@ export function AuthProvider({ children }): React.ReactElement {
       if (response.ok) {
         const data = await response.json();
         login(data.accessToken, refreshToken);
-        getLoggedUser().then((user) => { console.log('oi')});
+        getLoggedUser().then((user) => {
+          console.log("oi");
+        });
       } else {
         logout();
       }
@@ -111,7 +113,7 @@ export function AuthProvider({ children }): React.ReactElement {
         getAuthentication,
         authenticationErrorCount: 0,
         setAutoLogin,
-        autoLogin
+        autoLogin,
       }}
     >
       {children}
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 2318891c4..22d9d46ca 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -79,11 +79,8 @@ function ApiInterceptor() {
           ) ||
           config?.url?.includes(
             "https://api.github.com/repos/logspace-ai/langflow"
-          )
-          ||
-          config?.url?.includes(
-            "auto_login"
-          )
+          ) ||
+          config?.url?.includes("auto_login")
         ) {
           delete config.headers["Authorization"];
         }
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 0590b5aa6..174aa24bc 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -380,9 +380,7 @@ export async function onLogin(user: LoginType) {
 
 export async function autoLogin() {
   try {
-    const response = await api.get(
-      `${BASE_URL_API}auto_login`
-    );
+    const response = await api.get(`${BASE_URL_API}auto_login`);
 
     if (response.status === 200) {
       const data = response.data;
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx
index 3195ca6dd..56ce90f75 100644
--- a/src/frontend/src/pages/loginPage/index.tsx
+++ b/src/frontend/src/pages/loginPage/index.tsx
@@ -1,5 +1,5 @@
 import * as Form from "@radix-ui/react-form";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx
index c81253f4d..02b725a14 100644
--- a/src/frontend/src/pages/signUpPage/index.tsx
+++ b/src/frontend/src/pages/signUpPage/index.tsx
@@ -1,11 +1,17 @@
 import * as Form from "@radix-ui/react-form";
-import { FormEvent, useState } from "react";
-import { Link } from "react-router-dom";
+import { FormEvent, useContext, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
-import { CONTROL_INPUT_STATE } from "../../constants/constants";
 import {
+  CONTROL_INPUT_STATE,
+  SIGN_UP_SUCCESS,
+} from "../../constants/constants";
+import { alertContext } from "../../contexts/alertContext";
+import { addUser } from "../../controllers/API";
+import {
+  UserInputType,
   inputHandlerEventType,
   signUpInputStateType,
 } from "../../types/components";
@@ -15,12 +21,42 @@ export default function SignUp(): JSX.Element {
     useState<signUpInputStateType>(CONTROL_INPUT_STATE);
 
   const { password, cnfPassword, username } = inputState;
+  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const navigate = useNavigate();
 
   function handleInput({
     target: { name, value },
   }: inputHandlerEventType): void {
     setInputState((prev) => ({ ...prev, [name]: value }));
   }
+
+  function handleSignup(): void {
+    const { username, password } = inputState;
+    const newUser: UserInputType = {
+      username,
+      password,
+    };
+    addUser(newUser)
+      .then((user) => {
+        setSuccessData({
+          title: SIGN_UP_SUCCESS,
+        });
+        navigate("/login");
+      })
+      .catch((error) => {
+        const {
+          response: {
+            data: { detail },
+          },
+        } = error;
+        setErrorData({
+          title: "Error signing up",
+          list: [detail[0].msg],
+        });
+        return;
+      });
+  }
+
   return (
     <Form.Root
       onSubmit={(event: FormEvent<HTMLFormElement>) => {
@@ -120,7 +156,14 @@ export default function SignUp(): JSX.Element {
           </div>
           <div className="w-full">
             <Form.Submit asChild>
-              <Button className="mr-3 mt-6 w-full">Sign up</Button>
+              <Button
+                className="mr-3 mt-6 w-full"
+                onClick={() => {
+                  handleSignup();
+                }}
+              >
+                Sign up
+              </Button>
             </Form.Submit>
           </div>
           <div className="w-full">
diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts
index 393870370..f557db33e 100644
--- a/src/frontend/src/types/contexts/auth.ts
+++ b/src/frontend/src/types/contexts/auth.ts
@@ -14,5 +14,5 @@ export type AuthContextType = {
   getAuthentication: () => boolean;
   authenticationErrorCount: number;
   autoLogin: boolean;
-  setAutoLogin: (autoLogin: boolean) => void
+  setAutoLogin: (autoLogin: boolean) => void;
 };
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 1c2018f69..dac5b8e25 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -35,6 +35,7 @@ import {
   HelpCircle,
   Home,
   Info,
+  Key,
   Laptop2,
   Layers,
   Lightbulb,
@@ -72,7 +73,6 @@ import {
   X,
   XCircle,
   Zap,
-  Key
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AirbyteIcon } from "../icons/Airbyte";