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

Feat: add user on signUp button form

Browse source
This commit is contained in:
igorrCarvalho 2023-08-16 18:14:49 -03:00
commit 1ad78dca1f
12 changed files with 99 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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">

12
src/frontend/src/components/PaginatorComponent/index.tsx
View file

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

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

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

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

@ -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} />
)}

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

@ -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.";

14
src/frontend/src/contexts/authContext.tsx
View file

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

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

@ -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"];
}

4
src/frontend/src/controllers/API/index.ts
View file

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

2
src/frontend/src/pages/loginPage/index.tsx
View file

@ -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";

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

@ -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">

2
src/frontend/src/types/contexts/auth.ts
View file

@ -14,5 +14,5 @@ export type AuthContextType = {
getAuthentication: () => boolean;
authenticationErrorCount: number;
autoLogin: boolean;
setAutoLogin: (autoLogin: boolean) => void
setAutoLogin: (autoLogin: boolean) => void;
};

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

@ -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";